Aprenda a codificar com JavaScript: Parte 2, condicionais

Se declarações

Uma única instrução if executará uma ação se uma condição for verdadeira. Se a condição for falsa, o programa executará a próxima instrução que estiver fora do bloco if. No exemplo a seguir, se a expressão isRaining é verdade, então vamos putOnCoat() e putOnRainboots() então goOutside(). Se isRaining for falso, o programa só executará goOutside().

if (isRaining) {
    putOnCoat();
    putOnRainboots();
}

goOutside();

Esta é a forma geral para escrever uma instrução if:

if (condition) {
    statement;
    statement;
    ...
}

o doença é uma expressão que tem o valor true ou false ou é avaliada como true ou false. Uma expressão verdadeira ou falsa é chamada de expressão booleana. Expressões booleanas são feitas com operadores relacionais.

Operadores relacionais

Um operador relacional compara dois valores e determina se a relação entre eles é verdadeira ou falsa. Eles podem ser usados ​​para criar expressões booleanas para nossas condições. Aqui está uma lista de operadores relacionais com exemplos:

É importante observar a diferença entre o operador de igualdade == e o operador de igualdade estrita ===. Por exemplo, a expressão 2 == "2" é verdade. Mas a expressão 2 === "2" é falso. No segundo exemplo, os dois valores são tipos de dados diferentes e é por isso que a expressão é falsa. É uma boa prática usar === ou !==.

O exemplo a seguir exibirá a mensagem “Você obteve um A”.

let grade = 93;

if (grade >= 90) {
    console.log("You get an A");
}

Instruções If-Else

Uma instrução if-else executará um bloco de instruções se sua condição for verdadeira ou outro bloco se sua condição for falsa. O exemplo a seguir exibirá a mensagem “nome de usuário válido” porque a condição é verdadeira.

let username = "alberta";

if (username === "alberta") {
    console.log("Valid Username");
} else {
    console.log("Incorrect username. Try again.");
}

Esta é a forma geral de uma instrução if-else:

if (condition) {
    statement;
    statement;
    etc.
} else {
    statement;
    statement;
    etc.
}

Questionário

Qual será a saída desse programa?

let isLoggedIn = false;

if (isLoggedIn) {
    console.log("Welcome");
} else {
    console.log("You are not logged in");
}

Operador Ternário

As instruções if-else são tão comuns na programação que existe um operador ternário dedicado que permite escrever instruções if-else simples em uma única linha. O operador ternário é o único operador em JavaScript que usa três operandos.

O operador aceita uma condição no início seguida de um ponto de interrogação. O ponto de interrogação é seguido por uma expressão que é executada se a condição for avaliada como um valor verdadeiro. A expressão é seguida por dois pontos. Temos ainda outra expressão após os dois pontos que é executada se a condição for avaliada como um valor falso.

Vamos ver um exemplo para ficar claro. Começamos com um sale_price que é igual ao max_price variável. Agora, mudamos o sale_price para 900 se o valor de big_discount avalia para true. Caso contrário, o sale_price valor é definido como 950. Desde então, definimos big_discount para truea sale_price valor é finalmente definido como 900.

let big_discount = true;
let max_price = 1000;
let sale_price = max_price;

if(big_discount) {
    sale_price = 900;
} else {
    sale_price = 950;
}

Aqui está o código equivalente escrito usando o operador ternário na última linha. Basicamente, o sale_price será definido como 900 se big_discount avalia para true e sale_price será definido como 950 se big_discount avalia para false. Assim como no exemplo anterior, o valor de big_discount está configurado para true assim sale_price é definido como 900.

let big_discount = true;
let max_price = 1000;
let sale_price = max_price;

sale_price = big_discount ? 900 : 950;

Múltiplas instruções If-Else

Também é possível verificar mais de uma condição. Digamos que você esteja monitorando o estoque de um determinado produto em uma loja e realizando determinadas ações com base em sua contagem de estoque. O código ficaria mais ou menos assim:

let stock_count = 50;

if(stock_count > 80) {
    console.log("Large stock");
} else if (stock_count > 20) {
    console.log("Be Ready to Restock");
} else if (stock_count > 0) {
    console.log("Please Restock");
} else {
    console.log("Stop Selling");
}

// Outputs: Be Ready to Restock

Você deve notar como eu uso else if e não apenas if para escrever várias condições. Este é o caminho a seguir se você deseja apenas que um bloco seja executado. Usando apenas if para escrever seus condicionais pode resultar na execução de vários blocos, conforme mostrado abaixo:

let stock_count = 50;

if(stock_count > 80) {
    console.log("Large stock");
} if (stock_count > 20) {
    console.log("Be Ready to Restock");
} if (stock_count > 0) {
    console.log("Please Restock");
} else {
    console.log("Stop Selling");
}

/* Outputs:
Be Ready to Restock
Please Restock */

Esta é a forma geral para escrever várias instruções if-else-if:

if (condition1) {
    statement;
    statement;
    etc.
} else if (condition2) {
    statement;
    statement;
    etc.
} else {
    statement;
    statement;
    etc.
}

Operador Ternário Encadeado

Já discutimos como os operadores ternários podem nos ajudar a escrever um código mais compacto, substituindo simples if-else declarações. Você pode usar operadores ternários encadeados de maneira semelhante para replicar vários if-else declarações. Aqui está um exemplo:

let stock_count = 50;

console.log((stock_count > 80) ? "Large stock" : (stock_count > 20) ? "Be Ready to Restock" : (stock_count > 0) ? "Please Restock" : "Stop Selling");

// Outputs: Be Ready to Restock

Assim como um normal if-else declaração, começamos verificando se o stock_count é superior a 80. Como não é, vamos para a próxima condição onde verificamos se stock_count tem mais de 20. Isso avalia true então obtemos a string “Esteja pronto para reabastecer”.

Declarações de troca

Uma instrução switch também é usada para executar condicionalmente alguma parte do seu programa. O exemplo a seguir implementa nosso conversor de numeral romano como uma instrução switch:

let num = 3;

switch (num) {
    case 1:
        console.log("I");
        break;
    case 2:
        console.log("II");
        break;
    case 3:
        console.log("III");
        break;
    case 4:
       console.log("IV");
        break;
    case 5:
       console.log("V");
       break;
    default:
        console.log("Invalid input");
}

Esta é a forma geral de uma instrução switch:

switch (expression) {
    case value1:
        statement;
        statement;
        etc.
        break;
    case value2:
        statement;
        statement;
        etc.
        break;
    default:
        statement;
        statement;
        etc.
}

Cada caso representa um valor que nossa expressão pode assumir. Somente o bloco de código para o caso verdadeiro será executado. Incluímos uma instrução break no final do bloco de código para que o programa saia da instrução switch e não execute nenhum outro caso. O caso padrão é executado quando nenhum dos outros casos é verdadeiro.

Tarefa

Escreva uma instrução switch que exiba o dia da semana dado um número. Por exemplo, 1 = domingo, 2 = segunda-feira, etc.

Operadores lógicos

o operador e && e o operador ou || nos permite conectar duas expressões booleanas. O operador não ! nega uma expressão. Para ilustrar como os operadores lógicos funcionam, veremos uma tabela verdade. Uma tabela verdade contém todas as combinações de valores usadas com os operadores. eu uso P para representar a expressão da mão esquerda e Q para a expressão da mão direita.

&& tabela verdade:

Lemos a tabela passando por cada linha. A primeira linha nos diz que quando P é verdade e Q é verdade, P && Q é verdade. O exemplo a seguir testa se x está entre 60 e 100 inclusive.

if (x >= 60 && x <= 100)
    console.log("Between 60 and 100.");

|| tabela verdade:

Este exemplo testa se 82 está fora do intervalo 60–100:

if (x < 60 || x > 100) 
    console.log("Less than 60 or more than 100.");

! tabela verdade:

Exemplo:

if (! x)
    console.log("x iS false.");

Tarefa

Preencha a tabela com os valores que faltam.

Algo útil para saber sobre operadores lógicos é que, se a expressão do lado esquerdo da && operador for falso, a expressão à direita não será verificada porque toda a instrução é falsa. E se a expressão do lado esquerdo de um || operador for verdadeiro, a expressão à direita não será verificada porque toda a instrução é verdadeira.

Análise

Um programa pode executar blocos de código condicionalmente usando expressões booleanas. Uma expressão booleana é escrita usando operadores relacionais. Os operadores lógicos nos permitem combinar expressões booleanas.

Uma única instrução if fornece ao programa um caminho alternativo a ser seguido se uma condição for atendida. As instruções if-else fornecem um segundo curso de ação se a condição for falsa. E as instruções if-else-if nos permitem testar várias condições. As instruções switch podem ser usadas como alternativa a uma instrução if-else-if quando você tiver várias condições para testar.