Else if JavaScript: Como usar?

O else if é uma ferramenta fundamental na linguagem de programação JavaScript que permite aos desenvolvedores verificar múltiplas condições em sequência. Após um comando “if” inicial, que verifica uma primeira condição, o else if JavaScript pode ser utilizado para avaliar outras condições subsequentes.

Caso a condição do “if” não seja atendida, o programa prossegue para avaliar as condições do else if. Esta estrutura de controle é essencial para tomar decisões e direcionar o fluxo de execução do código de acordo com diferentes cenários.

A compreensão de como usar o else if eficazmente é crucial para qualquer programador JavaScript, pois proporciona uma maior flexibilidade e precisão ao criar lógicas condicionais. Com ele, o desenvolvedor pode lidar com múltiplos cenários potenciais de uma maneira mais organizada e legível. 

Nesse artigo, portanto, vamos falar sobre como dominar o else if enriquece o arsenal do programador, permitindo a criação de programas mais complexos e adaptáveis.

Conheça nosso blog e leia mais conteúdos afins.

O que é Else if JavaScript?

Em JavaScript, usa-se uma instrução if para testar uma condição. Se essa condição for verdadeira, executa-se o bloco de código dentro da instrução if

No entanto, há situações em que você pode querer verificar várias condições em sequência e executar diferentes blocos de código dependendo de qual condição é verdadeira. É aqui que else if e else entram em jogo.

Definição e explicação do conceito de “else if” em JavaScript

  • if: usado para testar uma condição. Se a condição for verdadeira, executa-se o código dentro deste bloco;
  • else if: usado depois de um if para testar outra condição se a condição no if for falsa;
  • else: usado no final de uma cadeia if/else if para executar um bloco de código quando nenhuma das condições anteriores for verdadeira.

Diferenças entre “if”, “else if” e “else”

  • if: é a primeira e principal instrução usada para testar uma condição;
  • else if: usa-se para testar uma nova condição após um if, mas somente se a condição no if anterior for falsa;
  • else: não testa nenhuma condição. Assim, executa-se seu bloco de código quando nenhuma das condições em if ou else if forem verdadeiras.

Exemplos simples de uso do “else if”

let idade = 18;

if (idade < 12) {

    console.log("Você é uma criança!");

} else if (idade >= 12 && idade < 18) {

    console.log("Você é um adolescente!");

} else {

    console.log("Você é um adulto!");

}

Explicando:

  • Se a variável idade for menor que 12, a mensagem "Você é uma criança!" será impressa no console;
  • Caso contrário, se a idade estiver entre 12 (inclusive) e 18 (exclusive), "Você é um adolescente!" será impressa;
  • Se nenhuma das condições acima for satisfeita (ou seja, a idade for 18 ou superior), "Você é um adulto!" será impressa.

Considere conhecer outras estruturas em JavaScript para complementar seu conhecimento:

Sintaxe do Else if em JavaScript

O else if é utilizado em JavaScript para verificar múltiplas condições em uma sequência. Se a primeira condição (if) for falsa, o JavaScript tentará a próxima condição (else if). Se nenhuma condição for verdadeira, portanto, o código dentro do bloco else (se estiver presente) será executado.

Estrutura Básica

if (condição1) {

    // Código a ser executado se condição1 for verdadeira

} else if (condição2) {

    // Código a ser executado se condição2 for verdadeira

} else {

    // Código a ser executado se nenhuma das condições anteriores for verdadeira

}
  • Parênteses (): eles envolvem as condições que você está testando. Por exemplo, no if (condição1), condição1 está dentro de parênteses;
  • Chaves {}: elas envolvem o bloco de código que você deseja executar se a condição for verdadeira;
  • Condições: é a expressão ou valor que você está testando. Deve retornar true ou false.

Exemplo de Código

Suponha que temos um sistema de avaliação de notas de estudantes e queremos classificar as notas, por exemplo:

let nota = 85;

if (nota >= 90) {

    console.log("Você tirou A!");

} else if (nota >= 80) {

    console.log("Você tirou B!");

} else if (nota >= 70) {

    console.log("Você tirou C!");

} else if (nota >= 60) {

    console.log("Você tirou D!");

} else {

    console.log("Você tirou F!");

}

