Artigos JavaScript JavaScript: if...else

As estruturas condicionais if e else permitem definir fluxos diferentes de execução a partir de determinadas condições definidas.

Guia do artigo:

Visão geral

A estrutura condicional permite avaliar uma condição e, a partir dela, executar diferentes linhas de código. Considerando o seguinte código:

let nomeUsuario = 'Eduardo'
let mensagem = ''

if (nomeUsuario === 'Eduardo') {
  mensagem = 'Nome igual'
} else {
  mensagem = 'Nome diferente'
}

O valor atribuído à variável mensagem será: 'Nome igual'. A Figura 1 demonstra o que ocorre com a execução do código quando é declarada uma estrutura de condição.

ifelse
Figura 1. Estrutura condicional if.

Sintaxe

if (condicao-1)
  expressao
else if (condicao-2)
  expressao
else
  expressao

Como funciona?

if (condicao) {
  // bloco de código
}

Condição é a estrutura de condição a ser verificada para decidir se as linhas do bloco de código serão executadas ou não.

Essa é a sintaxe básica de uma estrutura condicional, normalmente utilizada quando há apenas uma condição a ser avaliada. Caso haja mais uma condição, deve-se utilizar a opção abaixo:

if (condicao) {
  // bloco de código 1
} else {
  // bloco de código 2
}

Caso a condição seja falsa, o bloco de código 1 não deve ser executado, mas o bloco de código 2 sim.

Caso existam três ou mais condições, uma opção é utilizar a estrutura:

if (condicao 1) {
  // bloco de código 1
} else if (condicao 2) {
  // bloco de código 2
} else {
  // bloco de código 3
}

Não existe limite para o número de condições declaradas com a estrutura else if (condicao n).

Na prática

Exemplo 1: estrutura condicional simples

No exemplo a seguir demonstramos como programar uma estrutura condicional simples, com apenas uma condição:

let semaforo = 'verde'

if (semaforo === 'verde') {
  console.log('Pode passar')
  // Pode passar
}

O valor impresso no console é: 'Pode passar'.

Exemplo 2: estrutura condicional que avalia uma condição

No exemplo a seguir demonstramos como programar uma estrutura condicional que avalia uma condição e também indica o que deve ser feito caso essa condição seja falsa:

var semaforo = 'vermelho'

if (semaforo === 'verde') {
  console.log('Pode passar')
} else {
  console.log('Pare')
}

O valor impresso no console é: 'Pare'. Para isso foi executado o bloco de código declarado dentro do else.

Exemplo 3: estrutura condicional if com else

No exemplo a seguir demonstramos como programar uma estrutura condicional que avalia duas condições:

let semaforo = 'vermelho'

if (semaforo === 'verde') {
  console.log('Pode passar')
} else if (semaforo === 'vermelho') {
  console.log('Pare')
} else {
  console.log('Atenção')
}

O valor impresso no console é: 'Pare'. Para isso foi executado o bloco de código declarado dentro do else if.

Exemplo 4: Mensagens conforme o peso informado

No exemplo a seguir demonstramos como apresentar mensagens conforme o peso informado no sistema:

let peso = 26.3
let status = ""

if (peso < 20.7) {
  status = 'Abaixo do peso'
} else if (peso >= 20.7 && peso < 26.4) {
  status = 'Peso normal'
} else if (peso >= 26.4 && peso < 27.8) {
  status = 'Pouco acima do peso'
} else if (peso >= 27.8 && peso < 31.1) {
  status = 'Acima do peso'
} else {
  status = 'Obeso'
}

console.log(status)

O valor atribuído a status é: 'Peso normal'. Como existem vários condicionais a serem verificados, note que foram programadas estruturas de decisão com if (condicao), else if (condicao) e else.

Exemplo 5: verificar as informações de username e password

No exemplo a seguir demonstramos como verificar as informações de username e password do usuário em uma estrutura condicional:

let username = 'usuario123'
let password = '123456'
  
if (username === 'usuario123' && password == '123456') {
  console.log('Usuário autenticado')
} else {
  console.log('Login e/ou senha incorretos')
}

O valor impresso no console é: 'Usuário autenticado'.

Compatibilidade

Engine Versão Minima
Node.JS ( V8) 6.4.0
Safari ( WebKit) 11.1
Chrome ( V8) 68
Microsoft Edge ( ChakraCore) 17
Firefox ( Gecko) 61

Nota: O Opera utiliza atualmente grande parte do código do Chrome como base para o seu próprio desenvolvimento e por isso ele não é mencionado nesta listagem.

Confira também

Introdução ao JavaScript

Introdução ao JavaScript

Curso
O que é jQuery?

O que é jQuery?

Curso
Evolução do JavaScript

Evolução do JavaScript

Vídeo