Javascript - ES6 Default Parameters

Escrito por

Hoje vou falar um pouquinho de JavaScript, mais especificamente sobre como podemos fazer o parâmetro padrão para uma função e as alternativas que a gente tem atualmente com ES6 para esse tipo de atividade.

O que é um parâmetro padrão?

Vamos supor que temos uma função aplicarImposto, um valor e o quanto de imposto que queremos aplicar para esse valor:

1function aplicarImposto(valor, imposto){
2 return valor+valor*imposto
3}
4
5console.log(aplicarImposto(100, 0.1))

Então estamos aplicando o imposto nesse valor. Agora vamos supor que eu não quero deixar o imposto ser obrigatório, deixando um valor padrão para ele:

1function aplicarImposto(valor, imposto) {
2 console.log(imposto)
3
4 return valor+valor*imposto
5}
6
7console.log(aplicarImposto(100, 0.1))
8
9console.log(aplicarImposto(200))

Ao retornarmos apenas isso vai ser retornado NaN (not a number). Isso acontece porque se tentarmos checar o imposto como boolean, sabemos que ele é um falsy por ser undefined. Para corrigir isso, podemos fazer o seguinte:

1function aplicarImposto(valor, imposto) {
2 Imposto = imposto || 0.07
3
4 return valor+valor*imposto
5}
6
7console.log(aplicarImposto(100, 0.1))
8
9console.log(aplicarImposto(200))

Se rodarmos novamente, temos o 7% em cima do 200. Mas temos um outro problema. Vamos supor que eu não queira aplicar um imposto (por algum milagre o produto não cobre imposto):

1console.log(aplicarImposto(100, 0.1))
2
3console.log(aplicarImposto(200))
4
5console.log(aplicarImposto(300, 0))

Repare que ele retorna 321 ao invés de 300, mesmo colocando 0 de imposto. Isso acontece porque checamos Imposto = imposto || 0.07 como falsy, e como zero é false, ele retorna o imposto. Poderíamos contornar isso checando se o tipo da variável não é uma undefined:

1Imposto = (typeof imposto ===undefined) ? 0.07 : imposto

Ainda podemos fazer de uma outra forma, com o ES6:

1function aplicarImpostES6(valor, imposto = 0.07) {
2 return valor + valor * imposto
3}
4
5console.log(aplicarImpostoES6(100, 0.1))
6
7console.log(aplicarImpostoES6(200))
8
9console.log(aplicarImpostoES6(300, 0))

Com isso fica um pouco mais simples, porém podemos ir um além. Vamos supor que eu tenha um adicional, posso colocar esse adicional passando um valor, ou ele é um valor vezes o imposto mais porcentagem:

1function aplicarImpostES6(
2 valor,
3 imposto = 0.07,
4 adicional = valor * (imposto + 0.1)
5) {
6 return valor + valor * imposto + adicional
7}
8
9console.log(aplicarImpostoES6(100, 0.1, 0))
10
11console.log(aplicarImpostoES6(200))
12
13console.log(aplicarImpostoES6(300, 0, 0))

No primeiro e último setei adicional como 0, então apenas no 200 ele vai aplicar os 10% além dos 7% já colocados antes. Essas são possibilidades interessantes de utilizar o default parameters no ES6, isso aumenta muito as possibilidades no nosso código.

Confira o video:

Deixe suas dúvidas e sugestões nos comentários. Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium