Type Conversion vs Type Coercion In JavaScript

Unlike most programming languages, JavaScript has two ways in which it converts from one data type to another and in this article we'll be looking at those two ways.

Prerequisite

• Basic Knowledge of JavaScript.

Type Conversion

Conversion occurs every day, whether we are changing a currency or converting a file from one format to another. In JavaScript, type conversion is when we - the developers manually convert from one data type to another(explicitly).

How to carry out type conversion

Type conversion can be accomplished in JavaScript in several ways. Here are a few ways you can do it.

Using the Number() function

The Number() function is used when converting data types to numbers.
For example, we start by storing a string "13" in a variable called example, after which we create another variable called convertedExample. Then we pass this example variable holding the string "13" to the "Number()" function, which then converts the string "13" to an actual numerical number 13 and stores the returned value in the convertedExample variable.

const example = '13'
const convertedExample = Number(example)
console.log(example, convertedExample)

Output👇

The output of running the code in your console is two different data types;

1. The String 13 with the darker color

2. The number 13 with the purple color.

To confirm, you can use the typeof() function - a function used to check data types in JavaScript, to confirm if the value is a number. e.g.

console.log(typeof convertedExample, convertedExample)

Output👇

Note:

• Trying to convert a string that isn't a number will return NaN - which is a value JavaScript returns when an operation that involves an invalid number fails to produce a new number. e.g.

const example = 'test data'
const convertedExample = Number(example)
console.log(example, convertedExample)

Output👇

• using the Number() function does not mutate (change) the original value. That means the string 13 is still going to be a string and it won't change anywhere it is not explicitly specified.

Using the String() function

The String() function is used when converting numbers to strings.
For instance, a variable called example, which holds the numerical value, 13, and a second variable called convertedExample, which holds the string() function that takes the numerical value 13 as input and converts it to a string, 13.

const example = 13
const convertedExample = String(example)
console.log(example, convertedExample)

Output👇

The output of running the code in your console is two different data types;

1. The number 10 with the purple color

2. The string 10 with the red color and the single quotes-that signify that the value is a string

You can also use the typeof() function to confirm. e.g.

console.log(typeof convertedExample, convertedExample)

Output👇

Note:
Be sure that either of the functions (i.e. Number() or String()) begin with a capital letter.

• 👍 Number(), String()
• ❌number(), string()

Type Coercion

Type coercion happens whenever an operator is dealing with 2 values of different data types. JavaScript behind the scene automatically converts one of the data types to match the other so the operation can be executed.

How JavaScript carries out type coercion.

JavaScript automatically carries out type coercion implicitly, and here are some ways in which it does so.

Using the plus + operator

The + operator triggers a conversion to strings. It converts numbers to strings (as we would using the String() function).
Below is a constant variable called example which holds a string made up using concatenation - this lets you combine the contents of two or more strings to create one longer string.

const example = 'I am ' + 23 + ' years old' ;
console.log(example)

A single string is formed by merging 'I am', '23', and 'years old'. JavaScript converts the numerical value 23 into the string '23'.

Output👇

The output is a string that can be confirmed using the typeof() function. You can try this as practice.

Using the minus - operator

The - operator does the opposite of the + operator by converting strings to numbers instead(as we would using the Number() function). The following operators can carry out type coercion in the same way:

• The Multiplier * operator
• The Division / operator
• Logical operators like >, < etc.

example

let e = '2' + 1 //  The output is 21. converts to string
e = e  - 1 // The output is 21-1 = 20. converts to number
console.log(typeof e, e)

let n = 2 + 3 + 4 + "5";
console.log(n);

Output👇

• The following steps occurred in example 1;
  

  1. The string 2 is concatenated to the number 1, making it 21 the string.
  2. The - operator in the second line triggers type coercion, hence 21 - 1 produces the number 20 .

• The following steps occurred in example 2;
  

  1. The numbers 2,3 and 4 are all added normally from left to right which results in 9
  2. The number 9 is then concatenated to the string 5 as a result of the + operator

Note:
Not all operators carry out type coercion.

Conclusion

The use of type coercion can introduce unwanted bugs into our code. However, we know about it and we know how to use it to our advantage.

Type conversion and type coercion are fundamental concepts of JavaScript, so if you are new to JavaScript or just wish to gain a deeper understanding of JavaScript, I hope this article helped you.