Most of the time, JavaScript automatically converts values from one data type to another when used in expressions. For instance, in mathematical operations, values are automatically converted to numbers. However, the final result may not always be as expected:
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: NaNThere are times when we need to manually convert a value from one data type to another. JavaScript provides several methods to perform such data type conversion tasks. In the following sections, we will explore these methods in detail.
Numeric conversion is typically necessary when we retrieve a value from a string-based source, such as a text input, but we expect it to be a number or need to treat it as such.
In such cases, you can utilize 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: numberIf the string is not a valid number, the result will be NaN. 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 NaNSimilarly, you can use the String() method to convert a value to a string.
Here's an example demonstrating 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: stringThe String() method can be applied to convert any type of numbers, variables, or expressions into strings:
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"Another method for converting numbers to strings is using the toString() method:
var num = 123;
alert(typeof num); // Outputs: number
var str = num.toString(); // Becomes a string "123"
alert(typeof str); // Outputs: stringBoolean conversions are straightforward. You can use the Boolean() method to convert any value to a Boolean value (true or false).
Values that are intuitively empty, such as 0, null, false, undefined, NaN, or an empty string (""), become false. Other values become true, as demonstrated in the example here:
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 trueIf you examine the example closely, you'll notice that the Boolean() method returns true for the string "0" and the string "false", whereas it returns false for the values 0 and false.
Note: In some programming languages (namely PHP) the string "0" is treated as false. But in JavaScript a non-empty string is always true.
All the conversions we've seen so far are performed on primitive types (data types that can hold only a single value at a time). But what happens with complex data types such as objects? Let's explore.
JavaScript automatically performs object-to-string conversion when we try to print out an object using methods like alert(obj) or document.write(obj). Similarly, object-to-number conversions are automatically performed when we try to add or subtract objects or apply mathematical functions, such as adding or subtracting date objects. Here's an example:
var date1 = new Date(2018, 5, 24);
alert(date1); // Display date string like: Sun Jun 24 2018 00:00:00
var date2 = new Date(2025, 8, 15);
var time = date2 - date1;
alert(time) // Display time in milliseconds: 228096000000You can also perform object-to-string conversion manually using the toString() method, which returns a string representation of the object. Additionally, for certain objects like Date, you can use the valueOf() method to perform object-to-number conversion. Here's an example:
var arr = [1, 2, 3];
arr.toString(); // returns "1,2,3"
var d = new Date(2018, 5, 24);
d.toDateString(); // returns date like Sun Jun 24 2018 00:00:00
d.valueOf(); // returns 1529778600000
Note: Object-to-Boolean conversion are insignificant, because all objects (including arrays and functions) are true in a boolean context. So there are only string and numeric conversions.
Certain JavaScript operators, such as the + and - operators, can also be used to perform type conversions, as shown in the following example:
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 understood the basics of data type conversions. For further exploration, please refer to the chapter on JavaScript data types to learn more about the various data types available in JavaScript.