Operador Ternário JavaScript – Torne Seu Código Mais Legível

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!

O que você aprende neste vídeo

Resposta rápida: A aula reescreve um if/else de uma única condição com o operador ternário e mostra onde ele de fato encurta o código: quando o resultado é atribuído a uma variável numa só expressão. Você aprende a encadear ternários para duas condições e vê por que, a partir de três, o if/else volta a ser a escolha mais legível.

Neste vídeo (20 min):

• 0:45 - O ponto de partida: um if/else em que cada bloco tem uma única instrução console.log
• 1:15 - O exemplo da gratuidade no ônibus: quem tem idade >= 65 recebe uma mensagem e os demais recebem outra
• 3:25 - Começar o ternário pela condição do if, seguida do ?, que funciona como a pergunta
• 4:05 - A sintaxe completa, condicao ? seVerdadeiro : seFalso, e o VS Code quebrando a linha longa ao salvar
• 5:10 - O ternário faz o mesmo que o if/else sem if, else nem chaves, mas com console.log nos dois lados o ganho é pequeno
• 5:55 - Refatorar o if/else para guardar a mensagem numa variável declarada com let e imprimir uma vez só no final
• 8:40 - Atribuir o resultado do ternário direto à variável: uma única operação, mesmo quebrada em várias linhas
• 10:10 - Onde o ternário aparece no dia a dia, em código de outras pessoas e de bibliotecas, e o teste com idade 68
• 11:10 - Duas condições numa pirâmide etária (jovem, adulto, idoso): o segundo ternário entra no lugar do resultado falso do primeiro
• 14:30 - Quatro faixas, de criança a idoso, encadeando três ternários com idade < 12, idade <= 17 e idade <= 60
• 16:10 - Código verboso: por que a cadeia de ternários não fica mais simples nem mais legível que o if/else equivalente
• 18:05 - Regra prática: ternário para uma condição, aceitável com duas, e if/else a partir de três

Trechos do vídeo:

• O operador ternário avalia uma única condição e devolve um valor para o caso verdadeiro, escrito depois do ?, e outro para o caso falso, depois dos :, fazendo o mesmo que um if/else sem chaves
• O ternário rende mais numa atribuição: em vez de atualizar a variável dentro de cada bloco do if/else, uma única expressão decide o valor e o guarda
• Para lidar com mais de uma condição, o ternário se aninha: a condição seguinte ocupa o lugar do resultado falso da anterior
• Com três ou mais condições encadeadas, o ternário fica tão verboso quanto o if/else e perde a vantagem de legibilidade que justificava o uso
• Mesmo quem prefere o if/else precisa ler ternários, porque eles são frequentes em código de outras pessoas e em bibliotecas importadas nos projetos

O operador ternário em JavaScript é uma forma compacta de escrever um if-else em uma única linha, com a sintaxe condição ? valorSeVerdadeiro : valorSeFalso. Ele avalia a condição e devolve o primeiro valor quando ela é verdadeira ou o segundo quando é falsa, deixando atribuições e retornos simples muito mais enxutos e legíveis.

Operador Ternário JavaScript – Torne Seu Código Mais Legível

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.

Apresentando o Código Inicial

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?

Operador Ternário JavaScript – Como Melhorar a Legibilidade do Código em JavaScript

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.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

A sintaxe do operador ternário JavaScript é a seguinte:

condição ? expressão_se_verdadeira : expressão_se_falsa

Dessa 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.

Atualizando o Valor de uma Variável – Operador Ternário

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

Operador Ternário JavaScript com 2 Condições

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.

Operador Ternário JavaScript com 3 Condições

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.

Perguntas frequentes

Conclusão – Operador Ternário JavaScript

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.

Quer aprender mais técnicas que tornem seus códigos mais eficientes e fáceis de entender? Inscreva-se no nosso Curso de JavaScript e aprimore suas habilidades de desenvolvimento com as melhores práticas!

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!