Explicando:

  • Primeiro, a nota do estudante é definida como 85;
  • O programa verifica a primeira condição: nota >= 90. Como 85 não é maior ou igual a 90, esta condição é falsa;
  • A próxima condição, nota >= 80, é verificada. Como 85 é maior ou igual a 80, essa condição é verdadeira, e o programa imprime "Você tirou B!";
  • Uma vez que uma condição verdadeira é encontrada, o programa não verifica as condições subsequentes e termina a sequência de verificações.

Exemplos Práticos de Uso

1. Avaliação de Faixa Etária

Suponhamos que queira categorizar pessoas em grupos por faixa etária. Você pode usar a estrutura else if para avaliar múltiplas condições:

let idade = 25;

if (idade < 12) {

    console.log("Criança");

} else if (idade < 18) {

    console.log("Adolescente");

} else if (idade < 60) {

    console.log("Adulto");

} else {

    console.log("Idoso");

}

Neste exemplo, começamos avaliando se a idade é menor que 12. Se for, categoriza-se a pessoa como "Criança". Se a idade não satisfazer a primeira condição, passamos para o próximo else if, e assim por diante, até encontrarmos uma condição que seja verdadeira ou até chegarmos ao "else" final.

2. Avaliação de Desempenho Escolar

Imagine que você queira avaliar a nota de um estudante e retornar uma avaliação textual, por exemplo:

let nota = 85;

if (nota < 50) {

    console.log("Insuficiente");

} else if (nota < 60) {

    console.log("Regular");

} else if (nota < 75) {

    console.log("Bom");

} else if (nota < 90) {

    console.log("Muito Bom");

} else {

    console.log("Excelente");

}

Aqui, então, começamos verificando se a nota é menor que 50. Se for, a avaliação é "Insuficiente". Se não, passamos pelas outras condições até encontrar a avaliação correspondente.

3. Avaliação de Clima

Suponha que queira dar sugestões de roupas com base na temperatura:

let temperatura = 15;

if (temperatura <= 10) {

    console.log("Vista um casaco pesado e cachecol.");

} else if (temperatura <= 20) {

    console.log("Um suéter deve ser suficiente.");

} else if (temperatura <= 30) {

    console.log("Uma camiseta está boa.");

} else {

    console.log("Está muito quente. Vista roupas leves.");

}

No exemplo acima, com uma temperatura de 15 graus, a saída seria "Um suéter deve ser suficiente.".

Nestes três exemplos, você pode ver como else if é útil para lidar com múltiplas condições em ordem sequencial. A primeira condição verdadeira encontrada interromperá a sequência e executará o bloco de código correspondente. 

Se nenhuma das condições else if for verdadeira, executa-se o bloco "else" final.

Erros comuns else if JavaScript e suas soluções

Ao trabalhar com a estrutura else if em JavaScript, é comum encontrar alguns erros, seja por desconhecimento da sintaxe correta, falta de atenção ou mesmo devido à complexidade do código em questão. Vamos explorar alguns desses erros comuns e suas respectivas soluções:

1. Esquecer as chaves {}

if (condicao1)

    console.log("Condição 1 atendida");

else if (condicao2)

    console.log("Condição 2 atendida");

else

    console.log("Nenhuma condição atendida");

Problema:

Sem as chaves, apenas a primeira linha após o if ou else if será executada como parte daquela condição. Isso pode levar a comportamentos inesperados se mais de uma linha for necessária.

Solução:

Sempre use chaves {} para delimitar blocos de código, mesmo que haja apenas uma linha.

if (condicao1) {

    console.log("Condição 1 atendida");

} else if (condicao2) {

    console.log("Condição 2 atendida");

} else {

    console.log("Nenhuma condição atendida");

}

2. Usar = em vez de == ou ===

let valor = 10;

if (valor = 5) {

    console.log("Valor é 5");

} else {

    console.log("Valor não é 5");

}

Problema:

Usar = é uma atribuição, e não uma comparação. Portanto, o código acima sempre executará o bloco do if, e a variável valor será alterada para 5.

Solução:

Use == para comparação ou === para comparação estrita (leva em consideração o tipo e o valor).

let valor = 10;

if (valor === 5) {

    console.log("Valor é 5");

} else {

    console.log("Valor não é 5");

}

