Parâmetros Padrão em JavaScript

• Introdução
• Parâmetros Padrão

Introdução

Em JavaScript, as funções podem ter valores padrão, ou seja, receber um valor caso nenhum seja fornecido.

Parâmetros Padrão

Usaremos uma função simples de adição como exemplo:

function sum(a, b) {
  return a + b;
}

sum(5, 5); // 10
sum(5, null); // 5
sum(5, undefined); // NaN 
sum(5, ''); // "5"
sum(5, 0); // 5

Normalmente, para transformar valores inválidos recebidos em 0, por exemplo, pode-se fazer o seguinte:

function sum(a, b) {
  // se 'a' não for válido, define como 0
  if (!a) {
    a = 0;
  }
  // se 'b' não for válido, define como 0  
  if (!b) {
    b = 0;
  }
  return a + b;
}

sum(5, 5); // 10
sum(5, null); // 5
sum(5, undefined); // 5
sum(5, ''); // 5
sum(5, 0); // 5

No entanto, usando parâmetros padrão, poderíamos transformar essa mesma função da seguinte maneira:

// definimos o valor padrão de 'a' e 'b' igual a 0
function sum(a = 0, b = 0) {
  return a + b; 
}

sum(5); // 5    (5 + 0)
sum(5, undefined); // 5    (5 + 0)
sum(5, null); // 5    (5 + null)  
sum(5, ''); // "5"  (5 + '')
sum(5, 5); // 10   (5 + 5)
sum(5, 0); // 5    (5 + 0)

Vemos que os parâmetros padrão são aplicados apenas em parâmetros undefined, portanto, receber null, 0 ou '' fará com que esses valores sejam usados.

Agora outro exemplo com um 'Hello World!':

function helloWorld(name) {
  return 'Hello ' + name + '!';
}

helloWorld(); // 'Hello undefined!'
helloWorld(undefined); // 'Hello undefined!'
helloWorld(null); // 'Hello null!'
helloWorld(''); // 'Hello !' 
helloWorld('World'); // 'Hello World!'

Se não enviarmos os parâmetros apropriados, acabamos com resultados inesperados, neste caso Hello undefined!.

Podemos corrigir isso usando parâmetros padrão:

function helloWorld(name = 'World') {
  return 'Hello ' + name + '!';
}

helloWorld(); // 'Hello World!'
helloWorld(undefined); // 'Hello World!' 
helloWorld(null); // 'Hello null!'
helloWorld(''); // 'Hello !'
helloWorld('World'); // 'Hello World!'

Vemos que, caso nenhum parâmetro seja enviado (undefined), a função usa o padrão, neste caso, 'World'. Embora, como mencionado anteriormente, os parâmetros padrão só funcionam se o valor recebido for undefined. No caso de receber 0, null ou '' como parâmetro, esses valores serão usados.

Agora vamos ver outro exemplo concatenando arrays:

function salad(fruits, vegetables) {
  return fruits.concat(vegetables);
}

salad(); // TypeError: Cannot read property 'concat' of undefined
salad(['grapes']); // ['grapes', undefined]

salad(['apple', 'pear'], []); // ['apple', 'pear']  
salad(['apple', 'pear'], ['lettuce', 'onion']); // ['apple', 'pear', 'lettuce', 'onion']

Com parâmetros padrão:

function salad(fruits = [], vegetables = []) {
  return fruits.concat(vegetables);
}

salad(); //  []
salad(['grapes']); //  ['grapes'] 
salad(['apple', 'pear'], []); //  ['apple', 'pear']
salad(['apple', 'pear'], ['lettuce', 'onion']); //  ['apple', 'pear', 'lettuce', 'onion']

Os parâmetros padrão podem simplificar consideravelmente as validações ao criar funções. Estes podem ser de qualquer tipo, ou seja, number, object, string, etc. até mesmo funções ou parâmetros padrão previamente definidos.

Portanto, isso é totalmente válido:

function sum(a = 5, b = 3, c = a - b) {
  return a + b + c;
}

sum(); // 10	(5 + 3 + 2) 
sum(3); // 6	(3 + 3 + 0)
sum(10); // 20	(10 + 3 + 7)

function sum2(a = sum(10), b = 5) {
  return a + b;  
}

sum2(); // 25	(20 + 5)
sum2(10); // 15	(10 + 5)