Praticando JavaScript: condicionais

Praticando condicionais - Apresentação

Olá! Boas-vindas ao curso da formação de Prática de Programação com JavaScript. Meu nome é Ju Amoasei e vou te acompanhar nesta jornada!

Audiodescrição: Ju se descreve como uma mulher branca, com cabelo curto e liso na cor azul. Usa óculos de armação circular na cor vermelho e veste uma camiseta cinza com a palavra "alura" na cor branca. Está em um estúdio com itens decorativos ao fundo, iluminado por tons de azul. À sua frente, um microfone na altura do pescoço.

O foco aqui é realmente utilizar código para testar nossos conhecimentos de forma prática e resolver alguns daqueles problemas de lógica de programação que encontramos durante nossa rotina de estudos.

O que aprenderemos?

Nessa formação, teremos revisão de conteúdo, material complementar e muitos desafios e exercícios para realmente colocarmos em prática tudo o que aprendemos.

Quais são os requisitos?

É importante destacar que, como este é um curso de revisão, é necessário já ter concluído a formação anterior, que é a formação de Fundamentos de JavaScript para back-end, onde apresentamos os conceitos que apenas revisaremos durante esta formação.

Na formação prática, o conteúdo será revisado de forma incremental. É recomendável que façamos os cursos da formação na ordem apresentada, para garantir que não perdemos nada que é referenciado na revisão anterior.

É importante notar que este não é um curso voltado para front-end. No entanto, toda a prática que realizaremos com JavaScript pode ser aproveitada no front-end, desde que o Node.js esteja instalado.

Devemos pausar, testar os vídeos, experimentar os exemplos, modificar e não deixar de fazer os exercícios, pois isso é muito importante. Vamos enfatizar isso durante toda a revisão! Lembre-se de compartilhar o que aprendeu no fórum e pedir ajuda se necessário.

Vamos lá!

Praticando condicionais - Prática: if e else

Vamos colocar em prática o que vimos sobre condicionais?

Já abrimos o Visual Studio Code, criamos uma pasta e um arquivo chamado exercicios.js para realizar nossos testes. Se você ainda não tem o Node instalado ou não sabe se ele está instalado e qual a versão, dev voltar à atividade "Preparando Ambiente", seguir as instruções e, em seguida, retornar para conseguirmos rodar e executar nossos códigos diretamente no Visual Studio Code.

Criando um fluxo para soma ou multiplicação

No arquivo exercicios.js, já deixamos um enunciado preparado:

// IF/ELSE

// definir um fluxo para somar ou multiplicar dois números usando if/else

O primeiro exercício será definir um fluxo para somar ou multiplicar dois números usando if else. Para isso, podemos começar criando constantes para os números. Vamos chamar a constante de num1 e atribuir o valor 2, e a constante num2 com o valor 4.

// IF/ELSE

// definir um fluxo para somar ou multiplicar dois números usando if/else

const num1 = 2;
const num2 = 4;

O enunciado sugere que vamos somar OU multiplicar, o que significa que o programa seguirá um fluxo OU outro. Para implementar isso em um if, podemos definir que, se quisermos somar, precisamos entrar no bloco if. Para isso, é necessário que a condição dentro do bloco seja avaliada como true.

Podemos fazer isso criando uma constante chamada operacao e atribuindo a ela a string 'soma'. Agora, podemos verificar se a condição para o if é true. A verificação será se o valor da variável operacao é igual a 'soma'. Isso garante que a condição seja atendida, pois é exatamente o valor da variável.

Neste caso, somamos os dois números e já mostramos o resultado no console com console.log(num1 + num2). É uma operação aritmética simples.

Lembrando que, em JavaScript, tudo é case sensitive, ou seja, diferencia maiúsculas de minúsculas, então a string deve ser exatamente igual.

// IF/ELSE

// definir um fluxo para somar ou multiplicar dois números usando if/else

const num1 = 2;
const num2 = 4;
const operacao = 'soma';

if (operacao === 'soma') {
    console.log(num1 + num2);
}

Adicionando o bloco else para multiplicação

Agora, vamos usar o else. Lembrando que o else não tem condição — ele executa quando o if não é atendido. Então, vamos copiar o console.log e ajustar.

Em vez de somar, queremos multiplicar: num1 * num2. O asterisco (*) é o operador de multiplicação, ou seja, num1 vezes num2.

// IF/ELSE

// definir um fluxo para somar ou multiplicar dois números usando if/else

const num1 = 2;
const num2 = 4;
const operacao = 'soma';

if (operacao === 'soma') {
    console.log(num1 + num2);
} else {
    console.log(num1 * num2);
}

Vamos rodar o código. Podemos abrir o terminal pelo menu superior e verificar se estamos na pasta correta. Vamos executar com node exercicios.js. O resultado é 6, pois 4 + 2 é igual a 6, o que indica que deu certo.

Melhorando o fluxo com else if

Podemos melhorar isso. Em vez de um else, que faz a multiplicação automaticamente se não for soma, podemos passar uma condição para a multiplicação, uma condição intermediária. Vamos usar else if. Podemos copiar a condição do if e, em vez de verificar se o valor da variável operacao é 'soma', verificamos se é 'multiplicação.

Como se trata de uma string, podemos até escrever com acento e cedilha: multiplicação. Mas um lembrete importante: nunca use caracteres especiais no nome de variáveis, só dentro de strings como essa.

// IF/ELSE

// definir um fluxo para somar ou multiplicar dois números usando if/else

const num1 = 2;
const num2 = 4;
const operacao = 'soma';

if (operacao === 'soma') {
    console.log(num1 + num2);
} else if (operacao === 'multiplicação') {
    console.log(num1 * num2);
}

Exibindo mensagens para operações não previstas

Dentro do bloco else, que não possui condição, podemos exibir uma mensagem padrão. Então, se o código cair no else, o console.log vai mostrar: 'Operação não identificada'. Por fim, podemos trocar o valor da string na constante operacao de 'soma' para 'multiplicação, lembrando que deve ser exatamente igual.

// IF/ELSE

// definir um fluxo para somar ou multiplicar dois números usando if/else

const num1 = 2;
const num2 = 4;
const operacao = 'multiplicação';

if (operacao === 'soma') {
    console.log(num1 + num2);
} else if (operacao === 'multiplicação') {
    console.log(num1 * num2);
} else {
    console.log('Operação não identificada');
}

Ao executar, o resultado é 8, pois 4 vezes 2 é 8.

Podemos alterar o valor da operação de 'multiplicação' para 'divisão', por exemplo.

// IF/ELSE

// definir um fluxo para somar ou multiplicar dois números usando if/else

const num1 = 2;
const num2 = 4;
const operacao = 'divisão';

if (operacao === 'soma') {
    console.log(num1 + num2);
} else if (operacao === 'multiplicação') {
    console.log(num1 * num2);
} else {
    console.log('Operação não identificada');
}

Não é multiplicação, não é soma e não está previsto, obtemos a mensagem "Operação não identificada". Nosso fluxo está funcionando, entrando em cada uma das três condições corretamente!

Iniciando um novo exercício com faixas salariais

Vamos aproveitar para realizar mais um exercício com esse fluxo? Vamos colar outro enunciado no documento:

// localizar o nivel de bônus de acordo com a faixa salarial 
// ex: $11000 e acima: 3% de bônus 
// $10999 a $7000: 5% de bônus 
// $ 6999 a $4008: 7% de bônus 
// $3999 p baixo: 9% de bônus 

const salarіо = 2000;

O enunciado diz que precisamos localizar o nível de bônus de acordo com a faixa salarial. Nossa empresa oferecerá faixas de bônus dependendo do salário. Por exemplo, quem ganha 11 mil ou mais receberá 3% de bônus. Quem ganha um pouco menos receberá mais de bônus para compensar. Já deixamos uma constante salario estabelecida, e nosso caso de teste começará com um salário de 2000.

Estabelecendo as condições de bônus

Vamos criar esse fluxo usando if-else? Podemos começar pelo primeiro salário. A primeira condição é 11 mil. Se o valor da variável salario for maior ou igual a 11000, teremos o primeiro bloco de código, que é o if. Vamos usar console.log para indicar 3% de bônus, conforme o enunciado.

// localizar o nivel de bônus de acordo com a faixa salarial 
// ex: $11000 e acima: 3% de bônus 
// $10999 a $7000: 5% de bônus 
// $ 6999 a $4008: 7% de bônus 
// $3999 p baixo: 9% de bônus 

const salarіо = 2000;

if (salario >= 11000) {
    console.log('3% de bônus');
}

Agora podemos seguir com o else if, adicionando as demais condições. É importante prestar atenção aos operadores para garantir que o if, else if e else tratem corretamente cada faixa de salário.

Por exemplo, a condição de 5% de bônus vale até 10999. Então, usamos salario < 11000, pois o "menor que" não inclui 11000 — exatamente o que queremos.

Agora, vamos adicionar outra condição com o operador lógico &&, que permite verificar duas condições ao mesmo tempo. Queremos salários entre 700 e 10999, ou seja: salario < 11000 && salario >= 7000. Nesse caso, o bônus será de 5%, então copiamos o console.log anterior e ajustamos a mensagem para: '5% de bônus'.

// localizar o nivel de bônus de acordo com a faixa salarial 
// ex: $11000 e acima: 3% de bônus 
// $10999 a $7000: 5% de bônus 
// $ 6999 a $4008: 7% de bônus 
// $3999 p baixo: 9% de bônus 

const salarіо = 2000;

if (salario >= 11000) {
    console.log('3% de bônus');
} else if (salario < 11000 && salario >= 7000) {
    console.log('5% de bônus');
} 

Depois, podemos adicionar mais um else if para a próxima faixa: salários entre 4000 e 6999. A condição será: salario < 7000 && salario >= 4000. Aqui, o bônus sobe para 7%, então ajustamos a mensagem novamente.

// localizar o nivel de bônus de acordo com a faixa salarial 
// ex: $11000 e acima: 3% de bônus 
// $10999 a $7000: 5% de bônus 
// $ 6999 a $4008: 7% de bônus 
// $3999 p baixo: 9% de bônus 

const salarіо = 2000;

if (salario >= 11000) {
    console.log('3% de bônus');
} else if (salario < 11000 && salario >= 7000) {
    console.log('5% de bônus');
} else if (salario < 7000 && salario >= 4000) {
    console.log('7% de bônus');
} 

Por fim, se nenhuma das condições anteriores for atendida, usamos o else. Nesse bloco, a mensagem será para quem ganha menos e, portanto, recebe um bônus maior.

// localizar o nivel de bônus de acordo com a faixa salarial 
// ex: $11000 e acima: 3% de bônus 
// $10999 a $7000: 5% de bônus 
// $ 6999 a $4008: 7% de bônus 
// $3999 p baixo: 9% de bônus 

const salarіо = 2000;

if (salario >= 11000) {
    console.log('3% de bônus');
} else if (salario < 11000 && salario >= 7000) {
    console.log('5% de bônus');
} else if (salario < 7000 && salario >= 4000) {
    console.log('7% de bônus');
} else {
    console.log('9% de bônus');
}

Tudo pronto! Vamos testar?

Começamos com um salário de 2000, então esperamos que quem ganha 2 mil receba 9% de bônus. No terminal, ao repetir o último comando, obtemos 9% de bônus.

Vamos fazer outro teste, entre 6999 e 4 mil. Se a pessoa ganha 5000, ela deve entrar no nível de 7% de bônus. O que ocorre corretamente ao alterar salario para 5000.

Outro caso é entre 10999 e 7000. Se a pessoa ganha 8 mil reais, ao limpar o terminal e repetir o comando com a constante passando a ser 8000, obtemos 5% de bônus, o que está correto.

Se alterarmos a constante para acima de 11 mil, como 12000, receberá 3% de bônus, o que também está correto.

Considerações finais sobre operadores

É importante notar, ao usar as condições if, a questão dos operadores. Estamos usando um operador que retorna true apenas se ambas as condições forem true. O JavaScript avalia o que está dentro da condição para decidir se entra no bloco ou não.

Vamos, em seguida, analisar melhor o significado dos operadores e a questão de a condição ser true ou false!

Praticando condicionais - If e else

Vamos iniciar nossa revisão sobre condicionais!

Entendendo o que é uma condição

Vamos considerar um cenário comum: o usuário acessa o sistema e insere e-mail e senha. A condição para conceder acesso ao sistema é que ambas as informações, e-mail e senha, estejam corretas. É crucial essa diferenciação: e-mail e senha precisam estar corretos. Se estiverem, concedemos acesso ao sistema. Caso contrário, tratamos o erro, informamos o usuário e contabilizamos as tentativas, entre outras ações.

Se traduzirmos essa condição para uma linguagem semelhante ao JavaScript, teríamos algo como:

email && senha === true

O operador && (e-comercial) representa "e" ou "and" no JavaScript. Ambas as variáveis, email e senha, devem ser verdadeiras, ou seja, email === true e senha === true. Se ambas forem verdadeiras, concedemos acesso ao sistema. Em outras palavras, se (if) for verdadeiro (true), concedemos o acesso. Caso contrário (else), tratamos o erro e realizamos as ações necessárias.

Esse tipo de condição, que diferencia entre verdadeiro ou falso, é um dos blocos mais fundamentais da programação, pois permite que o programa tome decisões com base em condições. Sem isso, o programa seguiria um fluxo linear e seria incapaz de realizar muitas ações.

Implementando estruturas condicionais com if e if else

O if ou if else é uma das formas mais comuns de implementar essa estrutura de fluxo, conhecida como ramificação de fluxo ou condicional. Baseia-se em uma condição de verdadeiro ou falso, que determina para onde o código seguirá. A estrutura if else é amplamente conhecida e existe em diversas linguagens de programação.

Relembrando: no JavaScript, utilizamos if seguido de uma expressão entre parênteses e um bloco de código entre chaves. O bloco de código é o que desejamos executar se a condição do if for verdadeira.

