JavaScript Type Conversions
Tags: javascript, webdev, datatype, type
Published: 2023-03-19 16:08:21

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.

```javascript
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*

```javascript
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.*

```javascript
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.

```javascript
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*

```javascript
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.

```javascript
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`

```javascript
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.

```javascript
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`.

```javascript
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.

```javascript
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

```javascript
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*

```javascript
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.*

```javascript
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.*

```javascript
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.*

```javascript
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

```javascript
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`.

```javascript
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 ocxigin@gmail.com

#Cheers