JavaScript Casting

JavaScript provides multiple data types and often Developers find themselves stuck when dealing with a data type that was meant to be of a particular type but it isn’t. JavaScript provides a very easy way to change the data type of a certain value from one to another considering the fact that it is a valid change. This is called Casting or Type Casting where JavaScript values are casted or changed from being of one type to another.

In JavaScript, we have the primitive types Number, String, Boolean, and Symbol and the object type Object (as well as null or undefined value, but you won’t need to worry about casting to those).

Type Casting sometimes happens automatically or implicitly and sometimes as a Developer you have to specify that a type cast needs to be performed. Let’s look at both Implicit and Explicit Type Conversions.

As you can see in example below, when a string type is used with a number type in a mathematical expression using mathematical operators, the string numbers are changed into number type implicitly before performing the operation and the resulting value is then a valid number data type. If a valid numeric conversion is not possible implicitly, it results in the value being Not a Number or NaN, as you can see in the following code snippet:

let result = ‘38’ + ‘20’;
console.log(result); // prints 58
console.log(typeof result); // prints number

let result = ‘38’ - 20;
console.log(result); // prints 18
console.log(typeof result); // prints number

let result = ‘38’ * 10; 
console.log(result); // prints 380
console.log(typeof result); // prints number

let result = ‘38’ / 2; 
console.log(result); // prints 19
console.log(typeof result); // prints number

let result = ‘38’ / ‘hello’; 
console.log(result); // prints NaN

As you can see in the example below, when a string value is added to a number, it results in the number value to be changed into string and the resulting value to be of type string where both values are concatenated.

let result = ‘38’ + 20;
console.log(result); // prints ‘3820’
console.log(typeof result); // prints string

As seen in the example below, one can use the Number() constructor function to change a value that is non-numeric like boolean or a number in string to be of number data type.

let value = ‘38’;
let result = Number(value);
console.log(result); // prints 38
console.log(typeof result); // prints number

let value = false;
let result = Number(value);
console.log(result); // prints 0 as false converts to 0
console.log(typeof result); // prints number

let value = true;
let result = Number(value);
console.log(result); // prints 1 as true converts to 1
console.log(typeof result); // prints number

As seen in the example below, one can use the String() constructor function to change a value that is numeric or boolean to be of type String.

let value = 38;
let result = String(value);
console.log(result); // prints ‘38’
console.log(typeof result); // prints string

let value = false;
let result = String(value);
console.log(result); // prints ‘false’
console.log(typeof result); // prints string

let value = 20 + 10;
let result = String(value);
console.log(result); // prints ‘30’
console.log(typeof result); // prints string

In JavaScript, number 0 relates to false and number 1 relates to true. A string that is empty ’’ relates to false and a string with characters in it or the one which is not empty relates to true. This is because everything in JavaScript is either truthy or falsy. Here is a chart that explains the truthy-falsy nature of JavaScript. A value that is a number or string can be converted into its own boolean representation of being truthy or falsy by using the Boolean constructor function Boolean().

let value = ‘hello’;
let result = Boolean(value);
console.log(result); // prints true as value is not empty string
console.log(typeof result); // prints boolean

let value = 0;
let result = Boolean(value);
console.log(result); // prints false as 0 converts to false
console.log(typeof result); // prints boolean

let value = 1;
let result = Boolean(value);
console.log(result); // prints true as 1 converts to true
console.log(typeof result); // prints boolean