Melhor maneira de fazer if em uma linha com JavaScript

Neste artigo você vai aprender quais as melhores maneiras de criar um if em uma linha com JavaScript, utilizando algumas abordagens

Pra fazer um if em uma linha no JavaScript, a forma canônica é o operador ternário: condição ? expressão1 : expressão2, que devolve a expressão1 quando a condição é verdadeira e a expressão2 quando é falsa. Se você só precisa disparar uma ação, dá pra usar os operadores lógicos com short-circuit: condição && ação (roda quando a condição é verdadeira) e condição || ação (roda quando a da esquerda é falsa). E quando o objetivo é usar um valor padrão só se algo for null ou undefined, o operador de coalescência nula ?? é a escolha certa, melhor que o || porque não atropela valores válidos como 0 ou string vazia

Fala programador(a), beleza? Bora aprender mais sobre if em JavaScript!

Em JavaScript, é comum precisarmos escrever condicionais simples para decidir qual código deve ser executado em determinadas situações.

Uma forma comum de se fazer isso é usando a estrutura de controle “if-else”. No entanto, às vezes é desejável escrever essas condicionais de maneira mais concisa, em uma única linha.

Neste artigo, vamos explorar algumas maneiras de fazer isso.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Operador ternário

Uma forma comum de escrever condicionais em uma única linha é usando o operador ternário.

Ele é representado por “?:” e funciona da seguinte maneira:

condição ? expressão1 : expressão2

Se a condição for verdadeira, a expressão1 será avaliada e seu resultado será o valor final.

Se a condição for falsa, a expressão2 será avaliada e seu resultado será o valor final. Um exemplo de uso seria:

let idade = 25;
console.log(idade >= 18 ? "Maior de idade" : "Menor de idade");
// imprime "Maior de idade"

Utilizando if com operador de atribuição

Outra forma é utilizando a atribuição condicional, essa é bem similar à lógica do operador ternário, mas aqui é utilizado diretamente no operador de atribuição(=), e a condição é determinada dentro do if.

let idade = 25;
let status = (if (idade >= 18) ? "Maior de idade" : "Menor de idade");
console.log(status);
// imprime "Maior de idade"

Utilizando operadores lógicos

Os operadores lógicos também podem ser utilizados para escrever condicionais em uma única linha.

Por exemplo, o operador “&&” avalia duas expressões e retorna “verdadeiro” se ambas forem verdadeiras.

Podemos usá-lo para garantir que uma determinada condição é verdadeira antes de executar uma determinada ação:

let idade = 25;
(idade >= 18) && console.log("Maior de idade"); 
// imprime "Maior de idade"

Da mesma forma o operador “||” é utilizado para retornar verdadeiro quando uma das expressões é verdadeira

let idade = 25;
(idade < 18) || console.log("Maior de idade"); 
// imprime "Maior de idade"

É importante notar que, em todos os casos acima, as condicionais estão sendo escritas em uma única linha, mas isso não significa necessariamente que o código esteja mais fácil de ler ou entender.

Dependendo do caso, pode ser mais legível escrever as condicionais usando a sintaxe tradicional “if-else” mesmo que ocupem mais linhas.

A escolha de como escrever as condicionais deve ser baseada na legibilidade e manutenabilidade do código.

Além disso, é importante ter em mente que esses exemplos são para condições simples e que se a condição for muito grande, ainda é recomendado utilizar a estrutura de if-else tradicional, para facilitar a manutenção e entendimento do código.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

E chegamos ao fim do artigo sobre a melhor maneira de fazer um if em uma linha com JavaScript!

Para concluir, é importante lembrar que escrever condicionais em uma única linha é possível usando o operador ternário, a atribuição condicional e operadores lógicos, mas essa prática deve ser avaliada com base na legibilidade e manutenabilidade do código.

Embora possa ser atraente escrever código mais conciso, a legibilidade deve ser prioridade quando se trata de manutenção e desenvolvimento de software.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Nova seção ‘Operador de coalescência nula (??)’ mostrando como cair num valor padrão em uma linha só quando algo é null ou undefined. Exemplo: let nome = usuario.nome ?? "Visitante"; e a explicação de que ele difere do || porque o || dispara o fallback pra qualquer valor falsy (0, string vazia, false, NaN), enquanto o ?? só entra em null ou undefined. Deixar claro que ele é melhor que o || quando 0 ou string vazia são valores válidos

Uma seção de FAQ (com as perguntas e respostas do campo geo.faq) usando cada pergunta como subtítulo

Uma linha explicando que o ternário é o único operador do JavaScript que trabalha com três operandos (condição, valor se verdadeiro, valor se falso), por isso o nome ternário

Uma coisa que vale o teste na prática: abre o console do navegador e cola cada um desses jeitos. O ternário e os operadores lógicos rodam de boa, mas aquele exemplo antigo de if dentro da atribuição devolve SyntaxError na hora, porque o if é instrução e não expressão, então ele não pode viver dentro de um let status = (…). Bora ver na prática? faça o teste com idade >= 18 e vai ficar claro quais formas o motor do JavaScript realmente aceita