O que é if em JavaScript? Aprendendo a usar if e if else em JS

Se você está começando em JavaScript, ou mesmo se já manja dos paranauês, uma coisa é certa: mais cedo ou mais tarde você vai precisar tomar decisões de código. E pra isso, temos nosso querido if.

Sim, o famoso "se isso acontecer, faça aquilo". Ele é simples, direto e poderoso. A base do raciocínio condicional em qualquer linguagem.

Neste artigo, vamos entender o que é o if, como ele funciona no JavaScript, ver exemplos práticos e até explorar outras formas de fazer escolhas no seu código. 

Tudo isso com explicações claras, exemplos de verdade e, claro, aquele toque de humor pra deixar tudo mais leve.

Então se ajeita aí na cadeira, separa o café ou o chá, e bora entender de uma vez por todas como o `if` funciona por trás dos panos.

No final do artigo, você ainda encontra links e exemplos prontos para praticar.

Partiu? Então vambora!

O que é if em JavaScript?

O if em JavaScript é uma estrutura de controle de fluxo. Isso significa que ele permite que o código tome caminhos diferentes, dependendo de uma condição.

Na prática: você faz uma pergunta (a tal da condição) e se a resposta for verdadeira (ou seja, true), ele executa um bloco de código. Se for falsa (false), ele ignora e segue o baile.

Pensa assim:

"Se o guerreiro estiver com mais de 80 de energia, ele pode atacar. Senão... melhor descansar um pouco."

É isso que o if faz. Ele ajuda o seu programa a tomar decisões com base nos dados que ele tem naquele momento.

E o mais legal? Ele é super flexível — você pode combinar, encadear, inverter, e até substituir, como vamos ver mais pra frente.

Mas antes de inventar moda, bora olhar como ele funciona de verdade.

Sintaxe da estrutura if

Antes de começarmos a brincar com várias condições e ramificações, a gente precisa dominar o básico: como se escreve um if?

A boa notícia é que a estrutura é simples, direta e não tem mistério:

js
if (condicao) {
  // código executado se a condição for verdadeira
}

A lógica aqui é bem parecida com uma conversa do dia a dia: “se o guerreiro tiver energia suficiente, ele vai pra batalha”. Traduzindo pro código:

js
const energia = 90
if (energia > 80) {
  console.log('O guerreiro está pronto para o combate!')
}

Se a condição dentro dos parênteses for verdadeira (`energia > 80`), o bloco de código entre as chaves é executado. Se não for… nada acontece. Ele simplesmente pula esse trecho.

Estrutura if-else

Agora, se você quiser fazer uma coisa quando a condição for verdadeira e outra quando for falsa, aí entra o else na jogada.

js
if (condicao) {
  // verdadeiro
} else {
  // falso
}

Exemplo:

js
const energia = 50
if (energia > 80) {
  console.log('O guerreiro está pronto para o combate!')
} else {
  console.log('Melhor descansar um pouco...')
}

Aqui o guerreiro está meio cansado, então o código entra no else e recomenda uma pausa estratégica.

Uso do else if

E quando temos mais de uma possibilidade? Aí usamos o else if pra criar várias bifurcações no caminho:

js
const energia = 65
if (energia > 80) {
  console.log('Pronto para o combate!')
} else if (energia > 60) {
  console.log('Talvez dê pra uma luta rápida.')
} else {
  console.log('Melhor não arriscar hoje.')
}

O JavaScript vai testando de cima para baixo. Assim que encontrar uma condição verdadeira, ele executa aquele bloco e ignora o resto.

O que são operadores de comparação e operadores lógicos?

Show! Já conseguimos escrever um `if`, testar mais de uma condição com `else if`, e ainda ter um plano B com o `else`.

Mas... o que exatamente a gente coloca dentro dos parênteses do if?

É aqui que entram os operadores de comparação e os operadores lógicos — os verdadeiros responsáveis por dizer se algo é true ou false.

Sem eles, o `if` fica sem saber o que decidir. É tipo um guerreiro sem espada: não tem como lutar.

Para que sevem os operadores de comparação?

Os operadores de comparação são usados para comparar dois valores e retornar um resultado booleano (verdadeiro ou falso). Olha alguns dos mais usados:

