Aprenda estruturas condicionais no JavaScript de forma simples

O que são estruturas condicionais?

Estrutura if...else

Sintaxe

if (condição) {
  // código a ser executado se a condição for verdadeira
} else {
  // código a ser executado caso contrário
}

Exemplo prático:

let projetosCompletos = 13;

if (projetosCompletos === 13) {
  console.log("Parabéns, dev! Você completou todos os 13 projetos e está pronto para brilhar no mercado!");
} else {
  console.log(`Falta pouco! Continue avançando e conquiste os ${13 - projetosCompletos} projetos restantes para completar seu portfólio.`);
}

Aqui, verificamos se o aluno completou todos os 13 projetos da formação. Se sim, ele recebe uma mensagem de parabéns. Caso contrário, ele é incentivado a continuar codando!

Estrutura else if

Sintaxe

if (condição1) {
  // código a ser executado se a condição1 for verdadeira
} else if (condição2) {
  // código a ser executado se a condição2 for verdadeira
} else {
  // código a ser executado se nenhuma das condições for verdadeira
}

Exemplo prático:

let desafiosResolvidos = 45;

if (desafiosResolvidos >= 40) {
  console.log("Você é um mestre dos códigos! Já resolveu mais de 40 desafios!");
} else if (desafiosResolvidos >= 20) {
  console.log("Ótimo progresso, dev! Você está no caminho certo, para resolver todos os desafios.");
} else {
  console.log("Ainda há muitos desafios pela frente! Bora codar?");
}

Nesse exemplo, o sistema ajusta a mensagem de acordo com o progresso do dev em resolver os desafios propostos. Assim, o aluno se sente incentivado a continuar evoluindo.

Estrutura switch

Sintaxe

switch (expressão) {
  case valor1:
    // código a ser executado se a expressão for igual a valor1
    break;
  case valor2:
    // código a ser executado se a expressão for igual a valor2
    break;
  default:
    // código a ser executado se nenhum valor corresponder
}

Exemplo prático:

let nivel = "pleno";

switch (nivel) {
  case "junior":
    console.log("Salário estimado para dev júnior: R$ 3.000 - R$ 4.000");
    break;
  case "pleno":
    console.log("Salário estimado para dev pleno: R$ 5.000 - R$ 8.000");
    break;
  case "senior":
    console.log("Salário estimado para dev sênior: R$ 9.000 - R$ 12.000");
    break;
  default:
    console.log("Nível não reconhecido. Bora estudar e subir de nível!");
}

Dependendo do nível do dev (júnior, pleno ou sênior), o sistema exibe uma estimativa de salário. Se o nível informado não for reconhecido, incentivamos o dev a continuar aprendendo.

Operador ternário

Sintaxe

condição ? valorSeVerdadeiro : valorSeFalso;

Exemplo prático:

let formacaoCompleta = false;

let mensagem = formacaoCompleta ? "Parabéns! Você completou a formação Full Stack e está pronto para brilhar no mercado!" : "Continue firme! Complete todos os projetos da formação Full Stack e conquiste seu espaço.";

console.log(mensagem);

Nesse exemplo, se a formação estiver completa, o aluno recebe uma mensagem de parabéns. Caso contrário, é incentivado a continuar estudando e praticando.

Teste os códigos diretamente no StackBlitz

Operadores lógicos e de comparação

Operadores de comparação:

• ==: Igual a

• ===: Estritamente igual (compara valor e tipo)

• !=: Diferente de

• !==: Estritamente diferente (valor e tipo)

• <, >, <=, >=: Menor, maior, menor ou igual, maior ou igual

Operadores lógicos:

• &&: E (ambas as condições devem ser verdadeiras)

• ||: Ou (pelo menos uma condição deve ser verdadeira)

• !: Não (inverte o resultado da condição)

📽️

Quer ver na prática como funcionam os principais statements do JavaScript, incluindo condicionais? Assista ao vídeo:

Boas práticas com estruturas condicionais

1. Sempre use chaves {}, mesmo em condições com uma única linha de código. Isso torna seu código mais legível e previne erros.

2. Use switch em vez de if...else if para comparar múltiplos valores de uma variável. Isso melhora a clareza e organização do código.

3. Evite aninhar muitas condições. Quando possível, refatore o código em funções menores para facilitar a leitura.

Continue aprendendo com mais conteúdos e documentação

• Objetos, propriedades e métodos em JavaScript

• Entendendo funções construtoras em JavaScript

• Declaração if...else na MDN

• Bloco de código (block statement)

• Declaração switch

• Operador ternário (? :)

Esses materiais complementam o que você aprendeu aqui e são recursos essenciais para evoluir como dev. Bora continuar explorando e melhorando suas skills!

Conclusão