Resumo : neste tutorial, você aprenderá como lidar com os parâmetros padrão do JavaScript no ES6.
DR
function say(message='Hi') {
console.log(message);
}
say(); // 'Hi'
say('Hello') // 'Hello'Linguagem de código: JavaScript ( javascript )O valor padrão do messageparâmetro na say()função é 'Hi'.
Em JavaScript, os parâmetros de função padrão permitem inicializar parâmetros nomeados com valores padrão se nenhum valor undefinedfor passado para a função.
Argumentos vs. Parâmetros
Às vezes, você pode usar os termos argumento e parâmetro de forma intercambiável. No entanto, por definição, os parâmetros são o que você especifica na declaração da função , enquanto os argumentos são o que você passa para a função.
Considere a seguinte add()função:
function add(x, y) {
return x + y;
}
add(100,200);Linguagem de código: JavaScript ( javascript )Neste exemplo, e xsão yos parâmetros da add()função e os valores passados para a add()função 100e 200são os argumentos.
Configurando parâmetros padrão de JavaScript para uma função
Em JavaScript, um parâmetro tem um valor padrão indefinido . Isso significa que se você não passar os argumentos para a função , seus parâmetros terão os valores padrão de undefined.
Veja o exemplo a seguir:
function say(message) {
console.log(message);
}
say(); // undefinedLinguagem de código: JavaScript ( javascript )A say()função recebe o messageparâmetro. Como não passamos nenhum argumento para a say()função, o valor do messageparâmetro é undefined.
Suponha que você queira atribuir ao messageparâmetro um valor padrão 10.
Uma maneira típica de conseguir isso é testar o valor do parâmetro e atribuir um valor padrão se estiver undefinedusando um operador ternário :
function say(message) {
message = typeof message !== 'undefined' ? message : 'Hi';
console.log(message);
}
say(); // 'Hi'Linguagem de código: JavaScript ( javascript )Neste exemplo, não passamos nenhum valor para a say()função. Portanto, o valor padrão do argumento da mensagem é undefined. Dentro da função, reatribuímos a messagevariável à Histring.
ES6 fornece uma maneira mais fácil de definir os valores padrão para os parâmetros de função como este:
function fn(param1=default1, param2=default2,..) {
}Linguagem de código: JavaScript ( javascript )Na sintaxe acima, você usa o operador de atribuição ( =) e o valor padrão após o nome do parâmetro para definir um valor padrão para esse parâmetro. Por exemplo:
function say(message='Hi') {
console.log(message);
}
say(); // 'Hi'
say(undefined); // 'Hi'
say('Hello'); // 'Hello'Linguagem de código: JavaScript ( javascript )Como funciona.
- Na primeira chamada de função, não passamos nenhum argumento para a
say()função, portantomessageo parâmetro assumiu o valor padrão'Hi'. - Na segunda chamada de função, passamos the
undefinedpara asay()função, portanto omessageparâmetro também assumiu o valor padrão'Hi'. - Na terceira chamada de função, passamos a
'Hello'string para asay()função, portantomessageo parâmetro tomou a string'Hello'como valor padrão.
Mais exemplos de parâmetros padrão de JavaScript
Vejamos mais alguns exemplos para aprender algumas opções disponíveis para definir valores padrão dos parâmetros da função.
1) Passando argumentos indefinidos
A createDiv()função a seguir cria um novo <div>elemento no documento com altura, largura e estilo de borda específicos:
function createDiv(height = '100px', width = '100px', border = 'solid 1px red') {
let div = document.createElement('div');
div.style.height = height;
div.style.width = width;
div.style.border = border;
document.body.appendChild(div);
return div;
}Linguagem de código: JavaScript ( javascript )O seguinte não passa nenhum argumento para a função, portanto a createDiv()função usa os valores padrão para os parâmetros.
createDiv();Suponha que você queira usar os valores padrão para os parâmetros de altura e largura e um estilo de borda específico. Neste caso, você precisa passar undefinedvalores para os dois primeiros parâmetros da seguinte forma:
createDiv(undefined,undefined,'solid 5px blue');Linguagem de código: JavaScript ( javascript )2) Avaliando parâmetros padrão
O mecanismo JavaScript avalia os argumentos padrão no momento em que você chama a função. Veja o exemplo a seguir:
function put(toy, toyBox = []) {
toyBox.push(toy);
return toyBox;
}
console.log(put('Toy Car'));
// -> ['Toy Car']
console.log(put('Teddy Bear'));
// -> ['Teddy Bear'], not ['Toy Car','Teddy Bear']Linguagem de código: JavaScript ( javascript )O parâmetro pode assumir um valor padrão que é resultado de uma função.
Considere o seguinte exemplo:
function date(d = today()) {
console.log(d);
}
function today() {
return (new Date()).toLocaleDateString("en-US");
}
date();Linguagem de código: JavaScript ( javascript )A date()função usa um parâmetro cujo valor padrão é o valor retornado da today()função. A today()função retorna a data de hoje em um formato de string especificado.
Quando declaramos a date()função, ela today()ainda não foi avaliada até que a chamamos date().
Podemos usar esse recurso para tornar os argumentos obrigatórios. Se o chamador não passar nenhum argumento, geramos um erro como segue:
function requiredArg() {
throw new Error('The argument is required');
}
function add(x = requiredArg(), y = requiredArg()){
return x + y;
}
add(10); // error
add(10,20); // OKLinguagem de código: JavaScript ( javascript )3) Usando outros parâmetros em valores padrão
Você pode atribuir a um parâmetro um valor padrão que faça referência a outros parâmetros padrão, conforme mostrado no exemplo a seguir:
function add(x = 1, y = x, z = x + y) {
return x + y + z;
}
console.log(add()); // 4Linguagem de código: JavaScript ( javascript )Na add()função:
- O valor padrão de
yé definido comoxparâmetro. - O valor padrão de
zé a soma dexey - A
add()função retorna a soma dex,y, ez.
A lista de parâmetros parece ter seu próprio escopo . Se você fizer referência ao parâmetro que ainda não foi inicializado, receberá um erro. Por exemplo:
function subtract( x = y, y = 1 ) {
return x - y;
}
subtract(10);Linguagem de código: JavaScript ( javascript )Mensagem de erro:
Uncaught ReferenceError: Cannot access 'y' before initializationLinguagem de código: JavaScript ( javascript )Usando funções
Você pode usar o valor de retorno de uma função como valor padrão para um parâmetro. Por exemplo:
let taxRate = () => 0.1;
let getPrice = function( price, tax = price * taxRate() ) {
return price + tax;
}
let fullPrice = getPrice(100);
console.log(fullPrice); // 110Linguagem de código: JavaScript ( javascript )Na getPrice()função, chamamos a taxRate()função para obter a alíquota do imposto e usar essa alíquota para calcular o valor do imposto a partir do preço.
O objeto de argumentos
O valor do argumentsobjeto dentro da função é o número de argumentos reais que você passa para a função. Por exemplo:
function add(x, y = 1, z = 2) {
console.log( arguments.length );
return x + y + z;
}
add(10); // 1
add(10, 20); // 2
add(10, 20, 30); // 3Linguagem de código: JavaScript ( javascript )Agora, você deve entender os parâmetros de função padrão do JavaScript e como usá-los de maneira eficaz.
