Por que eu devo ler este artigo:

Este artigo apresenta a estrutura condicional if, nas formas if, if...else e if...else...if, bem como exemplos de código que demonstram como utilizá-la.

A estrutura condicional if permite ao JavaScript executar um trecho de código somente se uma determinada condição for verdadeira.

Ela pode ser escrita das seguintes formas:

  • Quando há mais de uma linha de código a ser executado devemos usar { e } para delimitar esse bloco de código:
    if ( condicao ) {
    // códigos que serão executados
    // códigos que serão executados
    // códigos que serão executados
    }
  • Quando há só uma linha de código para ser executado não precisamos usar { e }, fica opcional:
    if ( condicao)
    // código que vai ser executado;

    ou

    if ( condicao) // código que vai ser executado;

O código dentro da estrutura if só será executado se a condicao for verdadeira. Por exemplo:

var preco = 101;
if ( preco > 100 ) 
    console.log("Desconto liberado");

// vai imprimir "Desconto liberado"

Nesse exemplo, a instrução console.log("Desconto liberado") será executada somente se o valor da variável preco for maior que 100.

Repare que, dessa forma, se a condição for falsa a instrução console.log("Desconto liberado") será ignorada.

else

Existem casos em que precisamos executar um código caso uma condição seja verdadeira ou um outro, caso ela seja falsa. Para isso utilizamos a palavra-chave else.

Alguns exemplos:

if ( condicao )
// se condição for verdadeira executa
else
// se condição for falsa executa

Para um bloco de códigos:

if ( condicao ) {
// códigos que serão
// executados caso a
// condição seja verdadeira
} else
// códigos que serão
// executados caso a
// condição seja falsa
}

Veja um exemplo, onde verificamos a variável preco e caso o seu valor seja maior que 100 a mensagem console.log("Desconto liberado") será impressa. Caso contrário será impresso console.log("Nenhum desconto foi liberado").

var preco = 20;
if ( preco > 100 )
    console.log("Desconto liberado");
else
   console.log("Nenhum desconto foi liberado");

// vai imprimir "Nenhum desconto foi liberado"

else if

Como vimos, utilizar if e else permite ao JavaScript executar um código dentre duas opções. Porém, há casos em que devemos testar uma nova condição antes de executar o trecho de código alternativo. Uma forma de escrever essa verificação é utilizando else if.

var preco = 70;
if ( preco > 100 ) { 
console.log("Desconto de 10% liberado");
} else if ( preco > 50 ) {
console.log("Desconto de 5% liberado");
} else {
console.log("Nenhum desconto foi liberado");

// vai imprimir "Desconto de 5% liberado"
}

No exemplo acima temos três alternativas de códigos para serem executados:

  1. No primeiro caso, a instrução console.log("Desconto de 10% liberado") será executada se o valor da variável preco for maior que 100.
  2. Se não for esse o caso, uma nova verificação será feita e se o valor da variável preco for maior que 50 a instrução console.log("Desconto de 5% liberado") será executada.
  3. Caso nenhuma dessas situações seja verdadeira a instrução console.log("Nenhum desconto foi liberado").

if ternário

A estrutura if possui uma forma mais compacta, chamada de if ternário. Sua sintaxe é a seguinte:

condicao ? código1 : código2

Veja um exemplo:

var nome;
console.log( nome ? 'Olá ' + nome : 'Digite um nome' );
// vai imprimir 'Digite um nome'

Esse código tem o mesmo efeito deste:

var nome;
var nome;
if ( nome ) {
console.log("Olá " + nome);
} else {
console.log("Digite um nome");
}

// vai imprimir 'Digite um nome'

Contudo, a primeira forma, ternária, utiliza menos linhas para realizar a mesma verificação.

Operador &&

O operador && possui um comportamento chamado curto-circuito que torna possível executar um código de forma similar ao if.

Veja um exemplo:

var valor = 650;
if ( valor > 100 ) console.log(“Pode parcelar a compra sem juros”);
// vai imprimir "Pode parcelar a compra sem juros" 

Esse código pode ser escrito utilizando && da seguinte forma:

var valor = 650;
( valor > 100 ) && console.log(“Pode parcelar a compra sem juros”) ;
// vai imprimir "Pode parcelar a compra sem juros" 

Veja um outro exemplo, onde atribuímos um valor a uma variável, baseado na condição preco > 100.

var preco = 20;
var permiteParcelar = preco > 100 && true;
console.log(permiteParcelar);
// vai imprimir false

Estas são as variações da estrutura if que o JavaScript nos oferece. O uso de cada uma delas vai depender de como você vai codificar a sua aplicação.