Nas nossas vidas, diariamente tomamos decisões baseadas em condições. Por exemplo: “Se estiver chovendo, vou levar um guarda-chuva. Caso contrário, não vou levar”. Na programação, também temos essa necessidade de tomar decisões com base em condições, e é aqui que entra a estrutura condicional if JavaScript.
Uma estrutura condicional é uma instrução que permite ao código executar diferentes ações dependendo de se uma condição é verdadeira ou falsa. Em português, "if" significa “se”.
Portanto, quando usamos "if" em programação, estamos basicamente dizendo ao computador: “Se esta condição for verdadeira, faça isso. Caso contrário, faça aquilo”.
Acompanhe a leitura e saiba mais sobre esse e outros assuntos, ou visite nosso blog.
Conteúdo
O que é If JavaScript?
A estrutura "if" ajuda o programa a decidir qual sugestão dar. Imagine que você está construindo um site que dá sugestões de roupas com base na temperatura. Se estiver muito frio, portanto, você pode sugerir um casaco. Se estiver quente, então, talvez uma camiseta seja mais apropriada.
Por exemplo:
let temperatura = 25; // Esta é a temperatura em graus Celsius
if (temperatura < 10) {
console.log("Está muito frio, use um casaco!");
} else if (temperatura >= 10 && temperatura < 25) {
console.log("Está fresco, uma camisa de manga longa está boa.");
} else {
console.log("Está quente, use uma camiseta!");
}No exemplo acima:
A temperatura é definida como 25 graus.
A primeira condição (temperatura < 10) verifica se está muito frio. Se for verdade, sugere um casaco.
Se a primeira condição não for verdadeira, passa para a segunda (temperatura >= 10 && temperatura < 25). Esta verifica se está fresco, e sugere uma camisa de manga longa se for verdade.
Se nenhuma das condições anteriores for verdadeira, o programa simplesmente sugere uma camiseta.
Para testar o código acima, você pode copiá-lo e colá-lo no console do navegador ou em qualquer ambiente de desenvolvimento JavaScript. Experimente mudar o valor da temperatura e veja as diferentes mensagens que o programa exibe!
Esperamos, então, que este exemplo tenha ajudado a esclarecer o conceito de "if" na programação. No próximo tópico, vamos mergulhar mais fundo na sintaxe e estrutura do "if" em JavaScript!
Sintaxe e estrutura do if JavaScript
A estrutura condicional "if" é uma das ferramentas mais básicas e essenciais em qualquer linguagem de programação. Ela permite, assim, que seu código tome decisões com base em condições. No JavaScript, o uso dessa estrutura é bastante intuitivo e segue uma lógica semelhante ao nosso modo de pensar. Vamos entender isso passo a passo.
Sintaxe básica
Aqui está a estrutura básica de um `if`:
if (condição) {
// código a ser executado se a condição for verdadeira
}Nesse esquema:
Condição: É a expressão que será avaliada. Se essa expressão for `true` (verdadeira), o código dentro das chaves `{ }` será executado.
Por exemplo:
let chuva = true;
if (chuva) {
console.log("Melhor levar um guarda-chuva!");
}Neste caso, se a variável `chuva` for verdadeira (ou seja, se estiver chovendo), a mensagem "Melhor levar um guarda-chuva!" será exibida no console.
If-Else
E se quisermos ter uma ação alternativa para quando a condição não for atendida? Aí entra o `else`:
if (condição) {
// código se a condição for verdadeira
} else {
// código se a condição for falsa
}Por exemplo:
let chuva = false;
if (chuva) {
console.log("Melhor levar um guarda-chuva!");
} else {
console.log("Pode deixar o guarda-chuva em casa!");
}Nesse caso, como `chuva` é falso, a mensagem "Pode deixar o guarda-chuva em casa!" será mostrada.
Else If
E se tivermos múltiplas condições a verificar? O `else if` entra em cena:
if (condição1) {
// código se a condição1 for verdadeira
} else if (condição2) {
// código se a condição2 for verdadeira
} else {
// código se nenhuma das condições anteriores for verdadeira
}Por exemplo:
let temperatura = 25;
if (temperatura < 20) {
console.log("Está um pouco frio.");
} else if (temperatura < 30) {
console.log("Clima agradável!");
} else {
console.log("Está bastante quente!");
}Neste caso, como a temperatura é 25, a mensagem "Clima agradável!" será exibida.
A estrutura "if" permite que o código reaja de maneira diferente dependendo de certas condições, tornando os programas dinâmicos e interativos. A melhor forma de aprender é praticar, então tente criar suas próprias condições e veja o que acontece!
Operadores de comparação e lógicos
Ao trabalharmos com estruturas condicionais, como o "if", é fundamental entender os operadores que nos ajudam a criar condições. Esses operadores nos permitem fazer comparações entre valores e tomar decisões baseadas em suas relações.
1. Operadores de comparação
Os operadores de comparação comparam dois valores e retornam um valor booleano: verdadeiro (`true`) ou falso (`false`).
`==` (Igualdade)
Compara se os valores são iguais, mas não necessariamente do mesmo tipo.
let numero = '5';
if(numero == 5) {
console.log("Os valores são iguais!");
}Neste exemplo, mesmo `numero` sendo uma string, a comparação é verdadeira.
`===` (Estrita Igualdade)
Compara se os valores e seus tipos são iguais.
let numero = '5';
if(numero === 5) {
console.log("Os valores e os tipos são iguais!");
} else {
console.log("Os valores ou os tipos são diferentes!");
}Aqui, a condição será falsa, pois o tipo de `numero` é string e o tipo do número 5 é number.
`!=` (Desigualdade)
Verifica se os valores são diferentes.
let cor = 'verde';
if(cor != 'azul') {
console.log("A cor não é azul.");
}`!==` (Estrita Desigualdade)
Compara se os valores e seus tipos são diferentes.
let idade = '18';
if(idade !== 18) {
console.log("A idade não é igual a 18 ou os tipos são diferentes.");
}`>` (Maior que), `<` (Menor que), `>=` (Maior ou igual a), `<=` (Menor ou igual a)
Utilizados para comparações numéricas.
let pontuacao = 90;
if(pontuacao >= 100) {
console.log("Você alcançou a pontuação máxima!");
} else {
console.log("Continue tentando!");
}2. Operadores Lógicos
Os operadores lógicos nos permitem fazer condições mais complexas, combinando diversas comparações.
`&&` (E)
Todas as condições precisam ser verdadeiras para que o resultado seja verdadeiro.
let idade = 25;
let possuiCarteira = true;
if(idade >= 18 && possuiCarteira) {
console.log("Você pode dirigir!");
}`||` (OU)
Pelo menos uma das condições precisa ser verdadeira para que o resultado seja verdadeiro.
let gostaDeCafe = true;
let gostaDeCha = false;
if(gostaDeCafe || gostaDeCha) {
console.log("Você gosta de alguma bebida quente!");
}`!` (NÃO)
Inverte o valor booleano.
let gostaDePepino = false;
if(!gostaDePepino) {
console.log("Você não gosta de pepino.");
}Para testar os códigos, você pode usar qualquer ambiente de desenvolvimento JavaScript, como o console do navegador, um editor de código como o VS Code ou plataformas online como o JSFiddle ou CodePen. Ao rodar os exemplos, você verá os resultados impressos na tela.
Considere, também, aprender algumas estruturas do Python, caso esteja implementando aplicações com essa linguagem.
Ternário: uma alternativa ao “if” JavaScript
Quando estamos programando, frequentemente nos deparamos com situações em que precisamos tomar decisões simples baseadas em uma condição. O operador ternário é uma ferramenta que nos permite fazer isso de uma maneira mais concisa, quando comparado ao tradicional `if-else`. Vamos entender melhor.
O operador ternário é uma forma compacta de executar um comando `if-else`. Chama-se “ternário” porque tem três partes:
- A condição a ser avaliada;
- O que fazer se a condição for verdadeira;
- O que fazer se a condição for falsa.
A estrutura geral se parece com isto, por exemplo:
condição ? açãoSeVerdadeiro : açãoSeFalso;Exemplo básico usando `if-else`
Vamos pegar um exemplo prático. Suponhamos que queremos verificar se um número é par ou ímpar, por exemplo:
let numero = 5;
let resultado;
if (numero % 2 === 0) {
resultado = "par";
} else {
resultado = "ímpar";
}
console.log(resultado); // O resultado será "ímpar"Usando o operador ternário
let numero = 5;
let resultado = numero % 2 === 0 ? "par" : "ímpar";
console.log(resultado); // O resultado será "ímpar"Como você pode ver, o operador ternário nos permitiu condensar o código, tornando-o mais direto e legível em situações simples.
Quando usar o operador ternário?
O operador ternário é ótimo para decisões simples, mas deve ser usado com cautela. Em situações onde há múltiplas condições ou a lógica é mais complexa, o uso do `if-else` tradicional (ou até mesmo `switch`) pode ser mais apropriado para manter o código legível.
Dica: Se você sente que seu operador ternário está ficando muito complicado ou difícil de ler, provavelmente é melhor optar por uma estrutura condicional mais extensa.
Testando em ambiente adequado
Para testar os códigos acima e brincar com o operador ternário, você pode usar qualquer navegador:
- Clique com o botão direito na página;
- Selecione “Inspecionar” ou “Inspecionar Elemento”;
- Vá para a aba “Console”;
- Cole o código e pressione Enter.
Você verá o resultado do código impresso no console, permitindo que você veja o operador ternário em ação.
O operador ternário, portanto, é uma ferramenta realmente útil para tornar seu código JavaScript mais conciso em situações de decisões simples. Use-o com sabedoria e sempre priorize a legibilidade do código!
Boas práticas ao usar “if” no JavaScript
Ao programar, é vital não só fazer algo funcionar, mas também garantir que o código seja legível e manutenível. Isso é especialmente verdadeiro quando se trata de estruturas condicionais como o "if".
Abaixo, abordaremos algumas boas práticas a serem consideradas.
1. Evitando aninhamentos excessivos
Uma prática comum, mas nem sempre benéfica, é aninhar muitos blocos "if". Isso pode tornar o código confuso. Considere, por exemplo:
if (usuarioLogado) {
if (usuario.temPermissao) {
if (!usuario.ultimoAcesso > 30) {
mostrarConteudo();
} else {
alert('Seu último acesso foi há muito tempo!');
}
} else {
alert('Usuário sem permissão!');
}
} else {
alert('Por favor, faça login!');
}Aqui, temos três níveis de aninhamento. Uma maneira de simplificar é usar retornos antecipados ou continuando a lógica sem entrar em níveis mais profundos:
if (!usuarioLogado) {
alert('Por favor, faça login!');
return;
}
if (!usuario.temPermissao) {
alert('Usuário sem permissão!');
return;
}
if (usuario.ultimoAcesso > 30) {
alert('Seu último acesso foi há muito tempo!');
return;
}
mostrarConteudo();Isso torna o código mais plano e, consequentemente, mais fácil de ler e manter.
2. Utilização de funções e modularização
Evite colocar muita lógica dentro de um único bloco "if". Se o bloco contiver muitas operações, considere mover essa lógica para uma função separada.
Por exemplo, se você tem:
if (usuario.ehValido()) {
let desconto = calcularDesconto(usuario.idade);
aplicarDesconto(desconto);
atualizarInterface();
// ... mais códigos
}
Você pode refatorar o bloco interno para:
if (usuario.ehValido()) {
aplicarBeneficiosDeUsuario(usuario);
}
function aplicarBeneficiosDeUsuario(usuario) {
let desconto = calcularDesconto(usuario.idade);
aplicarDesconto(desconto);
atualizarInterface();
// ... mais códigos
}Isso não apenas torna o código principal mais limpo, mas também torna a lógica reutilizável e testável.
Ao seguir essas boas práticas, portanto, seu código se tornará mais limpo, mais legível e mais fácil de manter. Lembre-se sempre de que o código é escrito tanto para máquinas quanto para humanos. Mantenha-o claro e compreensível para o benefício de todos os desenvolvedores que possam trabalhar nele no futuro!
“Switch”: uma alternativa em casos específicos
Ao trabalhar com JavaScript, muitas vezes nos deparamos com situações em que precisamos verificar múltiplas condições. Enquanto o "if" e o "else if" são extremamente úteis, eles podem se tornar verbosos e um pouco confusos em determinados contextos. É aí que o "switch" entra em cena como uma alternativa mais limpa.
O "switch" é uma estrutura condicional que permite verificar múltiplas condições (ou casos) de forma mais organizada.
Ele é especialmente útil quando se tem uma variável que pode ter muitos valores diferentes e você quer executar diferentes blocos de código com base nesses valores.
Sintaxe básica
Aqui está a estrutura básica de um "switch":
switch (expressão) {
case valor1:
// código a ser executado se expressão === valor1
break;
case valor2:
// código a ser executado se expressão === valor2
break;
default:
// código a ser executado se a expressão não for igual a nenhum dos valores acima
}Exemplo prático
Imagine que você está construindo um programa que fornece saudações com base no momento do dia:
let momentoDoDia = "tarde";
switch (momentoDoDia) {
case "manhã":
console.log("Bom dia!");
break;
case "tarde":
console.log("Boa tarde!");
break;
case "noite":
console.log("Boa noite!");
break;
default:
console.log("Olá!");
}Ao executar o código acima, o resultado seria “Boa tarde!”.
Por que usar o “break”?
O "break" é importante para garantir que, uma vez que um “case” corresponda e seu código seja executado, o programa saia do "switch" e não execute os “cases” subsequentes. Se você esquecer de incluir o “break“, todos os “cases” após o “case” correspondente também serão executados.
O bloco “default”
O “default” é opcional, mas é uma boa prática incluí-lo. Ele funciona como um “else” em uma estrutura "if", sendo executado quando nenhum dos "cases" anteriores corresponde.
O "switch" é uma ferramenta poderosa que ajuda a manter o código limpo e organizado quando se verifica múltiplas condições. Entretanto, é fundamental entender quando e como usá-lo adequadamente, evitando complicações desnecessárias e tornando seu código mais legível.
Conheça outras estruturas do JavaScript que possam ser úteis nos seus projetos futuros:
Conclusão
As estruturas condicionais, particularmente o "if", são pilares da programação, permitindo que os programas tomem decisões baseadas em diferentes condições. Assim como as decisões na vida real, a correta implementação de condições em programação determina a eficácia e eficiência de um programa.
Portanto, compreender completamente o “if” JavaScript, juntamente com as boas práticas associadas, é crucial para qualquer desenvolvedor que deseja escrever código limpo, legível e manutenível.
Leia também: Usando JavaScript .length para medir propriedades.