3. Esquecer de encadear o else if

let numero = 15;

if (numero > 10) {

    console.log("Número maior que 10");

}

if (numero < 20) {

    console.log("Número menor que 20");

}

Problema:

Ambas as condições são verdadeiras, então ambos os blocos if serão executados. Pode não ser o comportamento desejado se você pretendia verificar condições exclusivas.

Solução:

Encadear as condições usando else if para garantir que apenas uma condição seja atendida, por exemplo:

let numero = 15;

if (numero > 10) {

    console.log("Número maior que 10");

} else if (numero < 20) {

    console.log("Número menor que 20");

}

Estes são apenas alguns exemplos de erros que podem surgir ao usar a estrutura else if em JavaScript. Sempre revise seu código e teste diferentes cenários para garantir que ele funciona conforme esperado.

Dicas e melhores práticas

O uso adequado do else if pode tornar seu código mais claro e eficiente. Abaixo, listamos algumas dicas e práticas recomendadas ao utilizar essa estrutura em JavaScript.

1 Evite cadeias longas de “else if”

Em situações onde há muitas condições a serem verificadas, uma longa sequência de else if pode tornar o código confuso. Nestes casos, portanto, considere usar uma estrutura diferente, como o “switch“, ou refatorar o código para ser mais modular.

Exemplo problemático:

if (condição1) {

    // ...

} else if (condição2) {

    // ...

} else if (condição3) {

    // ...

} // ... e assim por diante

Solução usando switch:

switch (variavel) {

    case valor1:

        // ...

        break;

    case valor2:

        // ...

        break;

    // ... e assim por diante

}

2 Certifique-se de que as condições são mutuamente exclusivas

Quando usa else if, é importante que apenas uma condição possa ser verdadeira em qualquer momento, para evitar ambiguidades no código.

Exemplo:

let numero = 15;

if (numero < 10) {

    console.log("Número é menor que 10");

} else if (numero < 20) {

    console.log("Número é menor que 20");

} else {

    console.log("Número é 20 ou maior");

}

Neste exemplo, exibe-se apenas uma das mensagens, garantindo que não haja resultados inesperados.

3 Use “else if” para condições relacionadas

Se as condições não se relacionarem, é preferível usar vários blocos "if". De preferência separados.

Exemplo problemático:

if (usuarioLogado) {

    // ...

} else if (horaAtual > 18) {

    // ...

}


Neste caso, as duas condições não se relacionam e deve-se tratá-las separadamente.

Solução:

if (usuarioLogado) {

    // ...

}

if (horaAtual > 18) {

    // ...

}

Ao seguir essas dicas, você pode garantir que seu código seja mais legível e evite possíveis problemas de lógica ou ambiguidades.

A importância de manter o código limpo e compreensível

Escrever código não é apenas sobre fazer o computador executar instruções. É, igualmente, sobre comunicar a sua intenção para outros programadores (e para você mesmo, no futuro). Um código limpo e compreensível economiza tempo e reduz a probabilidade de erros.

Imagine que você recebeu o seguinte código para manutenção:

function a(x) {

    if(x == 1) return 'a';

    else if(x == 2) return 'b';

    else if(x == 3) return 'c';

    else if(x == 4) return 'd';

    // ... e assim por diante

}

Esse código, embora funcione, tem vários problemas:

  • Manutenção: adicionar, remover ou alterar condições exige modificação direta na cadeia de else if;
  • Legibilidade: é difícil entender rapidamente o propósito dessa função. O nome da função, a, não é descritivo;
  • Eficiência: cada else if é uma comparação sequencial. Se tivermos muitos else if, isso pode se tornar ineficiente.

Refatoração de Longas Cadeias de “else if” em JavaScript

Vamos refatorar o código anterior usando um objeto para mapear as entradas para suas respectivas saídas:

function obterLetraCorrespondente(numero) {

    const mapeamento = {

        1: 'a',

        2: 'b',

        3: 'c',

        4: 'd'

        // ... e assim por diante

    };

    return mapeamento[numero] || 'Desconhecido';

}

Neste exemplo:

  • Manutenção: é fácil adicionar, remover ou alterar mapeamentos. Basta modificar o objeto mapeamento;
  • Legibilidade: o nome da função é mais descritivo, e usamos um objeto para mapear os números diretamente para as letras;
  • Eficiência: a busca é quase instantânea, independente da quantidade de mapeamentos.

