Estruturas Condicionais em JavaScript

Estruturas condicionais permitem executar determinadas ações dependendo de condições específicas.

Estrutura if..else

A estrutura if..else verifica uma condição e, se essa condição for verdadeira, executa algumas ações. A forma mais simples da estrutura if..else é:

if (condição) {
    algumas ações
}

Após a palavra-chave if em parênteses, vem a condição, e após a condição, um bloco de código com algumas ações. Se essa condição for verdadeira, então as ações dentro do bloco de código são executadas.

Por exemplo:

const income = 100;
if (income > 50) {
  console.log("Renda maior que 50");
}

Aqui, a condição usada na estrutura if é income > 50. Se esta condição retornar true, isto é, se a constante income for maior que 50, o navegador exibirá uma mensagem. Se o valor de income for menor que 50, nenhuma mensagem será exibida.

Se o bloco de código contiver apenas uma instrução, como no caso acima, a estrutura pode ser simplificada, removendo as chaves e colocando as ações imediatamente após a condição:

const income = 100;
if (income > 50) console.log("renda maior que 50");

ou mover as ações para a linha seguinte

const income = 100;
if (income > 50) console.log("renda maior que 50");

Além disso, as condições podem ser complexas:

const income = 100;
const age = 19;
if (income > 50 && age > 18) {
  console.log("renda maior que 50");
  console.log("idade maior que 18");
}

Verificando a Presença de um Valor

A estrutura if permite verificar a presença de um valor. Por exemplo:

let myVar = 89;
if (myVar) {
  console.log(`A variável myVar tem o valor: ${myVar}`);
}

Se a variável myVar tiver um valor, como neste caso, ela retornará true na estrutura condicional.

Versão contrária:

let myVar;
if (myVar) {
  console.log(`A variável myVar tem o valor: ${myVar}`);
}

Aqui, a variável myVar não tem um valor. (Na realidade, ela é undefined) Portanto, a condição na estrutura if retornará false, e as ações no bloco if não serão executadas.

Expressão else

Discutimos como definir ações que são executadas se a condição após o if for verdadeira. Mas e se também quisermos executar outro conjunto de instruções se a condição for falsa? Nesse caso, podemos usar o bloco else. Este bloco contém instruções que são executadas se a condição após o if for falsa, ou seja, igual a false:

if (condição) {
    instruções, se a condição for verdadeira
} else {
    instruções, se a condição for falsa
}

Se a condição após o if for verdadeira, o bloco if é executado. Se a condição for falsa, o bloco else é executado. Por exemplo:

const income = 45;
if (income > 50) {
  console.log("Renda maior que 50");
} else {
  console.log("Renda menor ou igual a 50");
}

Aqui, a constante income é igual a 45, então a condição após o operador if retornará false, e o controle passará para o bloco else.

Além disso, se o bloco else contiver apenas uma instrução, a estrutura pode ser simplificada:

const income = 45;
if (income > 50) console.log("Renda maior que 50");
else console.log("Renda menor ou igual a 50");

Condições alternativas e else if

Com a construção else if, podemos adicionar uma condição alternativa ao bloco if. Por exemplo, no caso acima, o valor de income pode ser maior, menor ou igual a um determinado valor. Vamos refletir isso no código:

const income = 50;
if (income > 50) {
  console.log("Renda maior que 50");
} else if (income === 50) {
  console.log("Renda igual a 50");
} else {
  console.log("Renda menor que 50");
}

Neste caso, o bloco else if será executado. Se necessário, podemos usar vários blocos else if com diferentes condições:

const income = 500;
if (income < 200) {
  console.log("Renda abaixo da média");
} else if (income >= 200 && income < 300) {
  console.log("Um pouco abaixo da média");
} else if (income >= 300 && income < 400) {
  console.log("Renda média");
} else {
  console.log("Renda acima da média");
}

No entanto, o bloco else não é obrigatório:

const income = 500;
if (income < 200) {
  console.log("Renda abaixo da média");
} else if (income >= 200 && income < 300) {
  console.log("Um pouco abaixo da média");
} else if (income >= 300 && income < 400) {
  console.log("Renda média");
}

