If inline no JavaScript: como usar o operador ternário na prática

Neste artigo você vai aprender a como fazer um if inline com JavaScript, o também conhecido por operador ternário

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

O operador ternário é um if que acontece em uma linha

Podemos adicionar a variação do if com um else, no mesmo operador

Isso torna o código mais resumido, sacrificando um pouco também a sua legibilidade

Então tenha cuidado com isso, resumir nem sempre é a melhor opção

A sintaxe é a seguinte:

const x = 10;
const y = 2;

const z = (x > y) ? console.log("X > Y") : console.log("Y > X")

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

Primeiramente criamos duas variáveis para poder realizar a condição

Na variável z inserimos o if inline, que é o operador ternário

• (x > y) – O primeiro bloco é a condição, onde fazemos a verificação necessária;
• ? – A interrogação é seguida do que vai acontecer se a condição for verdadeira;
• : – os dois pontos mostra o que acontece se for falsa, é o else;

Então temos a seguinte estrutura nos if inline:

condicional ? se for verdadeiro execute isto : se não isto

Agora basta trocar a condicional e as demais instruções para o que você quer que aconteça

Lembre-se que para fazer um if sem else, basta tirar tudo após os dois pontos

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

Conclusão

Neste artigo você viu como criar um if inline com JavaScript

Utilizamos uma estrutura, que é chamada de operador ternário

Este é o nome técnico que você verá em literaturas de programação

Deseja programar de forma profissional? 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!

Uma seção nova tipo ‘Usando o if inline para atribuir valor a uma variável:’ mostrando o uso mais comum de verdade, que é guardar o resultado dentro da variável em vez de só imprimir. Algo como:

const idade = 20 const status = (idade >= 18) ? "maior de idade" : "menor de idade" console.log(status)

E explicando: repara que aqui o ternário não fica só rodando um console.log, ele DEVOLVE um valor e joga dentro de status

esse é o cenário que tu mais vai usar no dia a dia

Um exemplo curto em código do if inline SEM else, já que o texto cita mas não mostra. Tipo:

const nota = 7 const resultado = (nota >= 6) ? "aprovado" : nota

seguido de um aviso: se liga que o ternário SEMPRE precisa dos dois lados pra funcionar

um if inline ‘sem else’ de verdade, tipo o if tradicional que só roda algo quando é verdadeiro, o ternário não faz

se tu só quer executar uma coisa quando a condição é true e nada quando é false, o if normal continua sendo o caminho

Uma seção ‘Dá pra usar mais de uma condição no if inline?’ mostrando o ternário aninhado, que é dúvida frequente de quem passou do básico:

const nota = 8 const conceito = (nota >= 9) ? "A" : (nota >= 7) ? "B" : "C"

e o alerta honesto: dá pra encadear vários ternários assim, porém isso vira uma bomba de ilegibilidade rápido

na prática, mais de dois ou três aninhados e é melhor voltar pro if tradicional, teu eu do futuro agradece

Um mini FAQ com duas perguntas que casam com a intenção de busca:

Qual a diferença entre if inline e if tradicional? O ternário resolve a condição em uma linha e DEVOLVE um valor, ideal pra atribuir a uma variável

o if tradicional é mais verboso, mas aguenta várias linhas de lógica dentro de cada bloco e lê melhor quando a regra é complexa

Operador ternário e if inline são a mesma coisa? São sim, ‘if inline’ é o apelido informal e ‘operador ternário’ é o nome técnico que tu acha na documentação