Dicas para Refatoração

  • Use nomes descritivos: escolher nomes significativos para funções e variáveis ajuda na leitura e compreensão do código;
  • Agrupe lógicas semelhantes: se várias condições estiverem fazendo algo semelhante, veja se é possível agrupá-las ou utilizar estruturas como objetos ou arrays para simplificar;
  • Evite muitos níveis de indentação: se você está aninhando muitos if, else if e else, pode ser uma indicação de que a função está fazendo coisas demais. Considere dividir em funções menores;
  • Comente códigos complexos: se o código tem uma lógica complexa, adicione comentários explicativos.

Manter o código limpo e compreensível é um investimento a longo prazo que pode economizar muito tempo e frustração no futuro.

Comparando “else if” com outras estruturas em JavaScript

Ao escrever código em JavaScript, frequentemente nos deparamos com situações onde precisamos avaliar múltiplas condições. Embora o else if seja uma ferramenta poderosa para isso, não é a única opção disponível. 

A estrutura “switch” é uma alternativa comum, principalmente quando lidamos com muitas comparações de casos. 

Abaixo, analisaremos um exemplo básico.

Usando o “switch”

Imagine que você queira determinar o dia da semana com base em um número, por exemplo:

let dia = 3;

switch (dia) {

    case 1:

        console.log("Domingo");

        break;

    case 2:

        console.log("Segunda-feira");

        break;

    case 3:

        console.log("Terça-feira");

        break;

    //... e assim por diante para os outros dias da semana.

    default:

        console.log("Dia inválido");

}

Neste exemplo, se “dia” for 3, o programa irá pular diretamente para o “case 3” e imprimir “Terça-feira” no console, graças ao mecanismo de comparação direta do “switch”.

Análise:

  • Clareza e propósito: o “else if é geralmente mais intuitivo quando se lida com intervalos ou condições variadas. O "switch", por outro lado, é mais legível quando você tem valores discretos para comparar, como números inteiros ou strings;
  • Desempenho: em muitos cenários, as diferenças de desempenho entre else if e “switch” são mínimas. No entanto, para um grande número de comparações, “switch” pode ser ligeiramente mais rápido porque ele utiliza uma comparação direta em vez de avaliar cada condição em sequência;
  • Flexibilidade: o else if é mais flexível em termos das condições que pode avaliar (por exemplo, pode verificar intervalos). "Switch" é mais restrito, porque compara uma expressão com valores possíveis.

Conclusão

Este artigo forneceu um olhar detalhado sobre o uso da estrutura else if em JavaScript, uma ferramenta fundamental para verificar múltiplas condições em sequência. A compreensão adequada de else if não apenas enriquece o arsenal do programador, mas também facilita a criação de lógicas condicionais mais organizadas e legíveis. 

Além de apresentar a teoria por trás dessa estrutura, fornecemos exemplos práticos de seu uso em cenários cotidianos, assim como os erros comuns que os programadores podem enfrentar e suas respectivas soluções.

Para complementar seu entendimento em JavaScript, recomenda-se estudar outras estruturas de controle, como switch-case e loops (for, while, do-while). 

Explorar conceitos mais avançados de programação funcional e orientação a objetos em JavaScript também beneficia, pois amplia suas habilidades e permite desenvolver programas ainda mais eficientes e escaláveis.

Além disso, familiarizar-se com boas práticas e padrões de design pode ser essencial para escrever códigos robustos e manuteníveis.

Considere ler mais conteúdos como esse em nosso blog e complementar seus conhecimentos. Por exemplo, para quem está aprendendo Python, temos diversos artigos explicativos sobre funções, arrays e clareza de código.

Este artigo foi útil?

Obrigado pela resposta!
Picture of Daiana S

Daiana S

Graduada em Letras pelo Instituto Federal da Paraíba e especializada em redação geral. Gosto de escrever sobre tudo e me dedico em vários níveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem.

Contato: daiana.blog@homehost.com.br

Ganhe 30% OFF

Indique seu nome e e-mail,e ganhe um cupom de desconto de 30% para sempre na Homehost!