Estruturas condicionais em JavaScript: como usar if e if else em JS

Em vez de executar ações lineares, um programa, geralmente, tem que alterar a maneira como executa o código quando são cumpridas certas condições. Por exemplo, um jogo sempre continua enquanto o jogador tiver pelo menos uma vida. Se essa condição não é cumprida, o jogo termina. Para fazer com que os programas se comportem como desejado, os desenvolvedores de jogos usam estruturas condicionais em JavaScript. Neste artigo, vamos te contar o que são e como funcionam as estruturas condicionais if, if…else e switch.

O que são as estruturas if e if…else em JavaScript?

Fonte: Unsplash

As sentenças if e if…else são estruturas de controle de fluxo usadas em JavaScript. O fluxo de código condicional permite escolher a instrução seguinte, dependendo da resposta ou resultado. Graças às estruturas if e if…else, o programa toma uma decisão de como executar o código quando é cumprida ou não uma condição necessária.

A estrutura if simples tem a seguinte sintaxe:

if (condição) {
// bloco de código a ser executado se a condição for verdadeira
}

If avalia a condição dentro dos parênteses () como uma expressão booleana: verdadeira ou falsa. Estas expressões são obtidas usando os operadores de comparação ==, ===, >, <, >=, <=, !==, !=. Se a condição for verdadeira (true), o código será executado dentro das chaves {}. Se a condição for falsa (false), o bloco de código será ignorado.

Se você quiser que seu programa tenha uma opção adicional de ação, adicione a palavra-chave else para executar outro bloco de código se a condição for falsa. A sintaxe da instrução será:

if (condição) {
// bloco de código a ser executado se a condição for verdadeira
} else {
// bloco de código a ser executado se a condição for falsa
}

Se houver mais de duas variantes, você poderá usar uma estrutura else if aninhada, especificando uma nova condição se a primeira condição for falsa.

if (condição 1) {
// bloco de código a ser executado se a condição 1 for verdadeira
} else if (condição 2) {
// bloco de código a ser executado se a condição 1 for falsa a condição 2 for verdadeira
} else {
// bloco de código a ser executado se a condição 1 for falsa e a condição 2 for falsa
}

Quando usar a estrutura switch?

Fonte: Unsplash

A estrutura switch é uma alternativa a múltiplas estruturas condicionais aninhadas. Use-a para comparar algum valor com várias opções (cases) ao mesmo tempo e executar o trecho de código correspondente. Quando o programa atinge a indicação break, sai da estrutura switch. Se nenhuma coincidência for encontrada, é executada a cláusula predeterminada (default).

A estrutura switch tem a seguinte sintaxe:

switch(expressão) {
case valor1:
// bloco de código 1
break;
case valor2:
// bloco de código 2
break;
default:
// bloco de código 3
}

Operadores e estruturas if…else em JavaScript

Para criar condições compostas, você também pode usar os seguintes operadores:

• O operador lógico Y (&&) retorna true se ambas as condições forem verdadeiras e executa o bloco de código if. Caso contrário, o operador retornará false e será executado o código else.
• O operador lógico O (||) executa o código dentro da estrutura if se uma ou ambas as condições forem verdadeiras.
• O operador lógico NO (!) retorna o valor oposto: se um valor for verdadeiro, ele o tornará falso e vice-versa.
• O operador condicional ou ternário (?:) é composto por três partes e permite receber um valor dependendo da condição: (condição) ? valor1 : valor2. Se a condição for verdadeira, é retornado o valor entre o sinal de interrogação ? e dois pontos :. No caso da condição ser falsa, prossegue para o valor após :.

Embora, à primeira vista, as variantes com operadores apareçam de forma mais curta, não abuse delas. As estruturas if… else são mais óbvias e mais legíveis.

Exemplos

Agora vamos brincar com um exemplo de código. Usamos o método prompt() que mostra uma caixa de diálogo com uma mensagem. O retorno depende da entrada do usuário.

Você pode copiar este código e executá-lo aqui. Selecione a guia JavaScript, cole o código, pressione Run e divirta-se!

let senha = prompt ('Fale amigo e entre');
if (senha === 'amigo') {
alert ('Oi');
} else {
alert('Não te conheço');
throw "stop";
}
// Conseguiu entrar? Decida para onde vai:
let rota = prompt ('Escolha uma das três rotas');
switch (rota) {
case '1':
alert ('Você se perdeu na Floresta Negra');
throw "stop";
case '2':
alert ('Você chegou à Montanha do Dragão');
break;
case '3':
alert ('Você foi comido por um troll');
throw "stop";
default:
alert ('Melhor voltar para casa');
throw "stop";
}
// Agora tome uma decisão séria:
let escape = prompt ('Cuidado! O dragão acorda. Correr ou se esconder? ')
if (escape === 'se esconder') {
alert ('O dragão foi embora');
} else if (escape === 'correr') {
alert ('Volte para casa agora');
} else {
alert('O dragão te queimou');
}
// Por fim veremos o resultado final:
result = (escape === 'se esconder') ? alert('Você encontrou o tesouro!') : alert ('Tente outra vez!');

Se você sonha em desenvolver seu próprio game, você pode fazê-lo com JavaScript. Essa é uma das melhores linguagens de programação para começar a desenvolver jogos de navegador, bem como aplicativos móveis e de desktop.

Na EBAC recomendamos que você se inscreva no curso online Profissão: Full Stack Designer. Você vai conhecer todos os detalhes de como os aplicativos são feitos, aprenderá os fundamentos do JavaScript e sua sintaxe básica, trabalhará com as bibliotecas e frameworks mais populares.

O curso é composto por videoaulas e atividades práticas que você pode fazer no seu próprio ritmo, de qualquer lugar e com feedback individualizado dos tutores. Seu projeto final será criar um site e uma aplicação web do zero. Após a conclusão do curso, você receberá um certificado EBAC e terá acesso vitalício à plataforma.

Quer ter acesso a mais conteúdos da área de programação & dados? Então, confira os nossos próximos webinars! Eles acontecem de forma semanal e são ministrados por profissionais renomados. Neles, você vai ficar por dentro do que está em alta nessas áreas, além de receber dicas preciosas para exercer a sua profissão. Clique aqui e aproveite!