JavaScript: Estrutura condicional if

Veja através de exemplos de código como utilizar a estrutura condicional if.

Fique por dentro

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:

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.

Artigos relacionados