Type conversion

Why conversion matters

Every value in JavaScript has a type:

• "25" is a string, which means text. The quotes show that.
• 25 is a number.
• true is a boolean, which means a yes-or-no value.

"25" and 25 look almost the same on the screen. But they act differently when you do math, build a message, or make a decision.

Type conversion means turning a value of one type into a value of another type. Sometimes you ask for it yourself. Other times JavaScript does it without telling you, because a sign like + or - needs a certain type. This lesson shows both, and how to tell them apart.

const scoreText = "7";
console.log(Number(scoreText));
console.log(String(7));
console.log(Boolean(7));

Line 1 stores the text "7". Lines 2, 3, and 4 each call a function that names the type it wants:

• Line 2: Number(scoreText) turns the text into the number 7.
• Line 3: String(7) turns the number into the text "7".
• Line 4: Boolean(7) turns the number into true.

The console shows 7, 7, and true. It doesn't show quotes around text, so the first two lines look the same even though one is a number and one is a string.

Earlier lessons showed a puzzle. "5" + 3 gives "53", but "5" - 3 gives 2. The Interaction lesson also showed that prompt() always gives back a string, so "25" + 1 gives "251". By the end of this lesson, you will be able to predict results like these.

JavaScript has three built-in functions for conversion. Each one has the name of the type it gives back:

• Number(value) gives back a number.
• String(value) gives back a string.
• Boolean(value) gives back true or false.

Try the playground below. Type any text, or click one of the ready-made values. The code stays the same. Only the value on line 1 changes. The playground also shows two more tools:

• parseFloat(value) reads a number from the start of a string.
• +value is a plus sign in front of one value. It is called unary plus, and it does the same as Number(value).

1const value = "42px";2Number(value);3parseFloat(value);4+value;5String(value);6Boolean(value);7Number.isNaN(Number(value));

Look at what happens with "42px". Number() needs the whole value to be a number. The px part is not a number, so it gives NaN, which means "Not a Number". parseFloat() is less strict. It reads 42 from the start and stops at px. Unary plus gives the same answer as Number().

There are two ways a value can change type.

Explicit conversion means you ask for it in the code. You can point at the line where it happens. Number(input) says "make a number here". String(total) says "make text here".

Implicit conversion means JavaScript converts the value for you while it does another job. Nothing in the code asks for it:

• "5" - 2 subtracts. Subtraction needs numbers, so JavaScript turns "5" into 5 first.
• if (items.length) needs a yes or no. So JavaScript turns the number into a boolean first.

Implicit conversion is not always wrong. Most code uses it in conditions, like if (items.length). The habit to build is this: convert explicitly as soon as a value comes into your program, especially text the user typed.

What Number() gives back

Use Number(value) first when you need a number. It always gives back one of two things:

• a number, when the value can be read as a number;
• NaN, a special number value that means "Not a Number", when it can't.

After you convert, check the result with Number.isNaN(result). It gives true when the conversion failed.

The table below shows common values. Read each row as: "Number() of this value gives this result, for this reason."

The most useful surprise is blank text. Number("") gives 0. So does Number(" \n "), which holds only spaces and a line break. JavaScript first removes spaces and line breaks from both ends of the text. If nothing is left, the answer is 0.

If blank input should count as a mistake, check for it before you convert. value.trim() gives the text without spaces at the ends, so value.trim() === "" is true for blank text.

The next example also uses parseInt(text, 10). It works like parseFloat(), but it only reads whole numbers. The 10 means "read it as a normal base-10 number".

console.log(Number("12px"));
console.log(parseInt("12px", 10));
console.log(Number(" 12 "));
console.log(Number(""));

• Line 1 prints NaN. Number() can't use the px at the end.
• Line 2 prints 12. parseInt() reads 12 and stops at px.
• Line 3 prints 12. The spaces around 12 are removed first.
• Line 4 prints 0. Empty text becomes 0.

What String() and Boolean() give back

String(value) turns a value into text, so you can show it in a message. A template literal does this too. It is text between backticks, like `Items: ${items}`. Each ${...} part is turned into text and placed inside.

Read each row of the next table as: "String() of this value gives this text."

const items = 3;
console.log(`Items: ${items}`);
console.log(String(items));

Line 2 uses a template literal and prints Items: 3. Line 3 uses String(items) and prints 3. Both are good ways to build text for a page.

