Operadores Lógicos - E ( && ), OU ( II ) e de negação ( ! )
Published: 2021-03-16 22:38:33

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) 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.

```js
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.

```js
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.

```js
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.

```js
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:

```js
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.

```js
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.

```js
let isUserLoggedIn = false

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

// Output
Favor efetuar o login
```

Vou deixar o link para a documentação da MDN sobre [operadores lógicos e de negação](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators#operadores_logicos)

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)