Type Conversion in JavaScript

<Undefined & NullArrays>

Automatic conversion

JavaScript is a weak type programming language. It will always try to execute the code, regardless of the given value's data types, even if it does not make sense. For example:

javascript
1console.log(1 + "1");
text
111

In this case, JavaScript will assume you are trying to perform a concatenation operation, and it will convert the number 1 into a string and then join the two strings together.

javascript
1console.log(5 * null);
text
10

And in this example, null will be converted into the number 0, and 5 times 0 gives 0.

Even though these examples technically work, you should never rely on automatic conversions, as they can lead to unexpected problems.

A better way to code is to convert the values involved in the operation explicitly to ensure they are always the intended types.

Convert to strings

For example, if you intend to perform string concatenation, then make sure all the values are converted into strings using the String() function.

javascript
1console.log(typeof String(null));
2console.log(typeof String(undefined));
3console.log(typeof String(true));
4console.log(typeof String(false));
5console.log(typeof String(123));
6console.log(typeof String("123"));
text
1string
2string
3string
4string
5string
6string

The Boolean and number types also have a built-in toString() method that can do the same thing. Except it doesn't work on the value directly. You must pass the value to a variable and then call the method through the variable name.

javascript
1let a = true;
2let b = false;
3let c = 123;
4let d = "123";
5
6console.log(typeof a.toString());
7console.log(typeof b.toString());
8console.log(typeof c.toString());
9console.log(typeof d.toString());
text
1string
2string
3string
4string

The String() method converts the value itself into a string, while the toString() method returns a converted result without altering the original value.

Convert to numbers

The Number() function can be used to convert other data types into numbers. The conversion obeys the following rules:

  • Strings that contain only white spaces will be converted into 0.
javascript
1console.log(Number("\n\t   "));
text
10
  • Strings that can be converted into numbers without errors, meaning they contain only number digits or a sign in the front, will be converted into the corresponding number.
javascript
1console.log(Number("00001"));
2console.log(Number("12345"));
3console.log(Number("-12345"));
4console.log(Number("-0.001"));
text
11
212345
3-12345
4-0.001
  • The leading and tailing white spaces will be automatically removed.
javascript
1console.log(Number("\t00001\t"));
2console.log(Number("12345\n"));
text
11
212345
  • If an error is encountered during conversion, meaning one or more characters can not be converted, then the string will become NaN.
javascript
1console.log(Number("000a01"));
2console.log(Number("123 45"));
3console.log(Number("-12-345"));
4console.log(Number("-0.00.1"));
text
1NaN
2NaN
3NaN
4NaN
  • For Boolean values, true will become 1, and false will become 0.
javascript
1console.log(Number(true));
2console.log(Number(false));
text
11
20
  • null will become 0, and undefined will become NaN. This is also one of the few differences between null and undefined. But again, in practice, you are unlikely to encounter circumstances where you need to differentiate the two explicitly.
javascript
1console.log(Number(null));
2console.log(Number(undefined));
text
10
2NaN

Convert to Boolean values

The Boolean() function is used to convert other data types into either true or false. As we've demonstrated before, all falsy values will become false:

javascript
1console.log(Boolean(null));
2console.log(Boolean(undefined));
3console.log(Boolean(0));
4console.log(Boolean(""));
text
1false
2false
3false
4false

And all truthy values will become true:

javascript
1console.log(Boolean(10));
2console.log(Boolean(-10));
3console.log(Boolean(" "));
4console.log(Boolean("qwerty"));
text
1true
2true
3true
4true
<Undefined & NullArrays>