JavaScript Typeof — What is Logged?

Why This Question Matters

If you've spent any time in JavaScript, you've probably run into a situation where a variable is undefined or null and your app crashes with that dreaded Cannot read property 'x' of null.

The typeof operator is the first line of defense when debugging these issues. However, there is a specific quirk in the language that trips up almost every junior developer: the way JavaScript handles null. It’s one of those "gotchas" that often pops up in technical interviews to see if you actually understand the language's internals or if you're just guessing.

Understanding the difference between these two values—and how typeof reports them—is crucial for writing clean, bug-free code.

Understanding the Code

The snippet is straightforward, but the results are counterintuitive:

console.log(typeof undefined);
console.log(typeof null);

First, let's look at undefined. In JavaScript, undefined means a variable has been declared, but no value has been assigned to it yet. It’s the language's way of saying, "I know this variable exists, but it's empty." When you run typeof undefined, JavaScript returns the string "undefined". This makes perfect sense.

Then we hit null.

null is different. It isn't just "empty"; it is an intentional assignment. You use null to explicitly tell the program, "This variable should be empty."

Now, here is the weird part. When you run typeof null, you don't get "null". You get "object".

Wait, what? null is clearly not an object. It's a primitive value. So why does the engine lie to us?

Finding the Correct Answer

If you were looking at multiple-choice options, the correct answer is Option B (which typically lists "undefined" and "object").

Here is the logic:
1. typeof undefined $\rightarrow$ "undefined" (Correct and expected).
2. typeof null $\rightarrow$ "object" (The "bug" in JavaScript).

The reason typeof null returns "object" is actually a legacy bug from the very first version of JavaScript. In the early days, values were stored in tagged pointers. The tag for objects was 000. Because null was represented as a null pointer (basically all zeros in many systems), the typeof operator saw those zeros and assumed it was an object.

By the time the creators realized this was a mistake, millions of websites were already using JavaScript. Fixing it would have broken half the internet, so the "bug" became a permanent feature of the language.

Common Mistakes Developers Make

The biggest mistake is assuming typeof is a reliable way to check for null.

If you write code like this:

if (typeof myVar === 'object') {

  // Do something with the object

}

Another common point of confusion is the difference between null and undefined. Beginners often use them interchangeably. They aren't the same.
- undefined is "not initialized."
- null is "intentionally empty."

If you check null == undefined (loose equality), it returns true. But if you use null === undefined (strict equality), it returns false. This is a frequent source of bugs when developers aren't consistent with their equality checks.

Real-World Usage

In a production environment, you'll rarely use typeof to check for null. Instead, we use a few more reliable patterns.

If you want to check if a value is actually an object and not null, the standard move is:

if (myVar !== null && typeof myVar === 'object') {
  // Now we know it's actually an object
}

Or, more commonly in modern JS, we use Optional Chaining (?.). Instead of worrying if a value is null or undefined before accessing a property, we just do this:

const userName = user?.profile?.name;

This returns undefined if any part of the chain is null or undefined, preventing the app from crashing without needing a messy typeof check.

Key Takeaways

- typeof undefined gives you "undefined".
- typeof null gives you "object". This is a historical bug that will never be fixed.
- Don't rely on typeof to detect null. Use strict equality (=== null) or truthiness checks.
- null is an intentional absence of value; undefined is an unintentional one.
- Use optional chaining (?.) to handle these values gracefully in modern projects.