Existem quatro operadores lógicos em JavaScript: || (OU), && (E), ! (NÃO), ?? (Coalescência Nula). Aqui cobrimos os três primeiros, o ?? operador está no próximo artigo.
Embora sejam chamados de “lógicos”, podem ser aplicados a valores de qualquer tipo, não apenas booleanos. O resultado também pode ser de qualquer tipo.
Vamos ver os detalhes.
O operador “OR” é representado por dois símbolos de linha vertical:
resultado = uma || b;
Na programação clássica, o OR lógico destina-se a manipular apenas valores booleanos. Se algum de seus argumentos for true , ele retorna true , caso contrário, retorna false .
Em JavaScript, o operador é um pouco mais complicado e poderoso. Mas primeiro, vamos ver o que acontece com os valores booleanos.
Existem quatro combinações lógicas possíveis:
alerta( verdadeiro || verdadeiro ); // verdadeiro alerta(falso || verdadeiro); // verdadeiro alerta(verdadeiro || falso); // verdadeiro alerta(falso || falso); // falso
Como podemos ver, o resultado é sempre true , exceto no caso em que ambos os operandos são false .
Se um operando não for booleano, ele será convertido em booleano para avaliação.
Por exemplo, o número 1 é tratado como true , o número 0 como false :
if (1 || 0) { // funciona exatamente como if( true || false )
alerta('verdadeiro!');
} Na maioria das vezes, OU || é usado em uma instrução if para testar se alguma das condições fornecidas é true .
Por exemplo:
deixe hora = 9;
if (hora < 10 || hora > 18) {
alert('O escritório está fechado.');
}Podemos passar mais condições:
deixe hora = 12;
deixe isWeekend = true;
if (hora < 10 || hora > 18 || isWeekend) {
alert('O escritório está fechado.'); //é fim de semana
}A lógica descrita acima é um tanto clássica. Agora, vamos trazer os recursos “extras” do JavaScript.
O algoritmo estendido funciona da seguinte maneira.
Dados vários valores OR:
resultado = valor1 || valor2 || valor3;
O OU || operador faz o seguinte:
Avalia operandos da esquerda para a direita.
Para cada operando, converte-o em booleano. Se o resultado for true , para e retorna o valor original desse operando.
Se todos os operandos foram avaliados (ou seja, todos eram false ), retorna o último operando.
Um valor é retornado em sua forma original, sem conversão.
Em outras palavras, uma cadeia de OR || retorna o primeiro valor verdadeiro ou o último se nenhum valor verdadeiro for encontrado.
Por exemplo:
alerta( 1 || 0 ); // 1 (1 é verdadeiro) alerta(nulo || 1); // 1 (1 é o primeiro valor verdadeiro) alerta(nulo || 0 || 1); // 1 (o primeiro valor verdadeiro) alerta( indefinido || nulo || 0 ); // 0 (todos falsos, retorna o último valor)
Isso leva a um uso interessante em comparação com um “OU puro, clássico, somente booleano”.
Obtendo o primeiro valor verdadeiro de uma lista de variáveis ou expressões.
Por exemplo, temos as variáveis firstName , lastName e nickName , todas opcionais (ou seja, podem ser indefinidas ou ter valores falsos).
Vamos usar OU || para escolher aquele que contém os dados e mostrá-los (ou "Anonymous" se nada estiver definido):
deixe primeiroNome = ""; deixe últimoNome = ""; deixe apelido = "SuperCoder"; alerta(nome || sobrenome || apelido || "Anônimo"); // SuperCodificador
Se todas as variáveis fossem falsas, "Anonymous" apareceria.
Avaliação de curto-circuito.
Outra característica do OR || operador é a chamada avaliação de “curto-circuito”.
Isso significa que || processa seus argumentos até que o primeiro valor verdadeiro seja alcançado, e então o valor é retornado imediatamente, sem sequer tocar no outro argumento.
A importância deste recurso torna-se óbvia se um operando não for apenas um valor, mas uma expressão com um efeito colateral, como uma atribuição de variável ou uma chamada de função.
No exemplo abaixo, apenas a segunda mensagem é impressa:
verdade || alerta("não impresso");
falso || alerta("impresso"); Na primeira linha, o OR || O operador interrompe a avaliação imediatamente ao ver true , portanto o alert não é executado.
Às vezes, as pessoas usam esse recurso para executar comandos apenas se a condição à esquerda for falsa.
O operador AND é representado por dois e comerciais && :
resultado = a && b;
Na programação clássica, AND retorna true se ambos os operandos forem verdadeiros e false caso contrário:
alerta(verdadeiro && verdadeiro); // verdadeiro alerta(falso && verdadeiro); // falso alerta(verdadeiro && falso); // falso alerta(falso && falso); // falso
Um exemplo com if :
deixe hora = 12;
deixe minuto = 30;
if (hora == 12 && minuto == 30) {
alerta('São 12h30');
}Assim como com OR, qualquer valor é permitido como operando de AND:
if (1 && 0) { // avaliado como verdadeiro && falso
alert("não vai funcionar porque o resultado é falso");
}Dados vários valores AND:
resultado = valor1 && valor2 && valor3;
O operador AND && faz o seguinte:
Avalia operandos da esquerda para a direita.
Para cada operando, converte-o em booleano. Se o resultado for false , para e retorna o valor original desse operando.
Se todos os operandos foram avaliados (ou seja, todos foram verdadeiros), retorna o último operando.
Em outras palavras, AND retorna o primeiro valor falso ou o último valor se nenhum for encontrado.
As regras acima são semelhantes a OR. A diferença é que AND retorna o primeiro valor falso enquanto OR retorna o primeiro valor verdadeiro .
Exemplos:
// se o primeiro operando for verdadeiro, // AND retorna o segundo operando: alerta( 1 && 0 ); //0 alerta( 1 && 5 ); //5 // se o primeiro operando for falso, //E retorna. O segundo operando é ignorado alerta(nulo && 5); // nulo alert(0 && "não importa o que aconteça"); //0
Também podemos passar vários valores seguidos. Veja como o primeiro falso é retornado:
alerta( 1 && 2 && nulo && 3 ); // nulo
Quando todos os valores são verdadeiros, o último valor é retornado:
alerta( 1 && 2 && 3 ); //3, o último
A precedência de AND && é maior que OR ||
A precedência do operador AND && é maior que OR || .
Portanto, o código a && b || c && d é essencialmente o mesmo que se as expressões && estivessem entre parênteses: (a && b) || (c && d) .
Não substitua if por || ou &&
Às vezes, as pessoas usam o operador AND && como uma “maneira mais curta de escrever if ”.
Por exemplo:
seja x = 1; (x > 0) && alerta( 'Maior que zero!' );
A ação na parte direita de && seria executada somente se a avaliação a alcançasse. Isto é, somente se (x > 0) for verdadeiro.
Então, basicamente temos um análogo para:
seja x = 1; if (x > 0) alert( 'Maior que zero!' );
Embora a variante com && pareça mais curta, if mais óbvia e tende a ser um pouco mais legível. Portanto, recomendamos usar cada construção para seu propósito: usar if se quisermos if e usar && se quisermos AND.
O operador booleano NOT é representado por um sinal de exclamação ! .
A sintaxe é bem simples:
resultado = !valor;
O operador aceita um único argumento e faz o seguinte:
Converte o operando para o tipo booleano: true/false .
Retorna o valor inverso.
Por exemplo:
alerta(!verdadeiro); // falso alerta( !0 ); // verdadeiro
Um duplo NÃO !! às vezes é usado para converter um valor para o tipo booleano:
alert( !!"string não vazia" ); // verdadeiro alerta( !!nulo ); // falso
Ou seja, o primeiro NOT converte o valor para booleano e retorna o inverso, e o segundo NOT inverte novamente. No final, temos uma conversão simples de valor para booleano.
Há uma maneira um pouco mais detalhada de fazer a mesma coisa – uma função Boolean integrada:
alert(Boolean("string não vazia") ); // verdadeiro
alerta(Booleano(nulo)); // falso A precedência de NOT ! é o mais alto de todos os operadores lógicos, portanto sempre é executado primeiro, antes de && ou || .
importância: 5
Qual será a saída do código abaixo?
alerta(nulo || 2 || indefinido);
A resposta é 2 , esse é o primeiro valor verdadeiro.
alerta(nulo || 2 || indefinido);
importância: 3
Qual será a saída do código abaixo?
alerta( alerta(1) || 2 || alerta(3) );
A resposta: primeiro 1 , depois 2 .
alerta( alerta(1) || 2 || alerta(3) );
A chamada para alert não retorna um valor. Ou, em outras palavras, retorna undefined .
O primeiro OU || avalia seu operando esquerdo alert(1) . Isso mostra a primeira mensagem com 1 .
O alert retorna undefined , então OR passa para o segundo operando em busca de um valor verdadeiro.
O segundo operando 2 é verdadeiro, então a execução é interrompida, 2 é retornado e mostrado pelo alerta externo.
Não haverá 3 , pois a avaliação não atinge alert(3) .
importância: 5
O que esse código vai mostrar?
alerta(1 && nulo && 2);
A resposta: null , porque é o primeiro valor falso da lista.
alerta(1 && nulo && 2);
importância: 3
O que esse código mostrará?
alerta( alerta(1) && alerta(2) );
A resposta: 1 e depois undefined .
alerta( alerta(1) && alerta(2) );
A chamada para alert retorna undefined (apenas mostra uma mensagem, portanto não há retorno significativo).
Por causa disso, && avalia o operando esquerdo (saídas 1 ) e para imediatamente, porque undefined é um valor falso. E && procura um valor falso e o retorna, então está feito.
importância: 5
Qual será o resultado?
alerta(nulo || 2 && 3 || 4 );
A resposta: 3 .
alerta(nulo || 2 && 3 || 4 );
A precedência de AND && é maior que || , então ele é executado primeiro.
O resultado de 2 && 3 = 3 , então a expressão se torna:
nulo || 3 || 4
Agora o resultado é o primeiro valor verdadeiro: 3 .
importância: 3
Escreva uma condição if para verificar se age está entre 14 e 90 , inclusive.
“Inclusivamente” significa que age pode atingir os 14 ou 90 .
if (idade >= 14 && idade <= 90)
importância: 3
Escreva uma condição if para verificar se age NÃO está entre 14 e 90 , inclusive.
Crie duas variantes: a primeira usando NOT ! , o segundo – sem ele.
A primeira variante:
if (!(idade >= 14 && idade <= 90))
A segunda variante:
se (idade <14 || idade > 90)
importância: 5
Quais desses alert serão executados?
Quais serão os resultados das expressões dentro de if(...) ?
if (-1 || 0) alerta( 'primeiro' ); if (-1 && 0) alert( 'segundo' ); if (nulo || -1 && 1) alerta( 'terceiro' );
A resposta: o primeiro e o terceiro serão executados.
Detalhes:
//Executa. // O resultado de -1 || 0 = -1, verdade if (-1 || 0) alerta( 'primeiro' ); //Não roda // -1 && 0 = 0, falso if (-1 && 0) alert( 'segundo' ); //Executa // O operador && tem uma precedência maior que || // então -1 && 1 é executado primeiro, nos dando a cadeia: //nulo || -1 && 1 -> nulo || 1 -> 1 if (nulo || -1 && 1) alerta( 'terceiro' );
importância: 3
Escreva o código que solicita um login com prompt .
Se o visitante digitar "Admin" , prompt uma senha, se a entrada for uma linha vazia ou Esc – mostre “Cancelado”, se for outra string – então mostre “Não te conheço”.
A senha é verificada da seguinte forma:
Se for igual a “TheMaster”, mostre “Welcome!”,
Outra string – mostre “Senha errada”,
Para uma string vazia ou entrada cancelada, mostre “Cancelado”
O esquema:
Por favor, use blocos if aninhados. Cuidado com a legibilidade geral do código.
Dica: passar uma entrada vazia para um prompt retorna uma string vazia '' . Pressionar ESC durante um prompt retorna null .
Execute a demonstração
deixe userName = prompt("Quem está aí?", '');
if (nomedeusuário === 'Administrador') {
deixe passar = prompt('Senha?', '');
if (pass === 'OMestre') {
alerta('Bem-vindo!');
} else if (pass === '' || pass === null) {
alerta('Cancelado');
} outro {
alert('Senha errada');
}
} else if (userName === '' || userName === null) {
alerta('Cancelado');
} outro {
alert("Eu não te conheço");
} Observe os recuos verticais dentro dos blocos if . Eles não são tecnicamente obrigatórios, mas tornam o código mais legível.