Fala galera! Espero que esteja tudo certo com vocês!
Vou iniciar uma série, chamada “Dev fast tips”, onde vou dar algumas dicas rápidas e bastante úteis em nosso dia-a-dia. Hoje vou começar falando sobre operadores ternários; um assunto bastante simples, porém ainda vejo que bastante gente não conhece, não usa, ou tem dificuldade para usar. Bora lá?
Mas afinal, o que é um operador ternário?
O operador ternário é um cara bastante simples e serve basicamente para validar uma operação “if / else” que vai retornar um valor booleano (true ou false).
O nome “ternário” vem do fato de o operador possuir três partes, que são separadas pelos caracteres “?” e “:“, como no exemplo abaixo:
algumaCondicao ? valorCasoSejaVerdadeira : valorCasoSejaFalsa;
Isso pode substituir por exemplo, uma condição de if / else parecida com essa:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if(algumaCondicao) | |
| return valorCasoSejaVerdadeira; | |
| else | |
| return valorCasoSejaFalsa; |
Olha só quantas linhas nós economizamos! 😀
Legal, entendi! Quero mais exemplos!
Estou utilizando JavaScript para realizar os exemplos, pois é uma linguagem deveras dinâmica, onde podemos considerar que zero, null, undefined, NaN e acreditem, inclusive o próprio false, podem assumir o valor “false“. Como vocês podem ver a seguir:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let a = new Boolean([].length); | |
| let b = new Boolean(0); | |
| let c = new Boolean(false); | |
| let d = new Boolean(null); | |
| let e = new Boolean(undefined); | |
| let f = new Boolean(NaN); | |
| console.log(a, b, c, d, e, f); | |
| //[Boolean: false] [Boolean: false] [Boolean: false] [Boolean: false] [Boolean: false] [Boolean: false] |
Podemos simplificar por exemplo a situação a seguir, onde preciso verificar se tem itens em uma lista:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let listaQualquer = [ | |
| 'Item 001', | |
| 'Item 002', | |
| 'Item 003', | |
| 'Item 004' | |
| ]; | |
| let temCoisas; | |
| if (listaQualquer.length > 0) | |
| temCoisas = true; | |
| else | |
| temCoisas = false; |
Podemos utilizar o operador ternário para fazer o seguinte:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let listaQualquer = [ | |
| 'Item 001', | |
| 'Item 002', | |
| 'Item 003', | |
| 'Item 004' | |
| ]; | |
| let temCoisas = listaQualquer.length > 0 ? true : false; |
Já diminuímos o código para apenas 1 linha, e vejam só, podemos deixá-lo ainda mais elegante, e de várias formas diferentes:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let listaQualquer = [ | |
| 'Item 001', | |
| 'Item 002', | |
| 'Item 003', | |
| 'Item 004' | |
| ]; | |
| //Atual | |
| let temCoisas = listaQualquer.length > 0 ? true : false; | |
| //Como o resultado disso retorna 'true' ou 'false' e é isso que eu preciso… | |
| //Nesse caso, utilizar o operador ternário não é necessário 🙂 | |
| let temCoisas = listaQualquer.length > 0; | |
| //Ou melhor ainda… | |
| //Lembram que o JS pode assumir o Zero como false? | |
| //Então qualquer número diferente disso, é true! | |
| //Se não tiver nada (zero) o temCoisas pode assumir 'false' | |
| //E se tiver, vai assumir 'true' | |
| let temCoisas = listaQualquer.length; |
Simples né?
Espero que tenham gostado, e para os que ainda não utilizam, que comecem a desfrutar das vantagens do operador ternário e da magia do JavaScript rsrs.
Caso tenham alguma sugestão de dicas rápidas, mandem por favor! Vou adorar recebê-las!
Por hoje é só, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀
Vinícius Mussak 