Numbers & math

One type for all numbers

In JavaScript, every everyday number has the same type: number. A type is the kind of a value. The number type holds:

• whole numbers, like 7. Whole numbers are also called integers.
• decimals, like 3.14.
• a few special values, like NaN. You'll meet them later in this lesson.

The Data types lesson showed one odd fact: typeof NaN gives "number". That is not a mistake. This lesson explains why.

Web pages use numbers all the time: prices, form inputs, page counts, timers, chart values, and random picks. Most of the time, numbers act like the numbers on a calculator. But some decimals are not stored exactly. JavaScript stores a number that is very, very close instead. For example, 0.1 is stored as a number a tiny bit away from 0.1.

This lesson uses the math signs +, -, *, /, and % only a little. The Arithmetic & assignment lesson, at the start of the next module, covers them. Four more number topics get their own lessons later:

• BigInt, for whole numbers too big for number.
• Type conversion, for turning other values into numbers.
• Number & Math in depth, for more number tools.
• Internationalization with Intl, for showing numbers in other languages and currencies.

A computer stores everything as bits. A bit is a single 0 or 1. JavaScript stores each number in 64 bits. The rules for using those 64 bits come from a standard called IEEE 754. A standard is a shared rulebook, so every computer stores numbers the same way. Numbers stored like this are called floating-point numbers.

The 64 bits are split into three parts. You don't need to learn them yet:

• 1 bit says plus or minus.
• 11 bits say how big the number is.
• 52 bits hold the digits.

64 bits give a huge number of patterns, but not an endless number. There are endless decimals, so many of them can't be stored exactly. For those, JavaScript keeps the closest number it can store.

1const left = 0.1;2const right = 0.2;3const sum = left + right;4const expected = 0.3;5console.log(sum);6console.log(sum === expected);7console.log(sum.toFixed(2));8console.log(sum.toPrecision(20));9console.log(Math.abs(sum - expected) < Number.EPSILON);

Here is the code in the playground, line by line. Lines 1 and 2 save 0.1 and 0.2, and line 3 adds them. Line 4 saves the sum you expect, 0.3. Then:

1. Line 5 prints the stored sum: 0.30000000000000004.
2. Line 6 checks whether the sum equals 0.3. It prints false.
3. Line 7 uses toFixed(2). It rounds the number to two digits after the decimal point, for showing to people. It prints 0.30.
4. Line 8 uses toPrecision(20) to show 20 digits. Now you can see the tiny error: 0.30000000000000004441.
5. Line 9 checks whether the sum and 0.3 are close enough. Math.abs gives the gap between them, without a minus sign. Number.EPSILON is a tiny number, about 0.0000000000000002. The gap is smaller than that, so it prints true.

JavaScript is not bad at math. Base 2 and base 10 just have different easy fractions:

• 0.5 (a half) and 0.25 (a quarter) are exact in binary.
• 0.1 (a tenth) is not exact in binary.

So 0.1 + 0.2 adds two numbers that are each a tiny bit off. The result is the closest number JavaScript can store: 0.30000000000000004.

1const biggestSafeAge = Number.MAX_SAFE_INTEGER;2console.log(Number.isSafeInteger(biggestSafeAge));3console.log(Number.isSafeInteger(biggestSafeAge + 1));4console.log(biggestSafeAge + 1 === biggestSafeAge + 2);

Line 1 saves the biggest safe whole number in biggestSafeAge. Line 2 asks Number.isSafeInteger whether it is safe, and prints true. Line 3 asks about the next whole number up, and prints false.

Line 4 shows why the limit matters. It prints true: JavaScript stores biggestSafeAge + 1 and biggestSafeAge + 2 as the same number. Use Number.isSafeInteger when a whole number must stay exact.

The number type also has a few special values. They are not ordinary numbers on a number line:

• NaN stands for "Not a Number". It means "this math has no number answer", like 0 / 0. Even so, its type is number.
• Infinity means bigger than any number JavaScript can store. -Infinity means smaller than any number. You get them when you divide by zero, or when a result grows too big.
• -0 is zero with a minus sign. JavaScript keeps the sign, even for zero.

