What you'll be able to do

By the end of this page you should be able to add and compare numbers without trusting every decimal, convert text from a form into a real number on purpose, and recognize NaN when a calculation quietly goes wrong. You will also use a few Math helpers — round, min, max, random — the way a beginner actually needs them, not as a catalog of every method.

Previous post: types you actually meet.

Who this is for

  • People who saw 0.1 + 0.2 and thought their laptop was broken
  • Beginners who did "20" + 1 after a form and got "201"
  • Anyone who logged a result, saw NaN, and did not know that typeof NaN is still "number"

You can skip this if you already convert form strings with Number, you check Number.isNaN, and you know floating-point is approximate. Come back when a price or a score looks off by 0.0000000002.

One type, two looks: 20 and 99.5

In JavaScript, both of these are the same type: number.

const age = 20;
const price = 99.5;
console.log(typeof age);
console.log(typeof price);

There is no separate “integer type” you have to declare. That is convenient. It is also why money and decimals need extra care — the engine is not a school calculator with infinite precision.

Scenario A — whole counts. Clicks, list length, loop indexes. Whole numbers are usually well behaved: 3 + 4 is 7.

Scenario B — money or measurements. 0.1 + 0.2 is not exactly 0.3 in IEEE floating-point math (the system JS uses). Log it:

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3);

You will see a long decimal and false. This is not unique to JavaScript. For beginner UI, round when you display money, or work in paise/cents as whole numbers if you are storing cash. Do not write if (0.1 + 0.2 === 0.3) and expect it to pass.

NaN: a failed number that still claims to be a number

NaN means “not a number.” You get it when a conversion or a math step cannot produce a real numeric value.

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

That is NaN, and typeof still says "number". That combination is why beginners miss it.

Scenario A — bad text to number. Number("20px") is NaN. Number("") is 0, which is a different trap — empty input becomes zero, not “missing.”

Scenario B — math on garbage. undefined + 1 becomes NaN. Then every later + with that value stays NaN, so a score can “disappear” three lines after the real mistake.

Do not check with value === NaN. That comparison is always false. Use:

Number.isNaN(Number("hello"));

Number.isNaN is the honest test for this value. The older global isNaN("hello") coerces first and will confuse you; prefer Number.isNaN on a value you already converted.

Turning form text into a number on purpose

Form fields and prompt() give you strings. Convert when you mean math.

const raw = "20";
const asNumber = Number(raw);
console.log(asNumber + 1);

That prints 21. "20" + 1 would have printed "201".

Scenario A — a clean integer string. Number("20") and parseInt("20", 10) both work. The 10 means decimal (base 10). Always pass it so "08" is not treated as octal in old engines.

Scenario B — leftover units. parseInt("20px", 10) is 20 because parseInt reads from the start until it hits a non-digit. Number("20px") is NaN. Pick on purpose: if you want “fail if the whole string is not a number,” use Number. If you want “take the leading digits,” use parseInt.

parseFloat("19.5kg") is 19.5. Same idea as parseInt, but it keeps the decimal part.

If conversion fails, check Number.isNaN before you write the value into the page. Showing NaN clicks looks like the app is broken even when only the input was empty junk.

Infinity and dividing by zero

console.log(1 / 0);
console.log(-1 / 0);

You get Infinity and -Infinity, not a crash. That can hide a zero in a denominator until a layout looks insane.

Scenario A — a ratio. score / total when total is still 0 at the start of a game.

Scenario B — a slider or input you forgot to validate. User types 0 in “split between how many people.” Guard with if (total === 0) before you divide.

Math you will actually use

You do not need the whole Math object. These cover most beginner jobs.

Round for display

console.log(Math.round(4.4));
console.log(Math.round(4.5));
console.log(Math.floor(4.9));
console.log(Math.ceil(4.1));

round goes to nearest (with the usual .5-up behavior for positives). floor goes down. ceil goes up. Scenario A: show a 1-decimal rating. Scenario B: “how many pages do I need for 10 items at 3 per page?” — that is Math.ceil(10 / 3).

Min and max

const score = 120;
const clamped = Math.min(100, Math.max(0, score));
console.log(clamped);

That keeps a value between 0 and 100. Useful for progress bars and percentages.

Random (beginner-honest)

const zeroToOne = Math.random();
const die = Math.floor(Math.random() * 6) + 1;
console.log(die);

Math.random() is from 0 (included) to 1 (not included). It is fine for a practice dice or shuffling a demo list. It is not for security, lottery, or OTP codes.

A tiny practice file

Save as numbers.html. Type a number, click the button, and watch the paragraph. Try 20, then 20px, then leave it blank.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Numbers</title>
  </head>
  <body>
    <input id="raw" placeholder="Type a number" />
    <button id="go">Add 1</button>
    <p id="out">Result will show here.</p>
    <script>
      const rawInput = document.getElementById("raw");
      const goButton = document.getElementById("go");
      const out = document.getElementById("out");

      goButton.addEventListener("click", function () {
        const n = Number(rawInput.value);
        if (Number.isNaN(n)) {
          out.textContent = "That is not a number I can add to.";
          return;
        }
        out.textContent = "Plus one is " + (n + 1);
      });
    </script>
  </body>
</html>

If you skip the Number.isNaN check, blank or hello will show NaN on the page. That is the bug this file is meant to make obvious.

Mistakes I see a lot

1. Using + to “add” form values. Without Number, you concatenate. Convert first, then add.

2. Testing NaN with ===. Use Number.isNaN.

3. Comparing money with === after adding decimals. Round for display, or use whole paise/cents.

4. parseInt without base 10. Write parseInt(text, 10).

5. Treating Math.random() as a secure generator. It is a toy shuffle, not a lock.

What to try before the next post

  1. Log 0.1 + 0.2 and 0.1 + 0.2 === 0.3.
  2. Log Number("hello"), typeof of that result, and Number.isNaN of it.
  3. Compare Number("20px") with parseInt("20px", 10).
  4. Build the tiny HTML file and try a real number, then junk text.

Next in this series: strings and template literals — how text is built, concatenated, and broken by quotes.

Try this next outside the series

Values become easier when you see them inside real forms and payloads, not only tiny console lines.

javascripttutorialsdevelopers