* `==` → igual solto (compara os valores, mas ignora o tipo)

* `===` → igual estrito (compara valor e tipo)

* `!==` → diferente estrito

* `>` → maior que

* `<` → menor que

* `>=` → maior ou igual

* `<=` → menor ou igual

Exemplos pra ver na prática:

js
5 == '5'     // true (compara só o valor)
5 === '5'    // false (tipos diferentes: número e string)
10 != '10'   // false
10 !== '10'  // true
7 > 3        // true
4 <= 4       // true

**cuidado com o `==`**

O `==` parece amigo, mas pode causar umas surpresas por fazer conversões automáticas de tipo (chamadas de coerção). 

Já o `===` é mais chato, mas muito mais seguro, porque só retorna true quando o valor e o tipo batem.

Então, na dúvida (ou sempre que possível), prefira usar o `===`. É mais previsível e evita bugs esquisitos no futuro.

E os operadores lógicos? Para que eles servem?

Agora, às vezes a gente precisa combinar mais de uma condição dentro do mesmo if. Para isso, usamos os operadores lógicos:

* `&&` → E (as duas condições precisam ser verdadeiras)

* `||` → OU (basta uma condição ser verdadeira)

* `!` → NÃO (inverte o valor: true vira false, e vice-versa)

Olha um exemplo usando `&&`:

js
const energia = 90
const temEspada = true
if (energia > 80 && temEspada) {
  console.log('O guerreiro está pronto e armado!')
}

E com `||`:

js
const temEspada = false
const temArco = true
if (temEspada || temArco) {
  console.log('O guerreiro tem pelo menos uma arma!')
}

E claro, o `!` pra negar uma condição:

js
const estaCansado = true
if (!estaCansado) {
  console.log('Partiu batalha!')
} else {
  console.log('Melhor tirar um cochilo...')
}

Esses operadores deixam nosso código mais expressivo e ajudam a lidar com decisões mais complexas, sem precisar empilhar vários ifs um dentro do outro.

Truthy e Falsy

Antes de partir pros exemplos práticos, tem uma parada muito importante que a gente precisa entender: nem tudo em JavaScript é só true ou false no sentido literal. 

Às vezes, você coloca um valor qualquer dentro do if, e ele se comporta como verdadeiro ou falso. Como assim?

É aí que entram os conceitos de falsy e truthy.

O que é o Falsy?

Valores que o JavaScript considera como falsos numa estrutura condicional, mesmo que não sejam o false literal. São eles:

• `false`
• `0`
• `''` (string vazia)
• `null`
• `undefined`
• `NaN`

Ou seja:

js
if (0) {
  console.log('Isso nunca será exibido')
}

O número zero é falsy. Então o bloco não roda.

O que é Truthy

Todo o resto! Qualquer valor que não esteja na lista acima é considerado verdadeiro (truthy). Exemplos:

• `true`
• `'Hello'`
• `42`
• `[]` (array vazio)
• `{}` (objeto vazio)

Vejamos um exemplo disso:

js
if ('vinny') {
  console.log('Isso aqui será exibido, porque a string não está vazia')
}

Mesmo que você não esteja comparando nada, o JavaScript avalia o valor dentro do if e decide se entra no bloco ou não.

Essa flexibilidade é ótima, mas pode causar umas pegadinhas se você não estiver prestando a atenção. 

Então, sempre que possível, prefira comparações explícitas, principalmente quando estiver começando.

Exemplo:

js
// Menos claro
if (nome) {
  // ...
}
// Mais claro
if (nome !== '') {
  // ...
}

O que é If ternário?

Beleza, já estamos mandando bem com o if, else, operadores e tudo mais.

Mas e quando a gente quer tomar uma decisão simples e rápida, tipo só escolher entre dois valores? Tem uma forma mais curta pra isso.

Entra em cena o operador ternário — o famoso if de uma linha só.

A estrutura é essa:

js
condicao ? valorSeVerdadeiro : valorSeFalso

É tipo fazer uma pergunta e já responder direto com duas opções. Um exemplo pra clarear:

js
const energia = 90
const mensagem = energia > 80 ? 'Pronto pro combate!' : 'Melhor descansar...'
console.log(mensagem)

