Dominando Condicionais Javascript

Published in

Nerdzão/Nerdgirlz

5 min readNov 21, 2018

Particularidades de condicionais em Javascript que podem facilitar e muito o seu trabalho.

Uma das primeiras coisas que qualquer programador tem que aprender são os operadores condicionais, todos nós conhecemos os operadores if, else, else ifou o switch. Eles são uma poderosa ferramenta na tomada de decisão em suas aplicações.

Por exemplo, vamos lembrar da lenda do Rei Arthur. A Excalibur estava presa na pedra e somente o escolhido, Rei Arthur, poderia removê-la. Se a espada fosse programada em Javascript (kkkkkkkkkk) como isso seria?

Funciona muito bem desta maneira, mas tenho percebido que eu tenho escrito cada vez menos if, else, switch e substituído por outros artifícios que o Javascript nos proporciona, e vamos abordá-los nesse artigo.

Expressions vs Statements

Parece uma simples questão de nomenclatura, mas não o é. Expressions e Statements são coisas bem diferentes, vamos entendê-las.

Uma expression é qualquer comando que a engine do Javascript pode avaliar para produzir um valor.

Acima temos alguns exemplos de expressions no javascript, temos literais, operadores lógicos, ternários, operações aritméticas, atribuições, execução de funções e até acesso à propriedades de objetos.

Já um statement é um comando que o javascript pode executar para fazer algo ou produzir algum side-effect. Por exemplo: condicionais, declarações de funções ou variáveis, throw, return, try/catch/finally

Um condicional gera um booleano

Simples assim, um condicional sempre vai gerar um boleno, desde o mais simples teste até os condicionais mais complexos, o resultado vai ser um booleano.

Mas essa é a parte mais fácil de entender, pra dominar melhor condicionais temos que entender dois conceitos:

Os conceitos de truthye falsy
Short-circuiting em condicionais.

Truthy X Falsy

Estranhas essas expressões certo? Nós sempre aprendemos que um booleano só pode ser trueou false, então que diabos vem a ser truthye falsy? Bom, são valores que podem ser avaliados como verdadeiros ou falsos, apesar de não o serem, puramente. Quem já trabalhou com testes unitários provavelmente já teve contato com essas expressões e esses valores.

Javascript considera falsy alguns valores que podem ser entendidos como vazios, ausentes ou não definidos. São avaliados como falsyos seguintes exemplos:

``, '' , ""ou (strings vazias)
0ou -0(número zero xD lembra que 0 é false né?)
null
undefined
NaN
false

Qualquer outro valor é fora dessa lista é um valor considerado truthye quando colocado "à prova" em um teste condicional valores falsyserão forçados para false e valores truthyserão forçados para true

Existem algumas maneiras de converter um valor truthyou falsypara booleano, a mais conhecida é fazendo usando a função Boolean()

Outra maneira que está sendo bastante usada é usando o operador ! (NOT). Quando usamos o operador !ele nos dá o inverso de um valor booleano. Portanto se usarmos !!ele nos dá o inverso do inverso, ou seja, o valor certo hahahaha, vocês entenderam né? Todo valor truthyserá convertido para truee todo valor falsyserá convertido para false.

Curto Circuito

Os operadores E (&&) e OU (||) precisam de 2 expressões para avaliar e avaliam estas expressões para produzir um valor.

Portanto as expressões são evaluadas como trueou falsee:

O operador E só retornará truese, e somente se as duas expressões forem true
O operador OU retornará true se ao menos uma das expressões forem true

Também devemos lembrar que o operador E tem precedência ao operador OU na hora da execução, o que pode mudar drasticamente o resultado de uma expressão, como vemos abaixo.

Portanto em uma operação com o operador &&, por exemplo, se o primeiro é false então o resultado será false certo? Portanto, não há necessidade de executarmos a segunda expressão, seria inútil, já que sabemos o resultado. O Javascript, esperto que só ele, sabe disso e, portanto, tem uma funcionalidade conhecida como short-circuiting, que interrompe a execução quando o valor de uma operação já é conhecida.

Mas os operadores && e || nem sempre produzem valores true ou false. Na verdade eles geralmente podem produzir qualquer valor, veja exemplos disso baseando-nos no comportamento do short-circuiting:

Quando usamos o && e o valor do primeiro operando é truthy ele executa o valor do segundo e retorna o mesmo. Porém, se o valor do primeiro operando é falsy o valor do segundo nunca é analisado e o valor retornado é o valor falsy do primeiro operando.

Já quando usamos o || e o valor do primeiro operando é truthy então ele não executa o segundo operando, somente retorna o valor do primeiro, caso o primeiro operando seja falsy o javascript irá executar o valor do segundo retorná-lo.

Substituindo statements por expressions

Bom, mas só vale a pena conhecer essas particularidades se pudermos colocar em prática de alguma forma, certo? Com certeza! Vamos imaginar o caso do Rei Arthur, lá do começo deste artigo, como podemos aplicar estes conceitos a ele usando short-circuiting?

Menos código né, mas aqui coloco uma ressalva, usar expressões desta maneira pode fazer com que o código se torne mais difícil de ler por uma pessoa iniciante no javascript. Em contrapartida, esse iniciante, quando conseguir entender o que está acontecendo ali terá uma carga de conhecimento maior do que se ele só pegasse códigos usando if...else durante sua carreira.

Mais sobre

1. Operadores Ternários

Estes conceitos também podem ser utilizados usando-se operadores ternários. O exemplo acima usando ternário ficaria da seguinte maneira:

2. Leis de De Morgan

Óbvio que se usamos lógica booleana aqui as Leis de De Morgan se aplicam, só vou colocar aqui para lembrar o que aprendemos nas aulas na faculdade e depois esquecemos, é legal conhecer o nome dos princípios que usamos e como eles funcionam, os exemplos abaixo são equivalentes entre si:

Conclusão

As técnicas e conceitos que eu apresentei aqui são muito legais pra conhecermos as particularidades e como funcionam as coisas no Javascript, porém temos que levar em conta a senioridade da equipe de desenvolvimento em que trabalhamos, tomar cuidado para não cometermos erros de interpretação de código e mesmo na escrita, de que nossas expressões serão evaluadas como nós pretendemos. Eu acho que vale a pena usar em algumas situações, mas eu sempre digo, uma tecnologia, uma técnica, uma solução nunca vai ser definitiva, o papel de um bom programador e de um bom analista é saber quando e onde usar cada tipo de tecnologia.

Se quiserem saber mais sobre o assunto vejam estes artigos aqui, que são interessantíssimos, nos quais eu me baseei: