JavaScript Type Conversions

In JavaScript, when data is converted from one type to another by the JavaScript interpreter, this is referred to as Type Conversion. and this can occur automatically or manually.

There are two ways JavaScript undergoes type conversion, these include;

• Implicit Conversion (automatically)

• Explicit Conversion (manually)

But before we take a look at these two methods of Type Conversion, let's see how JavaScript processes data of the same type. This will give us a better understanding of how Type Conversion works.

Evaluating Data of the same Type.

let firstName = 'Alex';
let lastName = 'Anie';

let fullName = firstName +" " +lastName;

console.log(fullName); //-> Alex Anie
console.log(typeof fullName); //-> string

from the code output above, we use the Addition (+) Arithmetic operators to concatenate the firstName and lastName variable and assign it to another variable of fullName. And then we print it out to the console which gave us a value of Alex Anie and using the typeof operator, the fullName returns a string.

What this means is, when JavaScript sees any values put inside single or double quotes, it interprets it as a string and concatenates them together (chaining). But if the values are just numbers without single or double quotes, JavaScript performs an Arithmetic operation on them.

Consider the code below

function age(currentYear, dateOfBirth){
    return currentYear - dateOfBirth;
}

const print = age(2023, 1994);
console.log(print) //-> 29
console.log(typeof print); //-> number

JavaScript evaluates the program above and returns 29 and number as the data type.

Implicit Conversion

Implicit conversion is when JavaScript automatically does a type conversion of values of different data types to a particular data type. For example, converting a string to a number or vice-versa.

Converting string to numbers

In this section, we are going to look at how Javascript implicitly converts strings to numbers with the help of examples.

Type and run the code below.

let print0 = '6' + '3';
let print1 = '6' - '3';
let print2 = '6' -  3;
let print3 =  6 / '3';
let print4 = '6' * '3';
let print5 = '9' % '4';

console.log(print0); //-> 63
console.log(typeof print0); //-> string
//----------------------------------//
console.log(print1); // -> 3
console.log(typeof print1); //-> number
//----------------------------------//
console.log(print2); //-> 3
console.log(typeof print2); //-> number
//----------------------------------//
console.log(print3); //-> 2
console.log(typeof print3); //-> number
//----------------------------------//
console.log(print4); //-> 18
console.log(typeof print4); //-> number
//----------------------------------//
console.log(print5); //-> 1
console.log(typeof print5); //-> number

When the Arithmetic operator is used to evaluate two operands of string data types but number values, JavaScript automatically converts the type to a number after performing the given operation. the Only exception is when addition (+)operator is used as seen in the first examples.

Converting numbers to string

So we have learned how JavaScript automatically converts strings into number types when the value in the string is a number.

In this section, we are going to learn how JavaScript handles Type conversion between a number and a string when the value in the string are letters.

let print0 = 44 + "Hello";
let print1 = 'world' + 52;
let print2 = 44 - "Hello";
let print3 = 21 / "Good Bye";
let print4 = 44 * "Soon";
let print5 = 44 % "Hello";
let print6 = 44 ** "Hello";

console.log(print0) //-> 44Hello
console.log(typeof print0) //-> string
//-------------------------//
console.log(print1) //-> world52
console.log(typeof print1) //-> string
//-------------------------//
console.log(print2) //-> NaN
console.log(typeof print2) //-> number
//-------------------------//
console.log(print3) //-> NaN
console.log(typeof print3) //-> number
//-------------------------//
console.log(print4) //-> NaN
console.log(typeof print4) //-> number
//-------------------------//
console.log(print5) //-> NaN
console.log(typeof print5) //-> number
//-------------------------//
console.log(print6) //-> NaN
console.log(typeof print6) //-> number

The first two variables print0 and print1 had their values concatenated and returned as 44Hello and world52 respectively. That is because text characters and numbers are two different entities and not be mathematically added together with the Addition operator in JavaScript. So JavaScript ends up concatenating them together as one value.

However other values return a NaN. This in JavaScript means Not a Number, meaning it is not a valid number that can be evaluated.

Boolean Type Conversion in (True and False)

Boolean is another set of data types in JavaScript. The Boolean has two values namely: true and false.

Type conversion works differently in Boolean when working with numbers than you would expect.

Consider the code below

let print0 = 44 + true; // 44 + 1
let print1 = 44 - false; // 44 - 0