Se a condição `energia > 80` for verdadeira, a variável `mensagem` recebe `'Pronto pro combate!'`.

Se for falsa, recebe `'Melhor descansar...'`. Simples, direto e elegante.

Quando usar o Ternário?

O ternário é ótimo quando você precisa escolher entre dois valores, principalmente dentro de uma atribuição. 

Mas se a lógica começar a ficar complexa ou envolver várias condições, é melhor usar o if tradicional mesmo.

Evite coisas assim:

js
// Não faça isso
const status =
  nivel === 'admin' ? 'Acesso total' :
  nivel === 'editor' ? 'Acesso limitado à edição' :
  nivel === 'leitor' ? 'Apenas leitura' :
  'Sem acesso'

Fica difícil de ler, entender e manter. E lembre-se: código limpo vale mais que código curto.

Exemplos práticos do uso do if em JavaScript

Agora que a gente já entendeu a teoria, viu a sintaxe, operadores, o tal do ternário e até aqueles valores meio traiçoeiros como '' e undefined...

Tá na hora de ver tudo isso em ação. Bora para a prática!

Verificando se um número é positivo:

js
const numero = 7
if (numero > 0) {
  console.log('O número é positivo!')
}

Se `numero` for maior que zero, a mensagem aparece. Se não, nada acontece. Verificando se a pessoa pode dirigir:

js
const idade = 17
if (idade >= 18) {
  console.log('Pode tirar a carta!')
} else {
  console.log('Ainda não pode dirigir.')
}

Clássico. Se a pessoa tiver 18 anos ou mais, pode dirigir. Se não, paciência. Escolhendo uma mensagem com ternário:

js
const logado = false
const mensagem = logado
  ? 'Bem-vindo de volta!'
  : 'Faça login para continuar'
console.log(mensagem)

Aqui usamos o operador ternário para deixar o código bem enxuto. Combinando múltiplas condições:

js
const energia = 75
const temEspada = true
if (energia > 70 && temEspada) {
  console.log('O guerreiro está pronto para a batalha!')
} else {
  console.log('Melhor não arriscar...')
}

Essa é a típica situação onde o `if` brilha: avaliando mais de uma coisa ao mesmo tempo.

Lidando com valores "falsy":

js
const nome = ''
if (!nome) {
  console.log('Por favor, preencha seu nome.')
}

Como a `string` vazia é um valor `falsy`, o `if` entra direto e exibe a mensagem.

Com esses exemplos, já dá pra ter uma boa noção de como o if aparece em várias situações do dia a dia. Desde validações simples até lógicas de negócio mais robustas.

Boas práticas ao usar if em JavaScript

Agora que já estamos usando o if com confiança, vale aquela pausa rápida para pensar em como a gente escreve esses blocos no dia a dia.

Porque sim, dá pra escrever um if que funciona… e ainda assim deixar o código confuso pra quem for ler depois (inclusive você no futuro).

Aqui vão algumas boas práticas que fazem diferença de verdade:

1. Use comparações explícitas:

Evite confiar cegamente em valores truthy ou falsy se isso pode gerar dúvida.

js
// Menos claro
if (user) { ... }
// Mais claro
if (user !== undefined && user !== null) { ... }

Ou ainda melhor, dependendo do contexto:

js
if (user?.name) { ... }

2. Evite if desencessário:

Se você já tem um valor booleano, não precisa comparar com true ou false:

js
// Redundante
if (ativo === true) { ... }
// Melhor
if (ativo) { ... }

3. Evite aninhamento de ifs:

Vários if um dentro do outro deixam o código difícil de ler. Sempre que possível, retorne cedo ou use else if.

js
// Ruim
if (usuario) {
  if (usuario.ativo) {
    console.log('Mostrar dashboard')
  }
}
// Melhor
if (!usuario) return
if (!usuario.ativo) return
console.log('Mostrar dashboard')

4. Use ternário só quando for simples:

A gente ama o ternário, mas só quando ele cabe em uma linha e faz sentido:

js
// Ok
const status = logado ? 'Online' : 'Offline'
// Evite
const status = cond1 ? val1 : cond2 ? val2 : cond3 ? val3 : valPadrao

