What You Need To Know About JavaScript Type Conversions

Last time you learned how to work with math operators in JavaScript. Now let’s look at JavaScript Type Conversions.

Automatic Type Conversions In JavaScript

JavaScript is awesome because most of the time it automatically converts values from one data type to another. For example, in mathematical operations, values are automatically converted to numbers.

console.log("3" - 2);  // Result: 1 
console.log("3" + 2);  // Result: "32" (because + is also concatenation operator)
console.log(3 + "2");  // Result: "32"
console.log("3" * "2");  // Result: 6
console.log("10" / "2");  // Result: 5
console.log(1 + true);  // Result: 2 (because true is converted to 1)
console.log(1 + false);  // Result: 1 (because false is converted to 0)
console.log(1 + undefined);  // Result: NaN
console.log(3 + null);  // Result: 3 (because null is converted to 0)
console.log("3" + null);  // Result: "3null"
console.log(true + null);  // Result: 1
console.log(true + undefined);  // Result: NaN

There are situations when you need to manually convert a value from one data type to another. JavaScript provides several different methods to perform data type conversions. Let’s look at them.

How To Convert Values To Numbers In JavaScript

The numeric conversion is usually required when you get the value from a string-based source like text input, but you expect a number to be entered or want to treat it as a number. Here you can use Number() method to convert strings to numbers. Here’s how it looks:

let str = "123";
console.log(typeof str); // Result: string

let num = Number(str); 
console.log(typeof num); // Result: number

If the string is not a valid number, the result will be NaN. Empty strings convert to 0.

Number("10.5")  // Result 10.5
Number(true)  // Result 1
Number(false)  // Result 0
Number(null)  // Result 0
Number(" 123 ")  // Result 123
Number(" ")  // Result 0
Number("")  // Result 0
Number("123e-1")  // Result 12.3
Number("0xFF") // Result 255 (hexadecimal representation)
Number("undefined")  // Result NaN
Number("null")  // Result NaN
Number("Hello World!")  // Result NaN

How To Convert Values To Strings In JavaScript

You can use the String() method to convert a value to a string. Here’s how to convert a Boolean value to a string:

let bool = true;
console.log(typeof bool); // Result: boolean

let str = String(bool);
console.log(typeof str); // Result: string

Another way to convert numbers to strings is using the toString() method:

let num = 123;
console.log(typeof num); // Result: number

let str = num.toString(); 
console.log(typeof str); // Result: string

How To Convert Values To Boolean In JavaScript

You can use the Boolean() method to convert any value to a Boolean value.

Values that are intuitively empty, like 0, null, false, undefined, NaN, or an empty string (“”) become false. Other values become true. Here’s an example:

Boolean(0) // returns false
Boolean(null)  // returns false
Boolean(false)  // returns false
Boolean(undefined)  // returns false
Boolean(NaN)  // returns false
Boolean("") // returns false
Boolean("0") // returns true
Boolean(1) // returns true
Boolean(true) // returns true
Boolean("false") // returns true
Boolean("Hello World!") // returns true
Boolean(" ") // returns true

How To Convert Object To Primitive In JavaScript

JavaScript automatically performs object-to-string conversion when you try to print out an object. And the object-to-number conversions are automatically performed when we try to add or subtract objects or apply mathematical functions, for example, adding or subtracting date objects. Here’s an example:

let date1 = new Date(2022 , 5, 24);
console.log(date1);

let date2 = new Date(2025, 8, 15);
let time = date2 - date1;
console.log(time) 

You can also convert the object to a string manually using the toString() method, which returns a string representation of the object. Also, you can use the valueOf() method on some objects such as Date to perform object-to-number conversion. Here’s an example:

let arr = [1, 2, 3];
arr.toString();

let d = new Date(2022, 5, 24);
d.toDateString();
d.valueOf(); 

Type Conversions Using Operators In JavaScript

JavaScript operators, such as + and – operators, can also be used in type conversions. Let’s look at the example:

let x = "10"; // x is a string
let y = +x;
console.log(typeof(y)); // Result: number
console.log(y); // Result: 10

let x = 10; // x is a number
let y = x + "";
console.log(typeof(y)); // Result: string
console.log(y); // Result: 10

let x = "15"; // x is a string
let y = x - 0;
console.log(typeof(y)); // Result: number
console.log(y); // Result: 15

vlet x = "123";
console.log(typeof(!!x)); // Result: boolean
console.log(!!x); // Result: true

let x = "Hello World!";
let y = +x;
console.log(typeof(y));// Result: number
console.log(y); // Result: NaN