DEV Community

Cover image for JavaScript Type Coercion
Bello Osagie
Bello Osagie

Posted on • Edited on

JavaScript Type Coercion

#javascript #html #node #codenewbie

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

See the example below:

console.log(2 + 2 + '1'); // "41"
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

image.png

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

With strict operator

7 === '7' // false => 7 == '7'
1 === true // false => 1 == true
0 === false // false => 0 == false
Enter fullscreen mode Exit fullscreen mode

Comparison with null and undefined

null and undefined are equal to each other (no strict equality).

null == undefined // true
null == 0 // false
Enter fullscreen mode Exit fullscreen mode

With a strict equality operator, it's false.

null === undefined // false
Enter fullscreen mode Exit fullscreen mode

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

null >= 0 // true
null <= 0 // true
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (0)