Type conversion VS Type coercion in JavaScript

Type conversion VS Type coercion in JavaScript

ยท

4 min read

Hello, all lovely people here!๐Ÿคฉ

Data Types are a fundamental aspect of every programing language. Converting between types is what we are doing in every programing language. eg. converting Boolean into String or String into Number etc.

I will be going to write below about how Javascript is playing with these data types.

How does JavaScript define a data type to the variable?

JavaScript has Dynamic Typing- We do not have to manually define the data type of variables.

When we declare and define variables then we need to mention explicitly the data type of variable. We might have observed other programing languages there we need to explicitly need to mention data type.

//other programing laguage
int number = 10;
String name ="John";

JavaScript is amazing and making our developer work much easier because not required to mention data type explicitly.

//JavaScript 
let number = 10;
let firstName = "John";
let sentence = `We are here`;

What happened here?

While defining a variable if we write variable value inside quote then it will be considered String. The string can be enclosed in the single quote('Hello'), double quote("Hello") or backtick -``.

When we only declare a variable then by default its data type is "undefined". When we assign a direct number to a variable then it's creating a Number data type. We assign true or false value then it's creating a Boolean data type.

let numValue = 10; //Number
let newValue = '10'; //String
let stringValue = "John"; //String
let emptyValue; //undefined
let booleanValue = true; //Boolean

What is Type Conversation in JavaScript?

Type conversion is when we manually convert one data type into another. We are converting one type into another type explicitly as below:

Converting Number into String/Boolean

It's always easy to Convert a Number into a String. When we convert the number to boolean then it will always be true unless the variable value is 0(Check below truthy and falsy value section for more information).

let numValue = 10; //Number
console.log(String(numValue)); //output: "10"
console.log(Boolean(numValue)); //output: true

let numZero = 0; //value 0
console.log(String(numZero)); //output: "0"
console.log(Boolean(numZero)); //output: false

Convert String into Number/Boolean

We will end up getting NaN value when we try to convert pure String into Number. If the String is in number format then easily we can convert that into a Number. When we try to convert String to Boolean then it will convert into Boolean value true unless it's empty String.

let fisrtName = "John"; //String
console.log(Number(firstName)); //output: NaN
console.log(Boolean(firstName)); //output: true

let age = "20";//String
console.log(Number(age)); //output: 20
console.log(Boolean(age)); //output: true

let emptyString = " "; //empty String
console.log(Number(emptyString)); //output: 0
console.log(Boolean(emptyString)); //output: false

NaN is an invalid number. Data type of NaN is Number.

console.log(typeof NaN); //output: Number

Convert Boolean into Number/String

Boolean has only two values either true or false, when we try to convert boolean to a number then it will be either 1 or 0.

let boolTrue = true; //boolean
console.log(Number(boolTrue)); //output: 1
console.log(String(boolTrue)); // String, output: "true"

let boolFalse = false; //boolean
console.log(Number(boolFalse)); //output: 0
console.log(String(boolFalse)); //output: "false"

What is Type Coercion in JavaScript?

Type coercion is one of the added feature of JavaScript. When JavaScript doing type conversion automatically and this will be hidden from us and implicitly done by javascript it's called type coercion.

console.log('I am '+23+' years old.'); // output: I am 23 years old.
console.log('23'-'10'-'3'); // output: 10
console.log('23'+'10'+'3'); // output: 23103
console.log('20'*'4'); // output: 80
console.log('10'-'4'-'3'-2+'5'); //output: 15

What does happen in the above example?

JavaScript converted String into numbers and performed operations. The only way in which it doesn't do that is with plus operator. When identified plus operator then all the Numbers are converted into String.

๐Ÿ‘‰It will be bad practice to rely on type coercion, one reason for that is type coercion may introduce many unexpected bugs into our program.

What is truthy and falsy in JavaScript?

It's really important to know truthy and falsy values when we are converting Number or String into Boolean.

Falsy values will become false when we try to convert them into a Boolean, truthy values will become true when we try to convert them into Boolean.

//There are total five falsy values
0
" "
undefined
null
NaN

//Truthy values
any String (which is not empty string)
any Number (except zero)

That's all for this article I hope you found the article useful. I tried my best to put all the valuable content here. Thanks for reading. As you have reached so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback! ๐Ÿ™‚

I would love to connect with you at Twitter.

Resources:

ย