Operadores Lógicos - E ( && ), OU ( II ) e de negação ( ! )

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre os operadores lógicos: E (AND) que utilizaremos &&, o operador lógico OU (OR) que utilizaremos || e o operador de negação (Not) que utilizaremos !.

Os operadores lógicos servem para combinar verificações.

E (AND) - `&&`

O operador lógico E que em inglês se chama AND, é utilizado usando dois &&.

Na utilização deste operador, iremos realizar as verificações e se TODAS resultarem em true, o retorno de toda a expressão será true, e com isso, todo o bloco de código dentro do if será executado.

const senha = 'oi123456'

if (senha.length >= 5 && senha.includes('4')) {
 console.log('Senha forte!')
} else {
 console.log('Senha fraca!')
}

// Output
Senha forte!

No exemplo acima, foram feita duas verificações na expressão dentro dos parênteses, a primeira foi a expressão antes do símbolo do operador lógico, que seria senha.length >= 5, verificando se a senha possui pelo menos 5 caracteres. Como essa verificação resultou em true, passou para a segunda verificação que foi senha.includes('4'), verificando se o 4 estava presente na senha, que também retornou em true, com isso, toda a expressão resultou em true e o bloco de código dentro do if foi executado, e o código do else, foi ignorado.

Caso a expressão usada tivesse somente uma das condições resultando em true, toda a expressão resultaria em false e o bloco de código do else seria executado e o bloco do if seria ignorado. Conforme exemplo abaixo.

const senha = 'oi7890'

if (senha.length >= 5 && senha.includes('4')) {
 console.log('Senha forte!')
} else {
 console.log('Senha fraca!')
}

// Output
Senha fraca!

OU (OR) - `||`

O operador lógico OU que em inglês se chama OR é utilizado usando dois ||

Na utilização deste operador, iremos realizar as verificações e se PELO MENOS UMA DELAS resultar em true, o retorno de toda a expressão será true, e com isso, todo o bloco de código dentro do if será executado.

const senha = 'oi4'

if (senha.length >= 5 || senha.includes('4')) {
 console.log('Senha forte!')
} else {
 console.log('Senha fraca!')
}

// Output
Senha forte!

No exemplo acima, foram feita duas verificações na expressão dentro dos parênteses, a primeira foi a expressão antes do símbolo do operador lógico, que seria senha.length >= 5, verificando se a senha possui pelo menos 5 caracteres. Como essa verificação resultou em false, passou para a segunda parte da verificação que é senha.includes('4'), verificando se a senha contém o 4, como essa verificação resultou em true, o bloco de código do if, foi executado e do else foi ignorado.

No caso do uso do operador lógico OR, somente irá cair no else, se nenhuma das duas condições resultar em true, conforme exemplo abaixo.

const senha = 'oi4'

if (senha.length >= 5 || senha.includes('5')) {
 console.log('Senha forte!')
} else {
 console.log('Senha fraca!')
}

// Output
Senha fraca!

Existem ainda a possibilidade de termos verificações utilizando os dois operadores lógicos AND - && e OR - || na mesma expressão verificada no else if abaixo.

Exemplo:

const senha = 'oi12345'
if (senha.length >= 12 && senha.includes('1')) {
} else if (senha.length >= 8 || senha.includes('1') && senha.length >= 5) {
  console.log('Senha forte')
} else {
  console.log('Senha fraca, a senha deve ter no mínimo 8 caracteres')
}

// Output
Senha forte

Devemos interpretar esse else if da seguinte forma:

As operações antes do operador lógico && deve ser tradada como uma expressão e a depois do && como outra expressão.

Primeiro verificamos se uma dessas condições senha.length >= 8 || senha.includes('1') resulta em true, como senha.length >= 8 resulta em false, mas senha.includes('1'), resulta em true, toda essa primeira expressão resulta em true e com isso, passamos para a segunda parte da verificação, que é o que está após o &&.

Como senha.length >= 5 retorna em true, toda expressão dos parênteses resulta em true e o bloco de código do else if será executado.

Operador de Negação (NOT) - `!`

O operador not, operador de negação, é utilizado através do sinal !.

Normalmente verificamos uma condição esperando que o retorno seja true, mas em algum momento, podemos executar uma verificação esperando o retorno false.

Quando utilizamos o operador de negação na frente de um Boolean, esse operador irá inverter o valor.

Se o operador for inserido antes de uma operação que resulte em true, ele irá trocar esse true para false e vice-versa.

console.log(true) // true
console.log(false) // false

console.log(!true) // false
console.log(!true) // true

Abaixo irei declarar uma variável para saber se o usuário está logado, esta variável irá receber false como valor.

Criarei um if onde preciso executar o bloco de código somente no caso do usuário não estiver logado.

Para isso, basta negarmos a afirmação, com o operador not !.

Isso acontece porque no if, o código só é executado quando a expressão verificada (dentro dos parênteses) resulta em true.

Se não utilizarmos o operador not, essa expressão irá retornar em false, pois ela foi criada com esse valor.

Quando inserimos o not, a expressão resultará em true.

O fato de utilizarmos o operador not, não faz com que o valor da variável seja trocado, ela permanecerá valendo false, nós apenas estamos trocando o output da expressão dentro dos parênteses.

let isUserLoggedIn = false

if (!isUserLoggedIn) {
  console.log('Favor efetuar o login')
} else {
  console.log('Usuário já logado')
}

// Output
Favor efetuar o login