console.log(print0); //-> 45
console.log(typeof print0); //-> number
//------------------------//
console.log(print1); //-> 44
console.log(typeof print1); //-> number

The Boolean values have a binary representation of 1 and 0, where true is 1 and false is 0.

Now let's see how Boolean values, true and false behave when working with strings.

let print0 = '44' + true; // true = 1
let print1 = '44' - false; // false = 0
let print2 = 'true' - true; // true = 1
let print3 = 'go' - true; // true = 1

console.log(print0); //-> 44true
console.log(typeof print0); //-> string
//-----------------------------------//

console.log(print1); //-> 44
console.log(typeof print1); //-> number
//-----------------------------------//

console.log(print2); //-> NaN
console.log(typeof print2); //-> number
//-----------------------------------//

console.log(print3); //-> NaN
console.log(typeof print3); //-> number

The Boolean values behave just like numbers when used with Arithmetic operators, So when working with Boolean values and Arithmetic operators, treat them as if you are working with 1 and 0.

Null Type Conversion

Null is a primitive value in JavaScript that represents the absence of any object value. This could be when a value is empty or unknown.

Now let's see how type conversion works in null

let print0 = null + 2;
let print1 = null - 8;
let print2 = null - 'null';
let print3 = null + 'Hello World';
let print4 = null / true;
let print5 = null * false;
let print6 = null + true;


console.log(print0); //-> 2
console.log(typeof print0); //-> number
//---------------------------//
console.log(print1); //-> -8
console.log(typeof print1); //-> number
//---------------------------//
console.log(print2); //-> NaN
console.log(typeof print2); //-> number
//---------------------------//
console.log(print3); //-> nullHello World 
console.log(typeof print3); //-> string
//---------------------------//
console.log(print4); //-> 0
console.log(typeof print4); //-> number
//---------------------------//
console.log(print5); //-> 0
console.log(typeof print5); //-> number
//---------------------------//
console.log(print6); //-> 1
console.log(typeof print6); //-> number

A null is an empty object or value as stated earlier, so when we added null + 2, we got 2 in return. This is just like saying add two apples to an empty basket, and then check how many apples are in the basket. The answer we will get is 2 because the basket was empty when we add the 2 apples.

We can also check the type of null by using the typeof operator.

console.log(typeof null) //-> object

As expected. It returns an object.

undefined Type Conversion

Undefined simply means when a variable has not been assigned a value yet. So when you try to access such a variable, it returns a type of undefined.

Let's see how type conversion works with undefined.

let print0 = undefined + 2;
let print1 = undefined - 6;
let print2 = undefined / 10;
let print3 = undefined * 2;
let print4 = undefined ** 2;
let print5 = undefined + undefined;
let print6 = undefined - 'undefined';
let print7 = undefined + 'Hello';

console.log(print0) //-> NaN
console.log(typeof print0) //-> number
//-------------------------//
console.log(print1) //-> NaN
console.log(typeof print1) //-> number
//-------------------------//
console.log(print2)  //-> NaN
console.log(typeof print2) //-> number
//-------------------------//
console.log(print3)  //-> NaN
console.log(typeof print3) //-> number
//-------------------------//
console.log(print4)  //-> NaN
console.log(typeof print4) //-> number
//-------------------------//
console.log(print5) //-> NaN
console.log(typeof print5) //-> number
//-------------------------//
console.log(print6) //-> NaN
console.log(typeof print6) //-> number
//-------------------------//
console.log(print7) //-> undefinedHello
console.log(typeof print7) //-> string

From the code sample above, we got a NaN as an output when we try to add undefined with a number value of 2. What JavaScritp is trying to let us know is that undefined is not a valid number to be added by 2 and this is because undefined does not have any value assigned to it.

To understand more about the type of undefined, we can make use of the typeof operator.

console.log(typeof undefined) //-> undefined

Explicit Conversion

Explicit conversion is when we manually set the type conversion of a JavaScript data type to another data type using the JavaScript built-in methods.

To make an explicit conversion, you can make use of the following constructor based on what you want to convert to.

• String()

• Number()

• Boolean()

String() Explicit Conversion

The String() constructor can be explicitly set to convert data type in JavaScript.

Let's see how this works

let print0 = String(144);
let print1 = String(144 - 140);
let print2 = String(12 * 12);
let print3 = String(144 / 2);
let print4 = String(true);
let print5 = String(null);
let print6 = String(undefined);
let print7 = String(NaN);

