JS Type Conversions
JavaScript at times automatically converts values from one data type to another when used in an expression. For instance, in mathematical operations values are automatically converted to numbers. but, the final result is not always what you expected:
In some situations, you might need to manually convert a value from one data type to another. However, JavaScript provides several different methods to perform such data type conversion tasks. In subsequent sections in this tutorial, we will discuss those methods in detail.
alert("3" - 2); // Outputs: 1
alert("3" + 2); // Outputs: "32" (because + is also concatenation operator)
alert(3 + "2"); // Outputs: "32"
alert("3" * "2"); // Outputs: 6
alert("10" / "2"); // Outputs: 5
alert(1 + true); // Outputs: 2 (because true is converted to 1)
alert(1 + false); // Outputs: 1 (because false is converted to 0)
alert(1 + undefined); // Outputs: NaN
alert(3 + null); // Outputs: 3 (because null is converted to 0)
alert("3" + null); // Outputs: "3null"
alert(true + null); // Outputs: 1
alert(true + undefined); // Outputs: NaNConverting Values to Numbers
In JavaScript, numeric conversion is mostly required when you read 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.
In this case, you can use the global method Number() to convert strings to numbers.
var str = "123";
alert(typeof str); // Outputs: string
var num = Number(str); // Becomes a number 123
alert(typeof num); // Outputs: number
However, if the string is not a valid number, the result will be NaN. But, empty strings convert to 0.
Number("10.5") // returns 10.5
Number(true) // returns 1
Number(false) // returns 0
Number(null) // returns 0
Number(" 123 ") // returns 123
Number(" ") // returns 0
Number("") // returns 0
Number("123e-1") // returns 12.3
Number("0xFF") // returns 255 (hexadecimal representation)
Number("undefined") // returns NaN
Number("null") // returns NaN
Number("Hello World!") // returns NaNConverting Values to Strings
More so, the String() method can be used to convert a value to a string.
The example below will show you how to convert a Boolean value to a string.
var bool = true;
alert(typeof bool); // Outputs: boolean
var str = String(bool); // Becomes a string "true"
alert(typeof str); // Outputs: string
Note: The String() method can also be used on any type of number, variable, or expression:
String(10.5) // returns "10.5"
String(123) // returns "123"
String(100 + 23) // returns "123"
String(true) // returns "true"
String(false) // returns "false"
String(123e-1) // returns "12.3"
String(0xFF) // returns "255"
String(undefined) // returns "undefined"
String(null) // returns "null"The toString() method is another technique for converting numbers to strings.
var num = 123;
alert(typeof num); // Outputs: number
var str = num.toString(); // Becomes a string "123"
alert(typeof str); // Outputs: stringConverting Values to Boolean
Boolean conversions is another conversion in JavaScript, and it's also straightforward. In this case, the Boolean() method is used to convert any value to a Boolean value (i.e. in the form of true or false).
However, intuitively empty values, such as 0, null, false, undefined, NaN, or an empty string ("") become false; while other values become true, as shown in the example below:
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
From the example above, you will find out that the Boolean() method returns true for the string with zero "0", and a string "false", whereas it returns false for the values 0 and false.
Note: In most programming languages like PHP, the string "0" is treated as false. But this is not the case in JavaScript, as a non-empty string is always true.
Object to Primitive Conversions
So far, all these conversions we've seen are performed on primitive data types (i.e data types that can hold only a single value at a time). However, what do you think will happen with complex data types such as an object, let's find out.
Just as learned earlier, JavaScript automatically performs object-to-string conversion when you try to print out an object like alert(obj) or document.write(obj). Same as, the object-to-number conversions are automatically performed when you try to add or subtract objects or apply mathematical functions, for example, adding or subtracting date objects. This is an example:
var date1 = new Date(2022, 7, 15);
alert(date1); // Display date string like: Mon Aug 15 2022 00:00:00
var date2 = new Date(2023, 7, 15);
var time = date2 - date1;
alert(time) // Display time in milliseconds: 31536000000
Also, with the toString() method, you can perform the object-to-string conversion manually, which will return a string representation of the object. More so, you can use the valueOf() method on some objects like Date to perform the object-to-number conversion. Take a look at this example:
var arr = [1, 2, 3];
alert(arr.toString()); // returns "1,2,3"
var d = new Date(2022, 7, 15);
alert(d.toDateString()); // returns date like Mon Aug 15 2022 00:00:00
alert(d.valueOf()); // returns 1660501800000Note: Object-to-Boolean conversions are insignificant since all objects (such as arrays and functions) are true in a boolean context. Hence, you have an only string and numeric conversions.
Type Conversions Using Operators
In JavaScript, certain operators, such as ‘+’ and ‘-‘ operators, can also be used to perform type conversions, as demonstrated in the example below:
var x = "10"; // x is a string
var y = +x;
alert(typeof(y)); // Outputs: number
alert(y); // Outputs: 10
var x = 10; // x is a number
var y = x + "";
alert(typeof(y)); // Outputs: string
alert(y); // Outputs: 10
var x = "15"; // x is a string
var y = x - 0;
alert(typeof(y)); // Outputs: number
alert(y); // Outputs: 15
var x = "123";
alert(typeof(!!x)); // Outputs: boolean
alert(!!x); // Outputs: true
var x = "Hello World!";
var y = +x;
alert(typeof(y));// Outputs: number
alert(y); // Outputs: NaNWe hope you've learned and understood the basics of data type conversions. Please, you can do yourself good by checking out the tutorial on JavaScript data types to learn more about the different data types available in JavaScript.