Labels

JavaScript Roadmap — Day 5: Undefined, Null, and typeof

 

📋 In This Lesson Day 5
1. undefined
2. null
3. The Famous Bug
4. == vs === Brain Bender
5. void Operator
6. Nullish Coalescing
7. Quick Reference
8. Try It Yourself
9. Practice Tasks
JavaScript · Day 5 of 180 · Beginner Phase

Undefined, Null, and typeof

Two values that mean "nothing" — but in completely different ways. This is where most beginners get permanently confused. Today we fix that forever.

Day 5 / 180
Beginner Phase

Imagine you order food at a restaurant. The waiter comes back and says one of two things:

🧑‍🍳 "I haven't checked yet whether we have that dish." → This is undefined

🧑‍🍳 "I checked. We deliberately do not have it on the menu." → This is null

Both mean "no value" — but one means not yet known and the other means intentionally empty. This distinction sounds small but it causes real bugs in real projects every single day. By the end of this lesson you will never confuse them again.

1. undefined — JavaScript Says "I Don't Know Yet"

undefined is what JavaScript gives you automatically when something has been declared but not given a value yet. You never need to write undefined yourself — JavaScript assigns it on its own in these situations:

Situation Result
Variable declared but not assigned undefined
Function returns nothing undefined
Accessing object property that does not exist undefined
Function called with missing argument undefined
JavaScript 
// 1. Variable declared but not assigned
let username;
console.log(username); // undefined

// 2. Function with no return statement
function greet() {
  // no return here
}
let result = greet();
console.log(result); // undefined

// 3. Object property that does not exist
let user = { name: "Waheed" };
console.log(user.age);  // undefined (age was never set)

// 4. Missing function argument
function add(a, b) {
  console.log(b); // undefined — b was never passed
  return a + b;
}
add(5); // only passed one argument

💡 The golden rule: You should never manually assign undefined to a variable. If you want to say "this has no value intentionally" — use null instead. undefined is JavaScript's job, not yours.

2. null — You Say "This is Intentionally Empty"

null is something you write yourself to say: "I know this variable exists, and I am deliberately saying it has no value right now." It is a conscious decision — not an accident like undefined.

Real world use cases for null — when you have a variable whose value will come later, when you want to clear a value, or when a function finds nothing to return:

JavaScript 
// null = intentional empty value
let selectedUser = null; // no user selected yet
let profilePicture = null; // user has not uploaded one yet

selectedUser = { name: "Waheed", age: 22 };
selectedUser = null; // cleared after logout

function findUser(id) {
  let users = [{ id: 1, name: "Waheed" }];
  let found = users.find(u => u.id === id);
  return found || null;
}
console.log(findUser(1));  // { id: 1, name: "Waheed" }
console.log(findUser(99)); // null

3. The Most Famous Bug in JavaScript History 🐛

Run this in any JavaScript console and you will see something that makes no logical sense:

JavaScript 
typeof null       // "object" ← WAIT WHAT?!
typeof undefined  // "undefined" ← this makes sense

null is not an object. It never was. This is a bug from 1995 — JavaScript written in just 10 days by Brendan Eich. In the original engine, values were stored with a type tag. The tag for objects was 000. And null was represented as a null pointer — also 000. So the engine incorrectly read null as an object type.

The bug was discovered immediately. But JavaScript was already running in millions of browsers. Fixing it would break every website on the internet. So the decision was made: keep the bug forever. Here we are in 2026 — still living with a 30-year-old mistake.

JavaScript 
// WRONG way to check for null
if(typeof value === "object") {
  // true for null AND real objects — dangerous!
}

// CORRECT way to check for null
if(value === null) {
  console.log("value is null");
}

// CORRECT — check for null OR undefined together
if(value == null) {
  // == catches BOTH null and undefined
  // one of the only good uses of == in modern JS
  console.log("value is null or undefined");
}

4. == vs === with null and undefined — The Brain Bender 🔥

