JavaScript Type Coercion

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.

Operand

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

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.

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.

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:

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:

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:

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.

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"

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 ==;

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.

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

7 == '7'; // true => +7 == +'7'
1 == true; // true +1 == +true
0 == false; // true +0 == +false

With strict operator

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).

null == undefined // true
null == 0 // false

With a strict equality operator, it's false.

null === undefined // false

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

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

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.