Type Conversion and Coercion in javascript

Photo by Joan Gamell on Unsplash

Type Conversion and Coercion in javascript

Type Conversion

Untitled (12).jpg

Explicit Conversion

Converting one data type to another manually. This is done using some built-in methods. Except for null and undefined, all primitive values have object equivalents that wrap around the primitive values. Values of one types can be converted to other type using these functions.

Untitled (14).jpg

Let's have a look at the ways to convert one type to another.

1. Conversion to Number

a.) Number() Number is a primitive wrapper object used to represent and manipulate numbers. It converts other types values to numbers using Number() function.

Number('30')  //30
Number('30') === 30  // true
Number('')//0
const d=new Date('August 30, 1999')
console.log(Number(d)) //935951400000

If the value can't be converted, it returns NaN.

Number("Ishita")  // NaN
Number(undefined) //NaN

If we pass the boolean value, then

Number(true) // 1
Number(false) // 0

b.) Using parseInt()

parseInt() is used to convert a string to number. It takes two parameters, the string to be parsed and the radix to be used. A radix parameter specifies the number system to use:

2 = binary 8 = octal 10 = decimal 16 = hexadecimal

parseInt(string, radix)

If radix param is not used the JavaScript assumes radix 10. If the value begins with "0x", JavaScript assumes radix 16.

parseInt("10", 10) //10
parseInt("120", 8) //80
parseInt("20", 16) //32
parseInt("") // NaN

parseInt() parses up to the first non-digit unlike number which convert the entire string into a number

parseInt('123ab') //123
Number('123ab') //NaN

2. Conversion to String

a.) String()

The String object is used to represent and manipulate a sequence of characters. It converts other types values to strings using String() function.

String(45) //'45'
String(undefined) //'undefined'

b.) toString()

The toString() method converts a number to a string. It also takes radix as parameter.

let num = 30;
num.toString();  //'30'
num.toString(2) //'11110'

toString() will cause an error if value is null or undefined while String() do not cause any error.

String(null) //'null'
String(undefined)//'undefined'
let str=null
str.toString() // TypeError

3. Conversion to Boolean

Boolean object converts other types values to boolean using Boolean() function. If the value is undenied, NaN, 0, ''(with no space),null, it will be considered as false.

Boolean(NaN) //false
Boolean(undefined) //false
Boolean(0) //false
Boolean('') //false
Boolean(null)//false

Point to remember: An empty string with spaces, empty object and array return true.

Boolean(' ') //true
Boolean([]) //true
Boolean({}) //true

All other values than this gives true (conditions not included here)

Boolean('hey')   //true
Boolean("false")  //true
Boolean(23)  //true

Type Coercion

Untitled (18).jpg

Just like in this image string itself fall into the waterfall of integer , type coercion works in the same way. Type coercion automatically convert values of one type to another type rather than manually doing it.

1. Type coercion of numbers to string

The + operator used for addition, can also be used to concatenate strings. It automatically converts numbers to string. For example,

console.log('I am ' + 5 + ' years old')

In this case 5 being an integer automatically converts into string without using any built-in function. This is called an implicit conversion .

Now it's play time.

GUESS THE OUTPUT GAME?????????

console.log(1+2+3+'4')
console.log('1' +2+3+4)

Hope you guessed the right output, to check the solution, press cmd+option+J if you are on Mac or ctrl+shift+J(on Windows/Linux). It will open up the console. Paste the code over there and see the answer.

2. Type coercion of string to numbers

/ ,-, * operators automatically convert string to numbers.

console.log('30'-'10') //20
console.log('30'-'10'+ '3') //203
console.log('30'+'10'- '3') //3007
console.log('10' * '2') //20
console.log('10'/'2') //5

AGAIN READY FOR GUESS THE OUTPUT GAME?????????

let num= 1+2+'3'+4;
num=num/2;
num=num-(50+50+100-'33');
console.log(Boolean(num))

That's all about it. If you have some question then feel free to message me on linkedIn or Twitter. LinkedIn: linkedin.com/in/ishitarastogii Twitter: twitter.com/Ishita_30