Parâmetros padrão de funções em JavaScript: do caos à elegância

Parâmetro sem presente? Entendendo os valores padrão em JavaScript

Imagine que você pediu uma pizza. Você liga para a entrega e diz: "Para mim, uma pizza, por favor." O atendente pergunta: "Qual?" — "Bem, a padrão, com queijo e calabresa." Você nem pensa que a pizza tem parâmetros padrão.

Da mesma forma em JavaScript: funções são frequentemente chamadas sem todos os argumentos. E se o programador não previu set a default parameter value for a JavaScript function, o código pode quebrar ou se comportar de forma imprevisível. Neste artigo, vamos abordar todas as formas de definir um valor padrão para um parâmetro de função em JS — desde os velhos e bons "gambiarras" até a sintaxe moderna do ES6. Vamos nessa!

Por que isso é importante?

Suponha que temos uma função que saúda o usuário:

function greet(name) {\n    console.log('Olá, ' + name + '!');\n}\n\ngreet(); // Exibe: "Olá, undefined!" — estranho, né?

Sem default parameters javascript, um argumento não passado se torna undefined. E se tentarmos chamar um método em undefined — teremos um erro. Portanto, parâmetros padrão js não são apenas conveniência, mas sim proteção contra bugs.

Método 1: Clássico — operador ternário (ou if)

Antes do ES6, os desenvolvedores usavam o operador ternário javascript ou uma simples verificação. Funciona, mas parece verboso:

function multiply(a, b) {\n    a = a !== undefined ? a : 1;\n    b = b !== undefined ? b : 2;\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10 (5 * 2)\nconsole.log(multiply());  // 2 (1 * 2)

Prós: Claro até para iniciantes, compatível com navegadores antigos.
\nContras: O código fica inchado. Se houver 5–6 parâmetros, a legibilidade cai drasticamente.

Armadilha: verificação de undefined vs truthy

Muitos iniciantes escrevem assim:

function greet(name) {\n    name = name || 'Convidado';\n    console.log('Olá, ' + name);\n}

Isso funciona, até que você passe 0, uma string vazia '' ou false. Todos esses valores são falsy, e a função os substituirá por 'Convidado'. Se você precisar passar 0 como um valor válido — essa abordagem quebrará. Use a verificação estrita de undefined.

Método 2: O objeto mágico arguments

Dentro de cada função (exceto arrow functions) existe um objeto implícito semelhante a um array chamado arguments javascript. Ele pode ser usado para verificar os argumentos passados:

function showInfo(name, age) {\n    name = arguments.length > 0 ? name : 'Anônimo';\n    age = arguments.length > 1 ? age : 'não informado';\n    return `${name}, idade: ${age}`;\n}\n\nconsole.log(showInfo()); // Anônimo, idade: não informado

Prós: Dá controle total sobre quais argumentos foram passados.
\nContras: Sintaxe obsoleta, não funciona em arrow functions. Geralmente usado apenas para tarefas muito específicas (por exemplo, quando o número de parâmetros é desconhecido antecipadamente).

Método 3: Padrão moderno — parâmetros padrão ES6

A partir do ECMAScript 2015, definir parâmetros padrão js pode ser feito diretamente na declaração da função. Esta é a maneira mais limpa e recomendada:

function multiply(a = 1, b = 2) {\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10\nconsole.log(multiply());  // 2

Bonito, né? Mas existem nuances importantes que você precisa saber para não cair em armadilhas.

Nuance 1: Valores padrão são calculados no momento da chamada

Isso significa que se você passar undefined — o padrão será acionado. Se você passar null — não:

function test(x = 10) {