Verdadeiro ou Falso

No JavaScript, qualquer variável pode ser usada em expressões condicionais, mas nem toda variável é do tipo booleano. Nesse contexto, surge a questão sobre o que uma variável retornará - true ou false? Isso depende muito do tipo de dados que a variável representa:

undefined
Retorna false
null Retorna false
Boolean
Se a constante/variável for igual a false, retorna false. Se for igual a true, retorna true
Number
Retorna false se o número for 0 ou NaN (Not a Number), nos outros casos retorna true. Por exemplo, a seguinte variável retornará false:
```
let x = NaN;

// false:
if (x) {
}
```
String
Retorna false se a constante/variável for uma string vazia, ou seja, se seu comprimento for 0; nos outros casos, retorna true
```
const emptyText = ""; // false - pois é uma string vazia
const someText = "javascript"; // true - a string não está vazia
```

Object

Sempre retorna true

const user = { name: "Tom" }; // true
const car = {}; // true

Estrutura switch..case

A estrutura switch..case é uma alternativa ao uso da estrutura if..else e também permite tratar vários condições de uma vez:

const income = 200;
switch (income) {
  case 100:
    console.log("Renda igual a 100");
    break;
  case 200:
    console.log("Renda igual a 200");
    break;
  case 500:
    console.log("Renda igual a 500");
    break;
}

Após a palavra-chave switch, entre parênteses, vai a expressão a ser comparada. O valor desta expressão é comparado sequencialmente com os valores após a palavra case. Se uma correspondência é encontrada, o bloco case específico será executado.

No final de cada bloco case, coloca-se o operador break para evitar a execução dos blocos subsequentes. Neste caso, como a constante income é igual a 200, o bloco a ser executado será:

case 200:
    console.log("Renda igual a 200");
    break;

Operador break

O operador break é usado para evitar a execução de outras condições. Por exemplo, poderíamos escrever:

let income = 200;
switch (income) {
  case 100:
    console.log("Renda igual a 100");
    income += 100;
    break;
  case 200:
    console.log("Renda igual a 200");
    income += 100;
    break;
  case 500:
    console.log("Renda igual a 500");
    income += 100;
  // break;   // aqui não há sentido em break, pois é o último bloco
}

Novamente, aqui a income é igual a 200 e será executado o bloco:

case 200:
    console.log("Renda igual a 200");
    income += 100;
    break;

Com o operador break após a execução do bloco, saímos da estrutura switch, e nenhum outro bloco case será executado.

Mas agora vamos remover o operador break:

let income = 200;
switch (income) {
  case 100:
    console.log("Renda igual a 100");
    income += 100;
  case 200:
    console.log("Renda igual a 200");
    income += 100;
  case 500:
    console.log("Renda igual a 500");
    income += 100;
}
console.log("Renda final é", income);

Resultado da execução:

Renda igual a 200
Renda igual a 500
Renda final é 400

Inicialmente a variável income é novamente igual a 200, portanto, será executado o bloco:

case 200:
    console.log("Renda igual a 200");
    income += 100;

O valor de income aumenta em 100, mas, como não há operador break no final do bloco, o controle passa para o próximo bloco:

case 500:
    console.log("Renda igual a 500");
    income += 100;

E não importa que income não seja igual a 500 (mas sim 300 neste momento), este bloco também será executado.

Unificação de Condições

No entanto, se necessário, podemos processar várias condições de uma só vez:

const income = 200;
switch (income) {
  case 100:
  case 200:
    console.log("Renda igual a 100 ou 200");
    break;
  case 500:
    console.log("Renda igual a 500");
    break;
}

Neste caso, para a condição onde income é igual a 100 e 200, as mesmas ações são executadas.

Condição Padrão - default

Se quisermos também tratar a situação onde nenhum caso corresponde, podemos adicionar um bloco default opcional:

const income = 700;
switch (income) {
  case 100:
    console.log("Renda igual a 100");
    break;
  case 200:
    console.log("Renda igual a 200");
    break;
  case 500:
    console.log("Renda igual a 500");
    break;
  default:
    console.log("Renda de valor desconhecido");
    break;
}