console.log(print0) //-> 144
console.log(typeof print0) //-> string
//-------------------------//
console.log(print1) //-> 4
console.log(typeof print1) //-> string
//-------------------------//
console.log(print2) //-> 144
console.log(typeof print2) //-> string
//-------------------------//
console.log(print3) //-> 72
console.log(typeof print3) //-> string
//-------------------------//
console.log(print4) //-> true
console.log(typeof print4) //-> string
//-------------------------//
console.log(print5) //-> null
console.log(typeof print5) //-> string
//-------------------------//
console.log(print6) //-> undefined
console.log(typeof print6) //-> string
//-------------------------//
console.log(print7) //-> NaN
console.log(typeof print7) //-> string

From the code example above, the String() performs the math operation and returns the value as a string however other types such as undefined, null and NaN is returned as a string.

Try this second example

let print0 = (144).toString();
let print1 = (144).toString(2); //Redix of (2) is a binary
let print2 = (true).toString();

console.log(print0); //-> 144
console.log(typeof print0); //-> string
//-------------------------//
console.log(print1); //-> 10010000
console.log(typeof print1); //-> string
//-------------------------//
console.log(print2); //-> true
console.log(typeof print2); //-> string

the toString() method can also be used for type conversion but will true an error when used with null or undefined.

Try the code below.

let print3 = (null).toString();
console.log(print3);
//-> Uncaught TypeError: Cannot read properties of null (reading 'toString')

Number() Explicit Conversion

The Number() method is used to convert values to a number, however, it returns a NaN if the value cannot be converted.

Try the code below.

let print0 = Number('144');
let print1 = Number(true);
let print2 = Number(false);
let print3 = Number(' ');
let print4 = Number(null);

console.log(print0); //-> 144
console.log(typeof print0); //-> number
//-------------------------//
console.log(print1); //-> 1
console.log(typeof print1); //-> number
//-------------------------//
console.log(print2); //-> 0
console.log(typeof print2); //-> number
//-------------------------//
console.log(print3); //-> 0
console.log(typeof print3); //-> number
//-------------------------//
console.log(print4); //-> 0
console.log(typeof print4); //-> number

The above example shows how the Number() method can be used to convert string, Boolean and null to numbers.

Try the second example.

let print0 = Number(undefined);
let print1 = Number(NaN);

console.log(print0); //-> NaN
console.log(typeof print0); //-> number
//-------------------------//
console.log(print1); //-> NaN
console.log(typeof print1); //-> number

Here, the Number() method return undefined and NaN as a NaN with a number type.

Boolean() Explicit Conversion

The data type below returns false when parsed as a value to a Boolean() method

let print0 = Boolean('');
let print1 = Boolean(undefined);
let print2 = Boolean(null);
let print3 = Boolean(0);
let print4 = Boolean(NaN);

console.log(print0) //-> false
console.log(typeof print0) //-> boolean
//------------------------//
console.log(print1) //-> false
console.log(typeof print1) //-> boolean
//------------------------//
console.log(print2) //-> false
console.log(typeof print2) //-> boolean
//------------------------//
console.log(print3) //-> false
console.log(typeof print3) //-> boolean
//------------------------//
console.log(print4) //-> false
console.log(typeof print4) //-> boolean

Other values, expect the above returns true.

let print0 = Boolean(' ');
let print1 = Boolean(1444);
let print2 = Boolean('Say Hello');
let print3 = Boolean('true'); 
let print4 = Boolean(1);

console.log(print0) //-> true
console.log(typeof print0) //-> boolean
//------------------------//
console.log(print1) //-> true
console.log(typeof print1) //-> boolean
//------------------------//
console.log(print2) //-> true
console.log(typeof print2) //-> boolean
//------------------------//
console.log(print3) //-> true
console.log(typeof print3) //-> boolean
//------------------------//
console.log(print4) //-> true
console.log(typeof print4) //-> boolean

Wrapping up

We learned about JavaScript Type Conversions and we discussed the following.

• Implicit Conversion and Explicit Conversion

Alright! We’ve come to the end of this tutorial. Thanks for taking the time to read this article to completion. Feel free to ask questions. I’ll gladly reply. You can find me on Twitter and other social media @ocxigin. or email me at [e-mail]

Cheers