Coercion In Javascript

Javascript utilizes implicit type coercion. Understanding this concept is the difference in writing fluid code or having a debugging mess. In this article I will explain what coercion is, how it behaves with different operators, difference between == and ===, truthy/flasy values, and logical operators. Let's jump in so you can start taking advantage of this javascript magic.

What is Coercion?

Coercion is basically the converting of one data type to another. Javascript has implicit coercion. This means that it automatically changes data types depending on the situation. These situations range from adding/subtracting, if statements, and when comparing different data types. This saves us from having to convert the data type manually and then performing these operations. Just make sure you know what converts and when!

== or ===

The easiest way to see coercion in action is with the == or === operators. This is a way you can manually control javascript implicit coercion. When you use the == operator, javascript will change the data types to match and then compare the two values. When using the === Javascript will not change the data types and will compare the values just like they are .

let x = 3
let y = ‘3’
x==y //return true 
x===y //return false

+ or -

Javascript will change types when using both the + or - operator. Javascript will behave differently depending on which operator you use. For example, when you add a string and a number together Javascript will automatically convert the number type to a string type and then concatenate (add) the two strings together. When subtracting a string and a number Javascript will change the string data type to a number and then subtract and return a number.

let x = 3
let y = ‘3’
x+y //return ’33’
x-y //return 0

Boolean Coercion

This type of coercion takes place with logical operators and if statements. In these situations Javascript doesn’t change the type to match like above, but instead converts to truth or false. Javascript does this by utilizing truthy and falsy values. Truthy values are anything that is NOT 0, 0n, -0, “”, null , undefined, and NaN.

let x = 0
let y = “zero”
if(x) {console.log(‘hi’)} // will not console log anything because 0 is a falsy value and converts x to false in the if statement.

if(y){console.log(‘it worked!’)} // y is a truthy value. Y is converted to true in the if statement.

Logical Operators

Logical Operators in javascript works a little different than some other programming languages. When you use a logical operator, javascript will return one of the values passed into the operator and NOT true or false. To understand how this works make sure you understand truthy and falsy values.

|| (or operator)

This operator will always check if the first value is true. If the first value is true it will return it. If it is false it will always return the second value.

let x = 0
let y = ‘zero’
x||y //returns ‘zero’ first value is false so will return the second value
y||x //returns ‘zero’ first value is truth so will return first value

&& (and operator)

With the && operator javascript will check to see if any of the values are falsy. If any value is falsy javascript will return the first falsy value. If both values are true then javascript will return the second value.

let x = 0
let y = ‘zero’
let z = undefined
let a = ‘hello’
x&&z //returns 0. 0 is falsy so javascript returns the first falsy value.
y&&z //returns undefined. z is false so javascript returns the first falsy value.
y&&a //returns ‘hello’. both values are truthy so javascript returns the second value. 

I hope this helps you get a better grasp on implicit coercion in Javascript. Take your time to read this over and let the topic fully sink in. Bookmark it and use it as a reference when studying for technical interviews!