DEV Community

Cover image for Type Conversion and type casting of javascript
Kamalesh AR
Kamalesh AR

Posted on

Type Conversion and type casting of javascript

Typecasting in JavaScript is the conversion of one data type into another data type, for example, a number to a string. Typecasting is often also known as type conversion.

In JavaScript Type Conversion can be defined as converting the data type of the variables from one type to the other manually by the programmer(explicitly) or automatically by the JavaScript(implicitly).

  • Implicit Type Conversion (Coercion): Implicit Type Conversion occurs automatically by the JavaScript.
  • Explicit Type Conversion: Explicit Type Conversion occurs when the programmer manually changes the type of the variables using the function Number(), String(), and Boolean().

What is data type?

JavaScript has 8 main data types:

String
Number
Boolean
Null
Undefined
Bigint
Symbol
Object

The object can be divided into more data types or to be more precise there are data types that are also objects:

Array
Object
Date

JavaScript is a dynamic language with dynamic data types because variable types are defined the moment they are assigned the value. Check out my post to learn more about data types if you don't have prior knowledge.
There are two types of typecasting - implicit typecasting and explicit typecasting.

Implicit Type Conversion (Coercion)

In JavaScript, the implicit type conversion or coercion conversion can be defined as the automatic conversion of the data type of the variables from one type to another type. Implicit type conversion mostly occurs when we are performing the arithmetic or the logical operations.

For example:

let age = "25"; // String

let numAge = Number(age); // Convert string to number

console.log(numAge);
console.log(typeof numAge);
Enter fullscreen mode Exit fullscreen mode

Output;

25
number

String with Number (Concatenation)

When we add a string with the number, the JavaScript automatically converts the number into a string and performs string concatenation.

let a = "10";
let b = 5;

console.log(a + b);
Enter fullscreen mode Exit fullscreen mode

O/P:
105

let a = "10";
let b = 5;

console.log(a - b);
Enter fullscreen mode Exit fullscreen mode

O/P:
5

Boolean to Number

When we perform the mathematical operations, then JavaScript automatically converts true to 1 and false to 0.

let res = true + 1;  
console.log(res);
Enter fullscreen mode Exit fullscreen mode

O/P:
2

Equality Comparison (==)

When we use the equality operator in the JavaScript, it compares them after converting the value into the same data type.

let res = (5 == "5");  
console.log(res);
Enter fullscreen mode Exit fullscreen mode

O/P:
true

Explicit Type Conversion

In JavaScript, explicit type conversion can be defined as when we manually change the data type of the variable from one to other using some built-in JavaScript functions. JavaScript provides us the built-in functions for performing the explicit conversion.

For example:

let x = "10";

console.log(Number(x));
Enter fullscreen mode Exit fullscreen mode

Output:

10

This is called explicit conversion

Today my task:

let i = 10;
let j = "5";
console.log(i + j);

Expected O/P:
15

Solution:

In your code, JavaScript performs type coercion, automatically converting the number 10 into a string before adding it to "5". This results in string concatenation ("105"), not mathematical addition.To achieve the expected output of 15, convert the string to a number using the Number() function or the parseInt() method:

let i = 10;
let j = "5";
console.log(i + Number(j)); 
Enter fullscreen mode Exit fullscreen mode

O/P:
15

Type Conversion Notes

In JavaScript, sometimes values are stored as strings even though they represent numbers. For example, let j = "5"; stores the value 5 as a string, not as a number. When we use the + operator between a number and a string, JavaScript treats it as string concatenation instead of addition. For example, 10 + "5" produces "105" because JavaScript converts the number 10 into a string and joins the two values together. To perform mathematical addition, both values must be numbers. Therefore, we use Number() to convert the string into a number manually. For example, let i = 10; let j = "5"; console.log(i + Number(j)); converts "5" to 5, and then JavaScript performs numeric addition, resulting in 15. This process is called Explicit Type Conversion or Type Casting because the programmer explicitly converts one data type into another. Type conversion is commonly used when working with user inputs, form data, APIs, or any data source where numbers are received as strings but need to be used in calculations.

References
https://www.geeksforgeeks.org/javascript/javascript-type-conversion/
https://www.w3schools.com/js/js_type_coercion.asp
https://medium.com/@catherineisonline/type-casting-in-javascript-1c2c30d88ae5

Top comments (1)

Collapse
 
karthick_k_983555db6df3 profile image
Karthick (k)

Good