Compreenda o que é um operador ternário JavaScript, um importante recurso que tem o objetivo de melhorar a legibilidade do seu código.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Na aula de hoje, quero te apresentar o Operador Ternário JavaScript! Esses operadores têm como objetivo aprimorar a legibilidade do seu código e deixá-lo mais conciso.
Vamos entender o que é o operador ternário em JavaScript e como utilizá-lo com três exemplos práticos. Assim, você poderá aprender a aprimorar seus códigos, tornando-os ainda mais legíveis e enxutos com essa ferramenta.
Para demonstrar como é possível aprimorar um código utilizando operadores ternários em JavaScript, vamos considerar o exemplo abaixo:
const idadeUsuario = 23;
if (idadeUsuario >= 65) {
console.log("Você tem direito de usufruir da gratuidade do serviço. ");
} else {
console.log(
"Apenas pessoas com 65 anos ou mais possuem direito à gratuidade do serviço."
);
}Esse é um código simples em que verificamos o valor da variável idadeUsuario por meio de uma estrutura condicional if-else.
Se o valor for maior ou igual a 65, o código executará o bloco de código dentro do if e imprimirá a mensagem correspondente. Caso contrário, ele executará o bloco de código dentro do else e imprimirá a segunda mensagem no terminal.
Ao executarmos o código com a variável idadeUsuario configurada com o valor de 23, obteremos a seguinte resposta:
Como observado, o código funciona corretamente. No entanto, como poderíamos utilizar o operador ternário em JavaScript para otimizá-lo?
Podemos simplificar e tornar mais legível nosso código utilizando o operador ternário. Veja como ficaria:
idadeUsuario >= 65
? console.log("Você tem direito de usufruir da gratuidade do serviço. ")
: console.log(
"Apenas pessoas com 65 anos ou mais possuem direito à gratuidade do serviço."
);Nessa versão, empregamos o operador ternário para atribuir diretamente a mensagem com base na condição. Isso torna o código mais conciso e fácil de entender, especialmente em situações mais simples como essa.
A sintaxe do operador ternário JavaScript é a seguinte:
condição ? expressão_se_verdadeira : expressão_se_falsaDessa forma, o código avalia a condição (idadeUsuario >= 65) como verdadeira ou falsa e retorna a expressão correspondente para cada uma das situações.
Vamos ajustar nosso exemplo para que você possa perceber melhor a diferença ao aplicar ou não o operador ternário ao seu código.
Nesse caso, vou adicionar uma nova variável que será alterada de acordo com a condição analisada, e ao final, apenas imprimiremos no console o resultado.
const idadeUsuario = 23;
let textoConsole = '';
if (idadeUsuario >= 65) {
textoConsole = "Você tem direito de usufruir da gratuidade do serviço. ");
} else {
textoConsole =
"Apenas pessoas com 65 anos ou mais possuem direito à gratuidade do serviço."
}
console.log(textoConsole);Esse código faz exatamente o mesmo processo do código apresentado no início desta aula, com a diferença de que, desta vez, em vez de executar o console.log() dentro do if-else, estamos alterando o valor da variável textoConsole e imprimindo a mensagem correspondente no final.
Essa é um bom exemplo para mostrar como o operador ternário em JavaScript pode deixar este código mais limpo e enxuto.
textoConsole =
idadeUsuario >= 65
? "Você tem direito de usufruir da gratuidade do serviço."
: "Apenas pessoas com 65 anos ou mais possuem direito à gratuidade do serviço.";
console.log(textoConsole);Repare que, apesar de estar dividido em várias linhas de código, isso foi feito apenas para melhorar a visualização, mas toda essa expressão poderia ser escrita em uma única linha de código.
Ao executar esse código, obtemos o mesmo resultado, com um código muito mais limpo, sem a necessidade de utilizar if-else e ficar atualizando a variável dentro de cada bloco
Vamos analisar mais um exemplo, desta vez lidando com duas condições diferentes.
const idadeUsuario = 23;
if (idadeUsuario <=19) {
console.log("Essa pessoa se enquadra na faixa dos jovens. ");
} else if (idadeUsuario <= 60) {
console.log("Esse individuo é um adulto");
} else {
console.log("Temos aqui um indivíduo idoso. ");
}Nesse código, temos duas condições sendo analisadas: a primeira verifica se o usuário tem idade menor ou igual a 19, e a segunda se ele tem idade menor ou igual a 60. Ao executar o código com a variável idadeUsuario definida como 23, teremos como resultado:
Para simplificar esse código utilizando o operador ternário em JavaScript, mantendo a estrutura condicional original, podemos escrevê-lo da seguinte forma:
idadeUsuario <= 19
? console.log("Essa pessoa se enquadra na faixa dos jovens. ")
: idadeUsuario <= 60
? console.log("Esse individuo é um adulto")
: console.log("Temos aqui um indivíduo idoso. ");Observe que, ao usar o operador ternário para duas condições distintas, a estrutura geral foi mantida, porém, precisamos repeti-lo para a segunda condição.
A lógica permanece a mesma: verificamos uma condição; se ela for verdadeira, retornamos uma expressão; se for falsa, retornamos outra. A diferença está no fato de que a expressão correspondente quando a condição 1 é falsa é a condição 2.
Assim, verificamos a primeira condição e, se não for atendida, passamos para a segunda condição, que também terá uma expressão específica se verdadeira e outra se falsa.
Ao executar esse código, teremos o mesmo resultado que no código utilizando os blocos if-else.
Como você pode ter observado no exemplo anterior, há casos em que é necessário considerar se é válido ou não utilizar o operador ternário. Quanto mais condições tivermos, mais o uso dos operadores ternários se torna inviável.
Vamos ver um exemplo utilizando três condições distintas para que você possa visualizar melhor essa situação. Pegaremos um código semelhante ao exemplo anterior, mas adicionaremos uma nova condição.
const idadeUsuario = 23;
if (idadeUsuario <=12) {
console.log("É uma criança. ");
}else if (idadeUsuario <=17) {
console.log("Você é um adolescente. ");
} else if (idadeUsuario <= 60) {
console.log("Você é um adulto");
} else {
console.log("É um indivíduo idoso. ");
}Para escrevermos o mesmo código com operador ternário, ele ficaria assim:
idadeUsuario <= 12
? console.log("É uma criança. ")
: idadeUsuario <= 17
? console.log("Você é um adolescente. ")
: idadeUsuario <= 60
? console.log("Você é um adulto")
: console.log("É um indivíduo idoso. ");Observe que, nesse exemplo, o operador ternário não cumpre tão bem seu propósito de deixar o código mais simples, mais legível, mais conciso e mais claro. Ao comparar os dois códigos, com operador ternário e sem, não se percebe tanta diferença na escrita de ambos.
Ambos os códigos funcionarão da mesma forma, mas o código não fica mais claro com o uso do operador ternário.
A decisão de usar ou não o operador ternário em JavaScript variará de desenvolvedor para desenvolvedor. Eu recomendo utilizá-lo com até duas condições; mais do que isso, ele começa a perder seu propósito de tornar o código mais legível.
Nessa aula, você aprendeu sobre o operador ternário em JavaScript, compreendendo seu funcionamento e o propósito de utilizá-lo no código.
Os operadores ternários em JavaScript possibilitam que seus códigos se tornem mais claros, legíveis e concisos, aprimorando tanto o entendimento quanto a manutenção do código.
Entretanto, é crucial estar atento para não utilizar os operadores ternários em situações que não contribuirão para a clareza do código, o que poderia resultar em uma compreensão ainda mais confusa.
De toda forma, essa funcionalidade do JavaScript é bastante interessante, especialmente ao lidar com blocos de if-else. Utilizar o operador ternário pode ser uma escolha valiosa para melhorar a eficiência e a clareza de seu código nesses cenários.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador