JavaScript Logical Operators
Tags: javascript, html, codenewbie, node
Published: 2021-01-25 21:40:10

{% youtube 9QyZvAw0v4w %}

---
Logical operators are used to determining the logic between values. It is used between values of all types also, not only boolean.

The operators are:
- OR (`||`) operator,
- AND (`&&`) operator,
- NOT (`!`) operator.

---
### OR `||` Operator
The `||` operators are the two vertical line symbols.

Syntax:
```
result = a || b
```

The above expression means if either `a` or `b` is true, the result becomes true also.

See the table below:

|     a        |     b       |     result     |
|---------|---------|------------|
|    true    |     true   |      true       |
|    true    |    false   |      true       |
|    false   |    true    |       true      |
|    false   |    false   |       false     |

- Truthy values are `true`, `"strings"`, `1`, `2`, `numbers`, except `0`.
- Falsy values are `false`, `""`, `null`, `undefined`, `NaN`, and `0`.

```js
let a = true;
let b = false;
let x = 0;
let y = 5
let result;

result = a || b;
console.log(result); // true

result = x || y;
console.log(result); // 5
```

#### Multiple `||` Operators
The `||` operator finds the first truthy value from left to right to evaluate as the result.

Syntax:
```
result = value1 || value2 || value3 || ... ValueN;
```

See the example below:
```js
const result = null || 0 || "" || 5 || 10 || 20 || 30;
console.log(result); // 5
```
The values `null`, `0`, `''` are false, but the first true value is `5`.

That is `null || 0 || ""` gets skipped because they all false.

The evaluated result is:
```js
const result = 5 || 10 || 20 || 30;
// same as 
// const result = 5;
result; // 5
```

All other values get ignored since the first true value is found. 

> When values or expressions get ignored, it is called **short-circuit evaluation**.

#### OR `||` operators in conditional expressions
The `||` operators in conditional expressions can determine the first true value in advance.

```js
let num = Math.trunc(Math.random(34) * 3); // 0, 1, 2
console.log(num);
if (num && 1) {
    console.log('A true value is found.');
} else {
    console.log('It is all false!');
}
```

---
[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613668162316/G1zfmhxQd.png)](https://www.cssigniter.com/members/aff/go/belloosagienoah)

---
> The `trunc` function is not available in the older JavaScript engine. For older browsers, use the `floor` function instead. They both round down figures to the nearest whole number. `23.7` becomes `23`.

---
### AND `&&` Operator
The `&&` operators are the two ampersands symbols.

Syntax:
```
result = a && b
```

The above expression means both `a` and `b` must be true for the result to become true also.

 See the table below:

|     a     |     b     |     result     |
|-----------|-----------|----------------|
|   true    |   true    |      true      |
|   true    |   false   |      false     |
|   false   |   true    |      false     |
|   false   |   false   |      false     |

- Truthy values are `true`, `"strings"`, `1`, `2`, `numbers`, except `0`.
- Falsy values are `false`, `""`, `null`, `undefined`, `NaN`, and `0`.

```js
const a = true;
const b = false;
const x = 0;
const y = 5
let result;

result = a && b;
console.log(result); // false

result = x && y;
console.log(result); // 0
```

#### Multiple *&&* Operators
The `&&` operator finds the first falsy value from left to right to evaluate as the result.

Syntax:
```
result = value1 && value2 && value3 && ... ValueN;
```

See the example below:
```js
const result = null && 0 && "" && 5 && 10 && 20 && 30;
console.log(result); // null
```

`null` is the first false value found by the engine. Therefore all other values get ignored. 

> When values or expressions get ignored, it is called **short-circuit evaluation**.

#### AND `&&` operators in conditional expressions
The `&&` operators in conditional expressions can determine the first false value in advance.

```js
let num = Math.trunc(Math.random(34) * 3); // 0, 1, 2
console.log(num);
if (num && 1) {
    console.log('A false value is found.');
} else {
    console.log('It is all true!');
}
```

---
### NOT (`!`) Operator
The `!` (exclamation sign) operator reverses any value.

Syntax:
```
result = !a;
```
See the table below:

|     a     |     result     |
|-----------|----------------|
|   true    |      false     |
|   false   |      true      |

It reverses boolean types.

See the example below:
```js
const result = !true;
console.log(result); // false
```

It also converts any data type to a boolean.

See the example below:

```js
const result = !45; // try null, undefined, 0, NaN, "string", etc
console.log(result); // false
```

A double NOT `!!` is sometimes used for converting a value to its actual boolean:

```js
const result = !!45; // try null, undefined, 0, NaN, "string", etc
console.log(result); // true
```

---
### Mixed Logical Operators
Logical operators in the same expression are evaluated based on their precedence level. Higher precedence level operators are addressed first.

See the example below:

| Logical Operators |    Precedence  |
|-------------------|----------------|
|   NOT `!`             |         17     |
|   AND `&&`           |         7      |
|   OR            |         6      |

In the table, 
- the highest precedence operator is `!`.
- the lowest precedence operator is `||`.

See the example below:

```js
const age = 0 && 10 || 45;
console.log(age); // 45
```

The operator, `&&` has higher precedence than the `||` operator, meaning `&&` gets evaluated first.

```js
const age = (0 && 10) || 28; // (0 && 10) = 0
console.log(age); // 28
```

### Logical assignment
We have the **logical OR assignment**, **logical AND assignment**, and **logical Nullish Coalescing assignment**. These operators were introduced in ECMAScript 2021.

The Nullish Coalescing operator needs to be discussed in the [next article](https://dev.to/bello/nullish-coalescing-operator-3no8) before considering the Nullish Coalescing assignment.

#### Logical OR assignment
The syntax of logical and operator is shown below:

```js
a ||= b // a || (a = b)
```

The syntax above shows that if `a` is falsy, `a = b`, otherwise `b`.

See the example below:

```js
let a = 0;
let b = 10;
const result = a ||= b;
console.log(result); // 10
```

The example above is the same as below:

```js
let a = 0;
let b = 10;
a ||= b; 
console.log(a); 
```

Recall: Falsy (`false`) values are `0`, `null`, `undefined`, `null`, `NaN`, etc. All other numbers are `true` values.

#### Logical OR assignment
The syntax of logical and operator is shown below:

```js
a ||= b // a || (a = b)
```

The syntax above shows that if `a` is truth, `a = b`, otherwise `a`.

See the example below:

```js
let a = 0;
let b = 10;
const result = a &&= b;
console.log(result); // 0
```

The example above is the same as below:

```js
let a = 0;
let b = 10;
a &&= b; 
console.log(a);
```

Recall: Falsy (`false`) values are `0`, `null`, `undefined`, `null`, `NaN`, etc. All other numbers are `true` values.


**Happy Coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>