Valor padrão? O que é isso?

E ae galera…

Hoje queria falar com vocês sobre algo que mudou do ES5 para o ES6, mas pouco é comentado.  Sempre que falamos de ES6, todo mundo pensa nas arrow functions, no template string ou mesmo no operador spread, mas pouca gente fala do parâmetro padrão ou valor padrão. Que é um recurso, na minha opinião, pouco valorizado e que na verdade trouxe ainda mais facilidade pro desenvolvimento e leitura do código.

Para explicar com calma e detalhes vou mostrar como era feito no ES5, mostrar algumas formas de realizar isso e só no final como usamos hoje. Até porque é fundamental a gente compreender de onde vem e qual o problema o valor padrão resolveu.

Imagine que temos uma função bem simples que soma 3 valores. E caso algum desses valores não seja passado quando a função for invocada, quero dar ao valor esquecido o valor de 1. Vamos a prática…

Captura de Tela 2018-03-15 às 9.19.49 AM

Temos a nossa função, que recebeu 3 parâmetros, dentro da função eu estou utilizando o conceito de truthy e falsy, se você ainda não sabe o que é isso, não tenha medo, falarei disso muito em breve. Mas para cada um dos parâmetros eu estou dizendo que se a for verdadeiro ele vai retornar o valor de a, se for falso ele vai retornar 1. Esse é um método muito comum para declarar um valor padrão no JS. Mas ele tem alguns problemas, vamos ver quais são:

Captura de Tela 2018-03-15 às 9.26.45 AM

Invoquei a função sum1 4 vezes, na primeira sem passar nenhum parâmetro, e tivemos como resultado 3, pois ele compreendeu que a, b e c tem valor 1, já que undefined é dado como valor falso. Na segunda chamada, passei apenas um parâmetro que vai ser armazenado no valor de a e deu o resultado 4, somando 2 + 1 + 1. Até agora nada de errado. Na terceira vez que a função foi chamada, também está tudo correto, três parâmetros, somou os 3. Mas olha a quarta vez que chamei a função, passei 3 parâmetros, mas todos são zero. Pelo conceito de trusth e falsy, 0 é falso, logo o JS entendeu que deve utilizar o valor padrão e não o valor 0.

Ainda no ES5 há como corrigir isso… Deixa eu mostrar pra vocês. Vou criar outra função de soma e mostrar as 3 técnicas que conheço:

Captura de Tela 2018-03-15 às 9.34.30 AM

Interrogação? Dois pontos no meio do nada? arguments? isNaN? Que bruxaria são essas? Calma galera, vamos explicar tudo isso detalhadamente.

Uma forma de verificar o valor padrão de uma variável é através do operador ternário, que tem um funcionamento bem simples, temos uma condição e duas expressões, se a condição for verdade ele retorna a expressão 1, se for falso retorna a expressão 2. Vou mostrar um exemplo da estrutura e funcionamento:

Captura de Tela 2018-03-15 às 9.45.53 AM.png

Para mostrar o operador ternário, criei uma função para verificar se o valor é par ou impar, se o valor passado dividido por 2 tiver resto 0, ele é par, se for 1 ele é impar. Bem simples. Então, se a condição for verdade ele exibe a expressão 1, caso falso a expressão 2. Ficou claro como ele funciona? Para você saber um pouco mais sobre operador ternário vou deixar um link do MDN aqui.

Mas e esse arguments e esse isNaN? O arguments é um array dos parâmetros passados na função. Por isso no caso da variável b temos que pegar o valor 1, já que ele é o segundo valor do array e todo array inicia em 0. Se fosse a variável c teríamos que pegar o índice 2 de arguments. Já o isNaN é um validador da própria linguagem. Ele verifica se o valor não é um número, lembrando que NaN é Not a Number, então ele verifica se a variável c é um número ou não, se não for um número ele retorna 1, se for um número ele retorna o valor de c.

Ta bom Marcus… E no ES6? Mudou o que?

Quando você souber, talvez até fique com raiva de mim. Mas agora no ES6 podemos passar o valor padrão dentro da declaração do parâmetro.

Captura de Tela 2018-03-15 às 10.01.12 AM

Não fiquem com raiva de mim, por ter mostrado um monte de coisas antes de mostrar algo tão simples. Parece uma besteira, mas olha os valores no console, não temos mais o erro causado pelo trusth e falsy, não precisamos mais usar técnicas de operadores ternários, basta passar o valor padrão dentro da declaração dos parâmetros. Deixando o código menor, mais simples de compreender e de escrever. Já falei diversas vezes e vou falar sempre… O ES6 veio para facilitar a escrita e a compreensão. E o valor padrão é um excelente exemplo disso!

Espero que tenha ficado claro para todos. Qualquer dúvida, deixa um comentário aqui, ou no grupo do facebook.

Grande abraço galera!!!

 

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s