What you'll be able to do

By the end of this page you should be able to look at a value and say what kind of thing it is — text, a number, yes/no, “empty on purpose,” or “never given a value.” You will also use typeof as a flashlight, and you will know why that flashlight lies about null.

This is the start of Phase 2 (values). We are not doing full string methods or number math yet. Those get their own posts. Today is the map so later posts have somewhere to hang.

Previous post: naming, semicolons, and clean basics.

Who this is for

  • People who saw "5" + 1 print "51" and thought JavaScript was broken
  • Beginners who mix null and undefined because both look like “nothing”
  • Anyone who ran typeof once, got a surprising string, and closed the tab

You can skip this if you already know the six everyday types below, you expect typeof null === "object", and you know + with a string concatenates. Come back when a form value is "" and you are not sure if that is null.

Type means “what kind of value is this?”

A type is not a decoration. It is the rules for what you can do with a value. You can add two numbers. You cannot call a number like a function. You can put quotes around text. You cannot put quotes around true and still have a boolean — that would be a string that looks like the word true.

Scenario A — a score. let clickCount = 0; is a number. clickCount + 1 makes sense.

Scenario B — a name on a form. const city = "Pune"; is a string. city + 1 does not mean “Pune plus one on a map.” It often means glue the character 1 onto the text.

The rule: before you combine two values, notice their types. A lot of “JS is weird” moments are two types meeting without you noticing.

The types you will live with this month

string — text

Text lives in quotes.

const city = "Jaipur";
const greeting = "hello";
console.log(typeof city);

typeof city prints "string". Empty text is still a string: "" is not null. A form field the user left blank is often "", which is why if (city) can surprise you later — we will unpack truthy/falsy in its own post.

Scenario A — you meant text. A city name, a button label, an error message.

Scenario B — you meant a number but typed quotes. "20" is not the number 20. It is two characters. Adding it with + will not do school math.

number — quantities (including awkward ones)

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

That prints "number". JavaScript does not split “integer” and “decimal” into two beginner types the way some languages do. Both are number.

There is also NaN (“not a number”), which is still typed as "number" — a famous rude joke. You get it from things like Number("hello"). We will treat NaN properly in the numbers post. For today: if a calculation looks insane, log typeof and the value.

boolean — yes or no

const isReady = true;
const hasError = false;
console.log(typeof isReady);

Booleans are the answers to questions: is the button disabled, did the form fail, is the user logged in. They are not the strings "true" and "false". Those are text.

Scenario A — a real boolean. const isOpen = true;

Scenario B — a string that looks like one. const isOpen = "true"; then later if (isOpen) is not doing what you think in every case, and comparing with === to true will fail. Keep quotes off actual booleans.

undefined — no value was given

If you declare a name with let and do not assign, it is undefined. If you ask an object for a field that was never set, you often get undefined. If a function does not return, the result is undefined.

let nickname;
console.log(nickname);
console.log(typeof nickname);

That logs undefined and "undefined".

Scenario A — you forgot to assign. let city; then you log city before the user typed anything.

Scenario B — a missing HTML id. document.getElementById("nope") returns null, not undefined — which is the next heading. Beginners lump both into “nothing.” They are different nothings.

null — empty on purpose

null is a value you (or an API) set to mean “I looked, and there is nothing here.”

let selectedUser = null;
console.log(selectedUser);

Scenario A — you cleared a selection. No user is chosen yet, and you want that to be explicit.

Scenario B — the DOM found no node. getElementById returns null. Then null.textContent is a TypeError, which you already met in the errors post.

The practical difference: undefined often means “never filled in.” null often means “filled in with empty.” Real code mixes them, so you still check both. Do not pretend they are identical.

typeof — a flashlight that sometimes lies

typeof tells you the type name as a string.

console.log(typeof "Pune");
console.log(typeof 20);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

You should see "string", "number", "boolean", "undefined", and then "object" for null.

That last one is a decades-old language bug that was never fixed because too much code depends on it. typeof null is "object". It does not mean null is a useful object. If you need to test for null, compare with ===:

const node = document.getElementById("missing");
console.log(node === null);

Scenario A — checking a string vs a number from a form. Forms give you strings. typeof ageInput may be "string" even when the user typed 20. That is why "5" + 1 becomes "51": + with a string concatenates.

Scenario B — checking null. Do not write typeof node === "object" to mean “this is null.” Almost everything that is not a primitive will also say "object". Use === with null.

We will go deeper on == vs === and on "5" - 1 becoming 4 in later posts. Remember one line for now: + next to a string glues text.

A tiny console drill

Run these one at a time and write down what you see before you run the next:

typeof "5";
typeof 5;
"5" + 1;
5 + 1;
typeof null;
typeof undefined;
let x;
typeof x;

If "5" + 1 shocked you, you are in the right series. The language is following a rule. The rule is just easy to miss when quotes look like decoration.

Mistakes I see a lot

1. Treating "false" as a boolean. It is a non-empty string. We will cover truthy/falsy soon; until then, use real true / false.

2. Using typeof to detect null. It will say "object". Compare with === null.

3. Adding user input as if it were a number. Input values are strings. "10" + 5 is "105". Convert on purpose later (numbers post); do not hope.

4. Assuming empty string, null, and undefined are one thing. They show up in different places. Log typeof and the value when a condition misbehaves.

What to try before the next post

  1. Log typeof for a string, a number, a boolean, null, and an unassigned let.
  2. Run "5" + 1 and 5 + 1 side by side.
  3. Run typeof null and then null === null.
  4. Put id="box" on a paragraph, then log typeof document.getElementById("box") and document.getElementById("nope") === null.

Next in this series: numbers and Math you actually use — decimals, NaN, and rounding, without pretending JavaScript is a calculator from school.

Try this next outside the series

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

javascripttutorialsdevelopers