O else é utilizado caso o if não seja satisfeito e desejemos oferecer outra opção para o código. Se a expressão dentro do if for avaliada como verdadeira, o código segue por um caminho. Caso contrário, o else oferece uma alternativa. O else é opcional e não possui uma condição própria; ele é o caminho seguido caso a condição do if não seja atendida.

if (expressão) {
 vá por esse caminho
} else {
    vá por outro caminho
};

Exemplo prático: verificando condições com operadores de comparação

Suponha que temos uma constante idade e queremos verificar se a pessoa pode dirigir ou tirar carteira de motorista. A constante idade é um número, digamos 18, e a verificação do if verifica se o valor dentro da variável idade é maior ou igual a 18. Essa expressão, idade >= 18, é avaliada pelo JavaScript. Dizemos que é avaliada porque o operador de comparação entre os dois valores retorna um valor de verdadeiro (true) ou falso (false).

const idade = 18;

if (idade >= 18) {
  console.log('pode dirigir');
};

O principal ponto a lembrar sobre o if é que a condição dentro dos parênteses é sempre avaliada em termos de verdadeiro (true) ou falso (false).

Utilizamos operadores de comparação, operadores de igualdade ou outras formas que veremos em seguida. É importante lembrar que, no final, queremos que a avaliação dentro dos parênteses da condição resulte em true (verdadeiro) para que o bloco seja executado. Caso contrário, devemos realizar outra ação.

Ao alterar a variável idade para 14, a expressão será avaliada como false (falso), pois 14 não é maior ou igual a 18. Assim, o código não entrará no bloco e continuará executando o restante do programa.

const idade = 14;

if (idade >= 18) {
  console.log('pode dirigir');
}

Se o valor da variável idade, que é 14, for maior ou igual a 18, a avaliação será false, e o bloco não será executado. No entanto, se estabelecermos um else, ele será executado automaticamente.

if (idade >= 18) {
  console.log('pode dirigir');
} else {
  console.log('abaixo da idade mínima');
}

Adicionando condições intermediárias com else if

Também podemos ter uma condição intermediária. Temos a condição do if, mas se ela não for atendida, podemos inserir outras condições antes do último caso, que é o else. Chamamos isso de else if.

Um bloco condicional pode conter um if, um else e um número determinado de else if. Não é necessário ter apenas um. Podemos encadear vários, embora não seja uma prática recomendada, pois pode tornar o código difícil de ler e entender.

Vamos entender o que é o else if.

Suponha que a idade seja 18 ou mais, permitindo dirigir. Se for menor de 18, ainda não pode dirigir. No entanto, queremos adicionar uma condição intermediária: a partir de 17 anos, já se pode começar a procurar autoescola, por exemplo. Colocamos essa condição intermediária dentro de um bloco else if.

const idade = 17;

if (idade >= 18) {
  console.log('pode dirigir');
} else if (idade >= 17) {
  console.log('pode procurar a auto escola');
} else {
  console.log('abaixo da idade mínima');
}

Portanto, se a idade for maior ou igual a 18, pode-se dirigir. Se a idade for maior ou igual a 17, pode-se começar a procurar uma autoescola. Caso contrário, é necessário esperar um pouco.

Uma questão interessante é: se a idade na variável for 19, o que acontece? Porque 19 é maior ou igual a 18, mas também é maior ou igual a 17. O que ocorrerá nesse código? Deixo esse desafio para você!

A resposta está no material, mas tente adivinhar qual fluxo nosso código seguirá. Compreender esse fluxo, se entrará no if, no else if ou no else, é crucial para resolver problemas de lógica.

Evitando aninhamentos excessivos de condicionais

Por último, devemos ter cuidado ao aninhar condicionais. Quando começamos a inserir muitas condições uma dentro da outra, como verificar se a idade é maior que 18 e, se for, adicionar outra verificação, e assim por diante, não é uma boa prática.

Isso torna o código difícil de ler, interpretar e manter. Adiciona complexidade à leitura e ao debugging (depuração). Se percebermos que estamos começando a inserir muitas condições aninhadas, é importante repensar a lógica, pois provavelmente há uma forma mais eficiente de implementar.

Exemplo de aninhamento de condicionais:

if (idade >= 18) {
  const possuiCnh = true;
  if (possuiCnh) {
    const cnhEhValida = true;
    if (cnhEhValida) {
      const possuiVeiculo = true;
      if (possuiVeiculo) {
        // código
      }
    }
  }
}

Vamos aplicar tudo isso que discutimos e codificar um pouco para ver na prática?

Sobre o curso Praticando JavaScript: condicionais

O curso Praticando JavaScript: condicionais possui 54 minutos de vídeos, em um total de 22 atividades. Gostou? Conheça nossos outros cursos de em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Praticando condicionais