NaN has one more odd rule. It is not equal to anything, not even itself. So NaN === NaN is false, and === can't find it. To check for it, use Number.isNaN(value). It gives true only when the value really is NaN.

1console.log(0 / 0);Run2console.log(NaN === NaN);3console.log(Number.isNaN(NaN));4console.log(isNaN("hello"));5console.log(Number.isNaN("hello"));6console.log(1 / 0);7console.log(-1 / 0);8console.log(Object.is(-0, 0));9console.log(1 / -0);

Press Step to go through the nine lines. Lines 1 to 3 are about NaN. Lines 4 and 5 compare two checks:

• The old isNaN first turns its input into a number. The text "hello" becomes NaN, so it says true.
• Number.isNaN doesn't turn anything into a number. Text is not NaN, so it says false.

Lines 6 and 7 divide by zero. Lines 8 and 9 are about -0. Object.is is a function that checks whether two values are exactly the same. It can tell -0 from 0, so line 8 prints false.

The table below sums up the four special values. Read each row as: this value, how you get it, and what to remember about it.

Most of the time you can treat -0 just like 0. It shows up in rare cases, like 1 / -0. Think of a thermometer that rounds -0.2° and shows -0°. The minus tells you it was just below zero.

Rounding means turning a number into a simpler one, often a whole number. The Math object, which comes with JavaScript, has four rounding tools:

• Math.round goes to the nearest whole number. A half, like 2.5, goes up, toward the bigger number.
• Math.floor always goes down. Think of the floor of a room.
• Math.ceil always goes up. "Ceil" is short for ceiling.
• Math.trunc cuts off the decimal part. "Trunc" is short for truncate, which means cut short.

The differences show best with negative numbers. Remember that -2 is bigger than -3, because -2 is closer to zero.

1const value = -2.5;Run2console.log(Math.round(value));3console.log(Math.floor(value));4console.log(Math.ceil(value));5console.log(Math.trunc(value));6console.log(value.toFixed(2));

Pick a value and press Step. Line 1 saves the value. Lines 2 to 5 use the four tools. Line 6 uses toFixed(2), which rounds to two digits after the decimal point. toFixed gives back text (a string), not a number, because its job is to show a number to people.

The table below shows results that often surprise people. Read each row as: this code gives this result, for this reason.

1const cents = 1299;2const price = cents / 100;3console.log(price.toFixed(2));4console.log(price.toLocaleString("en-US", { style: "currency", currency: "USD" }));

Line 1 stores the price as 1299 cents. Line 2 divides by 100 to get dollars: 12.99. Line 3 prints the text 12.99, with two digits after the point.

Line 4 uses toLocaleString. It writes a number the way people in one place expect to read it. "en-US" means English in the United States, and the options ask for US dollars. It prints $12.99. To learn more ways to show money, dates, and languages, go on to Internationalization with Intl.

Form inputs and web addresses give you text, even when the text looks like a number. You need to turn the text into a number before you can do math with it. There are three tools for that:

• parseInt(text, 10) reads a whole number from the start of the text. It stops at the first character that doesn't fit.
• parseFloat(text) reads a decimal number from the start of the text. It stops the same way.
• Number(text) tries to turn the whole text into a number. If any part doesn't fit, it gives NaN. The Type conversion lesson covers it in depth.

1const input = "42px";2console.log(parseInt(input, 10));3console.log(parseFloat(input));4console.log(Number(input));

The table below shows common cases. Read each row as: this code gives this result, for this reason.

1const priceText = "12.50";2const ageText = "12 years";3const scoreText = "98.5 points";4console.log(Number(priceText));5console.log(parseInt(ageText, 10));6console.log(parseFloat(scoreText));

Lines 1 to 3 save three pieces of text. Then each line uses a different tool:

1. Line 4 uses Number, because the whole price text is a number. It prints 12.5.
2. Line 5 uses parseInt, because a word comes after the age. It prints 12.
3. Line 6 uses parseFloat, to keep the decimal part of the score. It prints 98.5.

Use Number when the whole text should be a number. Use the parse tools when a unit, like px or kg, comes after the number. But be careful: they ignore everything after the number. So they can hide a typo, like "12abc", which parseInt reads as 12.

