JavaScript Data Types and typeof

Every value in JavaScript has a type, and the type decides what operations do. 5 + 1 is 6. "5" + 1 is "51". Same symbols, different result, because one of them is text. Most beginner bugs with numbers come from this, specially with values that come from a form.

The types you'll use every day

• string: text, in quotes. "Ana", 'Manila', ` Hello `.
• number: whole numbers and decimals are the same type. 42, 3.5, -10.
• boolean: true or false.
• undefined: a variable exists but has no value yet.
• null: "no value", set on purpose.
• object: a group of labelled values, { name: "Ana", age: 28 }. Arrays, ["rice", "eggs"], are objects too.

There are a few more (bigint, symbol). You won't need them in this course.

typeof tells you what you have

When something behaves strangely, check the type before you check anything else.

console.log(typeof "250");
console.log(typeof 250);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof { name: "Ana" });
console.log(typeof ["rice", "eggs"]);
console.log(typeof null);

string
number
boolean
undefined
object
object
object

Two of those surprise people.

• An array says object. To check for an array, use Array.isArray(value).
• null says object. That's a bug from the first version of JavaScript that can't be fixed now without breaking old websites. To check for null, compare directly: value === null.

Why "5" + 1 is "51"

+ does two jobs. With two numbers it adds. If either side is a string, it joins text. Other math operators only work on numbers, so they convert the string first.

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

51
4
10
6

Now the real-world case. Anything you read from an input field is a string, even if the visitor typed a number. So this goes wrong:

const quantityFromInput = "3";
const price = 250;
console.log(quantityFromInput + price);
console.log(Number(quantityFromInput) * price);

3250
750

The first line didn't add anything. It glued "3" and "250" together. The fix is to convert on purpose with Number() before you do math.

const typed = "12 pcs";
const qty = Number(typed);
if (Number.isNaN(qty)) {
  console.log("Please enter a number, got:", typed);
}

Please enter a number, got: 12 pcs

undefined vs null

Both mean "nothing", but they say different things.

• undefined usually means "nobody set this yet". A let with no value, a missing object property, a function that doesn't return anything.
• null means "I checked, and there's nothing". You set it yourself, for example let selectedProduct = null; before the visitor picks one.

In your own code, use null when you mean "empty on purpose". Leave undefined to JavaScript. Then when you see undefined somewhere unexpected, you know something wasn't set, not that you chose it.

Truthy and falsy

In an if, every value counts as true or false. These are falsy: false, 0, "" (empty string), null, undefined, NaN. Everything else is truthy, including "0", "false" and an empty array [].

That's convenient (if (name) checks for a non-empty name) and dangerous (if (quantity) treats 0 as "missing"). When 0 is a valid value, compare explicitly.

Common mistakes

• Doing math on input values without Number().
• Checking typeof x === "array". It's never true. Use Array.isArray(x).
• Treating 0 or "" as missing because they are falsy.
• Writing "true" (a string) instead of true (a boolean). "false" is truthy.

What happens if you skip this

Your totals will be right in testing, because you typed numbers in the code, and wrong on the page, because the browser gives you strings. Customers see ₱3250 instead of ₱750, and the code looks correct when you read it.

Quick check: what does "10" + 5 - 5 give, and why?