6. JavaScript Data Types

What you will learn

• The basic data types in JavaScript
• How to check a type with typeof
• The difference between null and undefined
• How types convert, and why that can surprise you

Why types matter

Every value has a type, which decides what you can do with it. You can multiply numbers, but multiplying a sentence makes no sense. JavaScript works out the type of a variable from its current value, so one variable can hold different types at different times.

The main types

The first seven are called primitive types. Objects are covered in their own lesson.

Checking a type with typeof

<p id="demo"></p>

<script>
  const lines = [
    "42 is a " + typeof 42,
    "'Hi' is a " + typeof "Hi",
    "true is a " + typeof true,
    "undefined is a " + typeof undefined,
    "an array is an " + typeof [1, 2, 3],
    "null is an " + typeof null
  ];
  document.getElementById("demo").innerHTML = lines.join("<br>");
</script>

Two results surprise beginners. An array reports object because arrays are a kind of object. And typeof null reports object, a long-standing quirk of the language that was never changed.

Numbers

JavaScript has one number type for both whole and decimal numbers. Very large or small values can use scientific notation, such as 1.5e3 (which is 1500).

Decimal arithmetic can look odd, because computers store numbers in binary:

<p id="demo"></p>

<script>
  const sum = 0.1 + 0.2;
  document.getElementById("demo").textContent =
    "0.1 + 0.2 = " + sum + " | rounded: " + sum.toFixed(2);
</script>

This happens in most programming languages. Round with toFixed() when you show money or measurements.

Strings

A string is text inside quotes. Single quotes, double quotes, and backticks all work, as long as the opening and closing marks match.

Booleans

A boolean is true or false. Comparisons produce booleans, and conditions use them to make decisions.

<p id="demo"></p>

<script>
  const age = 20;
  document.getElementById("demo").textContent =
    "Is age greater than 18? " + (age > 18);
</script>

undefined and null

• undefined means “no value has been given”. JavaScript sets it automatically.
• null means “intentionally empty”. You set it yourself.

Converting between types

JavaScript sometimes converts types for you, which can give surprises. Convert on purpose instead:

<p id="demo"></p>

<script>
  const text = "25";
  const wrong = text + 5;            // joins as text
  const right = Number(text) + 5;    // adds as numbers

  document.getElementById("demo").innerHTML =
    "'25' + 5 = " + wrong + "<br>" +
    "Number('25') + 5 = " + right + "<br>" +
    "String(99) = '" + String(99) + "'<br>" +
    "Number('abc') = " + Number("abc");
</script>

NaN means “Not a Number”. It appears when a conversion to a number fails. Test for it with Number.isNaN(value).

Truthy and falsy

In a condition, some values act as false. These falsy values are false, 0, "" (empty string), null, undefined, and NaN. Almost everything else is truthy, including the text "0" and an empty array.

Common mistakes

• Adding a number to a string by accident, such as "5" + 2 giving "52".
• Expecting typeof null to say null.
• Comparing decimals for exact equality, such as 0.1 + 0.2 === 0.3, which is false.
• Forgetting that form input is always text.

<p id="demo"></p>

<script>
  const a = "10";
  const b = "5";
  document.getElementById("demo").textContent = Number(a) + Number(b);
</script>

Summary

• Core types: number, string, boolean, undefined, null, BigInt, symbol, and object.
• Use typeof to check a type, and convert on purpose with Number() and String().
• Form input is text, and decimals can be slightly inexact.