Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Type System

JavaScript Type Conversion

Written by Published

Type conversion changes a value from one type to another on purpose.

Doing it deliberately is called explicit conversion, or casting.

When JavaScript does it for you it is called coercion, which is the next lesson.

Example

Example

javascript

const text = "42";

const number = Number(text);

console.log(number + 8);
console.log(typeof number);

The output is 50 then number.

The Three Converters

Number(value) converts to a number.

String(value) converts to a string.

Boolean(value) converts to true or false.

Syntax

Syntax

javascript

Number(value);
String(value);
Boolean(value);

None of these change the original value.

Converting Form Input

Everything typed into a form arrives as a string.

This is the single most common reason to convert.

Example

Example

javascript

const entered = "20";

console.log(entered + 5);
console.log(Number(entered) + 5);

The first joins to give 205; the second adds to give 25.

When Conversion Fails

Number gives NaN when the text is not a number.

Example

Example

javascript

console.log(Number("42"));
console.log(Number("hello"));
console.log(Number(""));

An empty string becomes 0, which surprises people.

Converting to a String

String works on anything, including null and undefined.

Example

Example

javascript

console.log(String(42));
console.log(String(true));
console.log(String(null));

toString() does the same but throws on null.

Converting to a Boolean

Everything is either truthy or falsy, which the next lessons cover in full.

Example

Example

javascript

console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hello"));
console.log(Boolean(""));

The output is true, false, true, false.

The Unary Plus

A plus sign in front of a value converts it to a number.

It is shorter than Number but much easier to miss when reading.

Example

Example

javascript

const text = "42";

console.log(+text + 8);
console.log(typeof +text);

Prefer Number in code other people will read.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Type Conversion</title>
</head>
<body>

  <h1>Type Conversion</h1>

  <input id="a" value="20">
  <input id="b" value="5">

  <p id="out"></p>

  <script>
    const a = document.getElementById("a").value;
    const b = document.getElementById("b").value;

    document.getElementById("out").innerHTML =
      "Joined as text: " + (a + b) +
      "<br>Added as numbers: " + (Number(a) + Number(b));
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try letters:

Type a word into one box and watch the sum become NaN.

Important Points

  • Number, String and Boolean convert explicitly.
  • Form input is always a string.
  • Number of unusable text gives NaN.
  • Number("") is 0, not NaN.
  • The unary plus converts too, but is easy to miss.

Conclusion

Explicit conversion makes your intention obvious to whoever reads the code.

Converting form input is something you will do constantly.

Doing it yourself avoids the surprises of the next lesson.

PreviousJavaScript typeofNextJavaScript Type Coercion