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 executaPara 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:
- 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.
- 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.
- 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ódigo2Veja 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 falseEstas 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.
