Type Conversion and Coercion in Javascript💫.

Asad Khan — Thu, 01 Sep 2022 15:44:16 +0000

Conversion of one datatype to another in any programming language is a very crucial thing to know.
There are two ways in Javascript by which one datatype is converted into another.

Type conversion (Explicit-Manual).👦🏼
Type coercion (Implicit-Automatic).💻

Type Conversion 👦🏼

Type conversion is a method to convert variable of one datatype into another datatype explicitly.

let a = "1";
console.log(typeof a)//string
a = Number(a);
console.log(typeof b);//number

In the above example we explicitly converted the "a" variable of datatype string into datatype of number using Number().

Since value of the "a" variable in the first line was a legit number i.e 1 it got converted.

But this would not work if "a" had a value of lets say "bagfaceasadkhan".

Using Number method on this would give use NaN i.e Not a Number.

let a = "bagfaceasadkhan";
console.log(typeof a)//string
a = Number(a);//NaN
console.log(typeof b);//udefined

Similarly we can convert various datatypes into other datatypes.

There are 7 primary datatypes in Javascript.

Number
String
Boolean
Undefined
Null
BigInt
Symbol

Major conversions happen between Number, String, Boolean, Undefined and some times Null.

Things to always remember.

When a number is converted to boolean all the numbers will be converted to true except for 0.
When a boolean is converted to number true will be converted to 1 and false to 0.
When a string whose value is not actually a number i.e if it is not "1" or "10" and is something like "bagfaceasadkhan" then upon converting it to number will give output as NaN i.e Not a Number.
When a string is converted to boolean all the strings are converted to true except for an "" (empty string).
Undefined when converted to number will give NaN, when converted to string will give "undefined", when converted to boolean will give false.

Tip for conversion to boolean.

All the falsy values i.e "", undefined, null and 0 when converted to boolean will give false rest all will give true.

Some code examples based on simple conversions.

let a = true;//Boolean
let numA = Number(a)//1
let stringA = String(a)//"true"
let b = false;//Boolean
let numB = Number(b)//0
let stringB = String(b)//"false"
let c = 1;//Number
let cString = String(c)//"1"
let boolC = Boolean(c)//"true"
let d = 0;//Number
let dString = String(d)//"0"
let boolD = Boolean(d)//false
let e = undefined;//undefined
let eString = String(e)//"undefined"
let eNum = Number(e)//NaN
let eBool = Boolean(e)//false

Type Coercion 💻

Type Coercion is a mechanism in which a variable of one datatype is automatically converted to another datatype under the hood.

let a = 1;
let b = "2";
console.log(a+b)//"12"//One automatically got converted to a string.

In the above example a variable with a datatype of number and b variable with a datatype of string was involved in an addition operation where a variable got coerced i.e automatically converted to datatype of string and then just like string concatination "1"+"2" we got the output as "12".

console.log(1+true+3-1);//4

In the above code example boolean value true got coerced to number datatype hence the operation became 1+1+3-1 = 4.

Things to keep in mind while dealing with type coercion.

(+) If any one of the operand of + operator is a string and other operand of any other datatype it will try to convert the other operand to string and then will concatinate the two operands.

Lets take an example program.

console.log(1+3+"3"+4+"5")//"3345"

In the above given example the execution will go as follows.

All the arithematic operators executes from left to right.

1 + 2 = 3 // both the operands are number
3 + "3" = "33"// here since one operand is a string and another number the number is coerced to string and then operands are concatinated giving the output as "33".
"33" + 4 = "334"//here again one operand is number and another is string.
"334" + "5" = "3345"// here since both are string it will be a simple string concatination giving the final output as "3345".

(-) If anyone of the operand of - operator is string and another is of any datatype it will coerce the string operand into number.

Lets take an example program.

console.log(10-2-"3"-2)//3

10 - 2 = 8 // both the operands are number so simple subtraction.
8 - "3" = 5// one operand is string which is coerced to number and then simple subtraction.
5 - 2 = 3// simple subtraction.

Summary

If one of the two operands is a string the non-string operand will be coerced to string if the operator is +.
If one of the two operands or both are a string the string operand will be coerced to number if the operator is any arithmetic opertor other than +.

Some questions to try.

console.log(3+4+"5"+6+7);

console.log(3*4*"5");

console.log("3"+"5"-2+"3")

console.log(true+1+"33");

DEV Community: Asad Khan

Type Conversion and Coercion in Javascript💫.

Type Conversion 👦🏼

Type Coercion 💻