This is where most beginners get confused permanently. Pay close attention — these results will surprise you:

JavaScript 
null == undefined   // true  ← loose equality
null === undefined  // false ← strict equality, different types

null == 0          // false ← null only equals null or undefined
null == ""         // false
null == false      // false ← null is not just any falsy value

undefined == 0     // false
undefined == ""    // false
undefined == false // false

🔥 Mind shift: Most beginners think null and false and 0 and "" are all "equal" with ==. They are not. null and undefined are a special pair — they only equal each other and nothing else when using loose equality.

5. The void Operator — Always Returns undefined

Most tutorials never mention this. The void operator evaluates an expression and always returns undefined. You will see it in old codebases and occasionally in modern JavaScript for specific tricks:

JavaScript 
void 0        // undefined
void "hello"  // undefined
void true    // undefined

// Old use: prevent link from navigating
// <a href="javascript:void(0)">Click me</a>

// Modern use: safely get undefined
const safeUndefined = void 0;

6. Nullish Coalescing — The Modern Solution (??)

Added in ES2020. It solves a very common real-world problem — giving a default value when something is null or undefined, but not when it is 0 or false or an empty string.

JavaScript 
// OLD way — || has a bug with 0
let score = 0;
console.log(score || "No score");  // "No score" ← WRONG!

// NEW way — ?? only triggers for null/undefined
console.log(score ?? "No score");  // 0 ← CORRECT!

console.log(null      ?? "default"); // "default"
console.log(undefined ?? "default"); // "default"
console.log(0         ?? "default"); // 0
console.log(""        ?? "default"); // ""
console.log(false     ?? "default"); // false

function showUserName(name) {
  return name ?? "Guest";
}
console.log(showUserName("Waheed"));  // "Waheed"
console.log(showUserName(null));       // "Guest"
console.log(showUserName(undefined));  // "Guest"
Pro Tip #1 — undefined is a type, null is not
typeof undefined returns "undefined". But typeof null returns "object" — the bug. This is why you never use typeof to check for null. Always use === null directly.
Pro Tip #2 — Optional chaining stops crashes
Accessing a property on null crashes with TypeError. Use optional chaining ?. to safely access nested values. user?.address?.city returns undefined instead of throwing. This is one of the most used modern JavaScript features in production code.
Pro Tip #3 — Both are falsy but differ in arithmetic
Both are falsy in conditions. But null + 1 gives 1 (null → 0) while undefined + 1 gives NaN (cannot convert). This difference causes real bugs in calculations.

7. Quick Reference

Check undefined null
typeof "undefined" "object" ← bug
Boolean context falsy falsy
In arithmetic NaN 0
JSON.stringify removed kept as null
Who sets it JavaScript auto You intentionally
== null true true
=== null false true

8. Try It Yourself

Edit the code and click Run Code. Try changing values and observe the differences between null and undefined in every situation.

✏️ Try it Yourself — Undefined & Null
OUTPUT
// Click Run Code to see output
💡 Code edit karo aur Run dabao!

9. Practice Tasks

Task 1 — Easy: Spot the Difference

Declare a variable without assigning a value. Log it and check its type. Then set it to null and log it again. Write in comments what changed and why.

Task 2 — Medium: Fix the Default Value Bug

A function receives a score parameter. If score is null or undefined show "No score yet". But if score is 0 show 0. Write this using ?? and also the wrong way using || to see the difference.

Task 3 — Hard: The Crash Prevention Challenge

You have let user = null. Try to access user.address.city — it will crash. Fix it using optional chaining ?. so it returns undefined instead. Then use ?? to show "City unknown" as fallback. This exact pattern is used in every real application.

Next Lesson
Day 6 — Type Conversion and Coercion
Read Next Lesson →
Want daily web dev tips?
Follow Muhammad Waheed Asghar for daily JavaScript and CSS tips!
Labels:

Popular Posts