Math is an object that comes with JavaScript, full of number tools. You don't create it. You call its functions directly, like Math.max(4, 9).

The table below shows the most useful ones. Read each row as: what the tool does, an example, and what the example gives.

Math.max() with no numbers gives -Infinity. It starts from the smallest value there is and keeps any bigger number it sees. With no numbers, nothing is bigger, so -Infinity is left.

Math.random() gives a random decimal. It is at least 0 and always less than 1. The playground below uses it to roll a die.

1function rollDie() {2  return Math.floor(Math.random() * 6) + 1;3}4console.log(rollDie());

Here is how line 2 of the dice code works, step by step:

1. Math.random() gives a decimal from 0 up to, but not including, 1.
2. * 6 stretches it to a decimal from 0 up to, but not including, 6.
3. Math.floor rounds it down to a whole number: 0, 1, 2, 3, 4, or 5.
4. + 1 moves the range to 1 through 6, like a real die.

Underscores in numbers

Long numbers are hard to read. Is 1000000 one million or ten million? You can put underscores between the digits: 1_000_000. These underscores are called numeric separators. They are only for people who read the code. JavaScript ignores them, so 1_000_000 is the same number as 1000000.

1const population = 1_000_000;2const cents = 12_50;3console.log(population === 1000000);4console.log(cents);

Line 1 stores one million, written with underscores. Line 2 stores 1250, written as 12_50. Line 3 prints true: the underscores didn't change the value. Line 4 prints 1250, with no underscore.

Underscores have a few rules. Read each row of the table as: is this allowed, and why?

Where you'll use this

Numbers show up whenever a page turns what someone typed into a decision. A shopping cart, for example:

• reads how many items you want from the text you typed.
• keeps prices in whole cents.
• picks random products to suggest.
• rounds a price only when it shows the price to you.

Compare two ways to add 10 cents and 20 cents:

1const total = 0.1 + 0.2;2console.log(total === 0.3);3console.log(total.toFixed(2));

1const cents = 10 + 20;2console.log(cents === 30);3console.log((cents / 100).toFixed(2));

The first example keeps dollars as decimals. Line 1 adds 0.1 and 0.2. Line 2 prints false, because the sum is a tiny bit off. Line 3 prints 0.30, so the screen looks fine, but the check failed.

The second example keeps whole cents. Line 1 adds 10 and 20, which is exactly 30. Line 2 prints true. Line 3 turns cents into dollar text only at the end, and prints 0.30.

Common mix-ups

Here are five common wrong ideas about numbers, and what is really true.

Try each task before you look at the hints. The first ones ask what code prints. The later ones ask you to fix money, read a die, read a weight, and round to cents.

console.log(0.1 + 0.2);
console.log(Number.isNaN(0 / 0));
console.log(Object.is(-0, 0));

const total = 0.1 + 0.2;
console.log(total === 0.3);
console.log(total.toFixed(2));

const cents = 10 + 20;
console.log(cents === 30);
console.log((cents / 100).toFixed(2));

function rollDie() {
  return Math.floor(Math.random() * 6) + 1;
}

function rollDie() {
  return Math.floor(Math.random() * 6) + 1;
}

const input = "12.5kg";
console.log(parseFloat(input));

const input = "12.5kg";
console.log(parseFloat(input));

function roundToCents(value) {
  return Math.round((value + Number.EPSILON) * 100) / 100;
}
console.log(roundToCents(1.005));

function roundToCents(value) {
  return Math.round((value + Number.EPSILON) * 100) / 100;
}
console.log(roundToCents(1.005));

Pick an answer, then read every explanation. The wrong answers are mistakes that beginners often make. For a code question, work out the exact value inside console.log.

Key takeaways

• Every everyday number in JavaScript has the type number. It is stored in 64 bits, using the IEEE 754 rules.
• Some decimals, like 0.1, are stored as a number that is a tiny bit off.
• NaN, Infinity, and -0 are real number values with special rules. Check for NaN with Number.isNaN.
• toFixed gives text for people to read. Keep money in whole cents.
• parseInt and parseFloat read a number from the start of the text. Number looks at the whole text.
• Math gives you rounding, powers, square roots, pi, and random numbers.

Up next: Strings.