JavaScript Type System
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
javascript
const text = "42";
const number = Number(text);
console.log(number + 8);
console.log(typeof number);The output is 50 then number.
Number(value) converts to a number.
String(value) converts to a string.
Boolean(value) converts to true or false.
Syntax
javascript
Number(value);
String(value);
Boolean(value);None of these change the original value.
Everything typed into a form arrives as a string.
This is the single most common reason to convert.
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.
Number gives NaN when the text is not a number.
Example
javascript
console.log(Number("42"));
console.log(Number("hello"));
console.log(Number(""));An empty string becomes 0, which surprises people.
String works on anything, including null and undefined.
Example
javascript
console.log(String(42));
console.log(String(true));
console.log(String(null));toString() does the same but throws on null.
Everything is either truthy or falsy, which the next lessons cover in full.
Example
javascript
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hello"));
console.log(Boolean(""));The output is true, false, true, false.
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
javascript
const text = "42";
console.log(+text + 8);
console.log(typeof +text);Prefer Number in code other people will read.
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>Run the above example in the Try It Editor.
Try letters:
Type a word into one box and watch the sum become NaN.
Number, String and Boolean convert explicitly.Number of unusable text gives NaN.Number("") is 0, not NaN.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.