Boolean(value) answers one question: is this value truthy or falsy? A truthy value counts as true in an if. A falsy value counts as false. You met this list in the Booleans, null & undefined lesson. These are all the falsy values: false, 0, -0, 0n, "", null, undefined, and NaN. Every other value is truthy.

The next table shows each falsy value, then four truthy values that often trick people. Read each row as: "Boolean() of this value gives this result."

So Boolean(" ") is true, because a space is still a character. Boolean("false") and Boolean("0") are true too. Boolean() doesn't read the words inside a string. It only checks if the string is empty.

An operator is a sign that does a job with values, like +, -, *, or >. Many operators need a certain type, and convert values to get it:

• -, * (multiply), and / (divide) only do math, so they turn strings into numbers.
• > (greater than) compares two values. When one side is a number, it turns the other side into a number too.
• + is the tricky one. It has two jobs: it adds numbers, and it joins strings into one longer string.

console.log("5" + 1);
console.log("5" - 1);

Line 1 has a string on one side of +, so + joins text. The 1 becomes "1", and the console prints 51. Line 2 uses -, which can only subtract. So "5" becomes the number 5, and the console prints 4.

Now try it step by step. In this replay, lines 1 and 2 stay the same. Pick a different operator for line 3, and guess what line 4 prints before you step through.

1const left = "5";Run2const right = 2;3const result = left + right;4console.log(result);

The next replay has seven more implicit conversions, each run in real JavaScript. Later lessons, Type coercion and Equality & sameness, explain the full rules behind them. For now, watch which type each operator needs.

1console.log("5" * "2");Run2console.log("5" + 2);3console.log("5" - 2);4console.log(true + 1);5console.log(null + 1);6console.log(undefined + 1);7console.log("3" > 2);

Some conversion results are famous because they look like jokes. They are real JavaScript. You never need to write code like this. But if you can explain each one, you understand the rules. Each step in the replay also says how to write that line clearly.

1console.log([] + []);Run2console.log([] + {});3console.log("b" + "a" + +"a" + "a");4console.log("10" / "2");5console.log("1" + 1 - 1);6console.log(0.1 * "3");7console.log(Number(" \n "));8console.log(Boolean(" "));9console.log(String(-0));

Here is why the first three lines print what they print:

• [] + [] prints empty text. + turns each empty array into empty text, then joins two empty texts.
• [] + {} prints "[object Object]". The empty array becomes "", and a plain object becomes the text "[object Object]".
• "b" + "a" + +"a" + "a" prints "baNaNa". The + right in front of the second "a" is unary plus. It tries to turn "a" into a number and gets NaN. The other + signs join it all into text.

Where you will use this

You will use conversion most with user input. Text boxes, prompt(), parts of a web address, and saved settings almost always give you strings, even when they look like numbers. The safe habit has three steps:

1. Convert the value as soon as it comes into your program.
2. Check that the conversion worked.
3. Use the converted value everywhere after that.

1const ageText = prompt("How old are you?");2const age = Number(ageText);3 4if (Number.isNaN(age)) {5  console.log("Please type a number.");6} else {7  console.log(age + 1);8}

Line 1 asks the user their age. If they type 25, ageText holds the string "25". Without line 2, ageText + 1 would join text and give "251".

• Line 2 turns the text into a number with Number(ageText).
• Line 4 checks if that failed. For text like "twenty", line 5 asks the user to type a number.
• Line 7 runs only when age is a real number. It does real math and prints 26.

const priceText = "12";
const quantityText = "3";
const price = Number(priceText);
const quantity = Number(quantityText);
const total = price * quantity;
console.log(`Total: ${total}`);

The boxes in a web form give you strings, even when the user typed digits. Lines 1 and 2 stand in for those form values. Lines 3 and 4 turn the price and the quantity into numbers. Then line 5 can multiply them, and line 6 prints Total: 36.

Common misconceptions

For each code question, first name the type of each value. Then ask which type the function or operator needs.

Key takeaways

• String(), Number(), and Boolean() convert a value on purpose. This is explicit conversion.
• Number() needs the whole value to be a number. If it isn't, you get NaN.
• Boolean() gives false only for the eight falsy values. Text that isn't empty, and every object, gives true.
• + joins text when one side is a string. -, *, and / turn strings into numbers.
• Convert user input as soon as it comes in, check it, then keep using the converted value.

Up next: Operators. You will use math signs, comparisons, === and ==, and logical operators, with fewer surprises.