Esse último aí parece uma charada, não código :) .

5. Nomes de variáveis que ajudam na leitura:

Quando a condição é muito complexa, vale extrair para uma variável com um nome descritivo:

js
const podeAtacar = energia > 80 && temEspada && !estaCansado
if (podeAtacar) {
  console.log('Ataque liberado!')
}

Fica muito mais fácil entender o que tá rolando.

No fim das contas, a ideia é simples: escreva o if como se estivesse explicando a lógica pra alguém.

Alguém que talvez nunca tenha visto esse código antes — e esse alguém pode ser você mesmo daqui a 2 semanas.

Alternativas ao `if`

Beleza. O if é super versátil, resolve muita coisa… mas nem sempre é a melhor opção.

Em algumas situações, existem alternativas que deixam o código mais limpo, mais fácil de manter e até mais performático (dependendo do caso). Vamos ver as principais?

Quando usar o `switch`?

Se você tem várias comparações baseadas no mesmo valor, o switch pode ser uma opção mais organizada do que uma sequência de if-else if-else.

Exemplo clássico:

js
const classe = 'guerreiro'
switch (classe) {
  case 'guerreira':
    console.log('Força e honra!')
    break
  case 'arqueira':
    console.log('Foco e precisão!')
    break
  case 'maga':
    console.log('Sabedoria é poder!')
    break
  default:
    console.log('Classe desconhecida...')
}

Aqui, o switch testa o valor de classe e escolhe o bloco correspondente. Bem mais legível do que fazer:

js
if (classe === 'guerreiro') { ... }
else if (classe === 'arqueiro') { ... }
else if (classe === 'mago') { ... }

Claro, isso depende do contexto. Se as ações forem muito curtas ou simples, talvez o if ainda seja melhor.

Lookup Table Pattern

Agora vem uma alternativa pouco usada por quem está começando, mas que pode deixar o código bem elegante: o famoso Lookup Table.

A ideia é simples: transformar decisões em um objeto que mapeia chaves para funções ou valores.

Exemplo:

js
const acoesPorClasse = {
  guerreira: () => console.log('Força e honra!'),
  arqueira: () => console.log('Foco e precisão!'),
  maga: () => console.log('Sabedoria é poder!')
}
const classe = 'arqueira'
const acao = acoesPorClasse[classe]
if (acao) {
  acao()
} else {
  console.log('Classe desconhecida...')
}

Aqui você elimina o if e o switch completamente — e ainda ganha flexibilidade.

Esse padrão é muito útil quando as opções são dinâmicas, vêm de uma API, ou precisam ser mantidas de forma mais modular.

Bônus: objetos como Lookup de valores

Nem sempre você precisa executar uma função. Às vezes só quer retornar um texto ou valor baseado em uma chave. Também dá pra fazer com objetos:

js
const mensagens = {
  guerreira: 'Força e honra!',
  arqueira: 'Foco e precisão!',
  maga: 'Sabedoria é poder!'
}
const classe = 'maga'
console.log(mensagens[classe] || 'Classe desconhecida...')

Mais direto, impossível.

Conclusão

Chegamos ao fim dessa jornada pelo universo do `if` — e olha quanta coisa cabe dentro de um simples "se isso, então aquilo".

A gente começou com a estrutura básica, passou pelos operadores, entendeu o que é `truthy` e `falsy`, deu uma olhada no ternário, viu boas práticas e ainda explorou alternativas como `switch` e o famigerado lookup table.

Tudo isso pra mostrar que, mesmo sendo uma das primeiras coisas que a gente aprende em JavaScript, o `if` ainda tem muita lenha pra queimar.

Sério, nunca subestime o básico. Se tem uma coisa que aprendi nos últimos anos foi isso: dominar bem o arroz com feijão é o que te salva nos dias mais caóticos. 

E entender como tomar decisões no código — de forma clara, limpa e consciente — é parte essencial disso.

Então se curtiu, compartilha com alguém que tá começando ou que precisa dar aquela reciclada no raciocínio condicional. 

Tamo junto, e até a próxima!

Um grande abraço do seu careca barbudo favorito o/