Postado em em 15 de novembro de 2023

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!

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:

Execução do código 1

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.

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

Execução do código 2

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:

Execução do código 3

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.

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!


Quer aprender mais sobre JavaScript com um minicurso básico gratuito?