JavaScript Type Coercion
Tags: javascript, node, codenewbie, html
Published: 2021-01-23 22:02:42

{% youtube 3i9bxusu3c0 %}

---
*Type coercion* is the automatic data type conversion done by JavaScript.

---
### Operators, Operands, Unary, and Binary

#### Operators
The following are some operators in JavaScript:
- Addition `+`;
- Subtraction `-`;
- Multiplication `*`;
- Division `/`;
- Remainder `%`;
- Exponentiation `**`;

Check out other operators and their precedence on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table).

#### Operand
Operands are arguments, variables, numbers, strings, boolean values before or after an operator.

```js
const num1 = true;
const num2 = +num1;
console.log(num2); // 1
```

#### Unary
An operator is unary if it has a single operand. The unary operator above is `+` where `const num2 = +num1`.

A unary operator converts a number in quotation marks to a number.

Note: `7` is the same as `+7`.

```js
const toNum = +'23';
toNum; // 23
console.log(typeof toNum); // number

const str = ""; 
const toNumb = +str; // Number(str)
toNumb; // 0
console.log(typeof toNumb); // number
```

The unary operator does the same thing as `Number(...)` but is shorter.

#### Binary
An operator is binary if there are two operands around it.

```js
const num = 2 ** 3;
console.log(num); // 8 => 2 * 2 * 2
```

#### String conversion
Numbers are converted to string by JavaScript automatically whenever a binary operator, `+` is used. Numbers in quotation marks add up (**concatenate**) to a number, which results in a string.

See the example below:
```js
console.log('1' + 2); // "12"
console.log(2 + '1'); // "21"
```

Any operand number in quotation marks converts other numbers to a string.

See the example below:
```js
console.log(2 + 2 + '1'); // "41" 
```
JavaScript evaluates an expression from left to right.

If the first operand is a string, then other operands will be converted to strings.

See the example below:
```js
console.log('1' + 2 + 2); // "122" => '1' + '2' + '2'
```

#### Number conversion
Numbers in quotation marks are converted to numbers when a unary like `+` operator is used.

Let's add up one or more numbers in quotation marks to a number by converting them to numbers with the unary operator.

```js
const garrot = "4";
const apple = "10";
const melon = "2";

const sum = +garrot + +apple + +melon;
console.log(sum); // 16 

10 - "2"; // 8 => 10 - +"2" 
10 / "2"; // 5 => 10 / +"2"
```

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

---
### Comparison operators with Unary Operators
The comparison operators before **ES6+** are listed below:
- Greater than `>`;
- Greater than or equal to `>=`;
- Less than `<`;
- Less than or equal to `<=`;
- Double equals `==`;

```js
const a = 5;
const b = 7;

b > a; // true 
```

When comparing a number with a value of a different type (string or boolean), JavaScript converts the values to numbers. 

```js
const num = 5;
const str = '7';

str > num; // true => +str > num

const isTrue = true;
const numb = 4;

isTrue > numb // false => +isTrue > numb; +isTrue = 1
```

The weird conversion occurs because JavaScript prepends a `+` unary operator to it.

Strict equality comparison operators without Unary Operators
Strict equality was introduced in **ES6** as shown below:
- Triple equals `===`;
- Not double equals `!==`;
- Not triple equals `!===`;

Strict equality comparison operators remove any unary operator in an expression. That is checks and compares both the type and value if they are the same.

Without strict operator
```js
7 == '7'; // true => +7 == +'7'
1 == true; // true +1 == +true
0 == false; // true +0 == +false
```

With strict operator
```js
7 === '7' // false => 7 == '7'
1 === true // false => 1 == true
0 === false // false => 0 == false
```

---
### Comparison with null and undefined
`null` and `undefined` are equal to each other (no strict equality).

```js
null == undefined // true
null == 0 // false
```

With a strict equality operator, it's false.

```js
null === undefined // false
``` 

The values `null` and `0` equals when either `>=` or `<=` is used for comparison.

```js
null >= 0 // true
null <= 0 // true
```

> The operators, `!=` and `!==` reverse the value from `true` to `false` or from `false` to `true`.

---
### Conclusion
Use strict comparison operators more often in an expression.

**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>