The Difference Between null and undefined in JavaScript

The Empty Twins with Different Fates

If you're learning JavaScript, you've probably wondered:

Why are there two types of “nothing”? Why both null and undefined? Isn’t one enough?

For example:

let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

They both mean "no value", right? But they behave differently.

Let’s break it down in a fun, friendly way:

• What is undefined?
• What is null?
• What’s the real difference?
• When should you use each one?
• Common bugs and best practices

 

What Is undefined?

undefined means a variable was declared but never assigned a value.

let food;
console.log(food); // undefined

JavaScript is basically saying, "Hey, I see the variable, but I don’t know what it is yet."

undefined appears when:

• You declare a variable but don’t assign it
• A function doesn’t return anything
• You access a property that doesn’t exist
• You call a function without expected parameters

function greet() {}
console.log(greet()); // undefined

let person = { name: "John" };
console.log(person.age); // undefined

function sayHello(name) {
  console.log("Hello, " + name);
}
sayHello(); // Hello, undefined

 

What Is null?

null means an empty value, set intentionally by the developer.

let girlfriend = null;
console.log(girlfriend); // null

You’re telling JavaScript: “This variable has no value right now — and I did that on purpose.”

null is commonly used to:

• Initialize a variable that will be filled later
• Reset or clear a value
• Represent empty or missing data in a controlled way

 

Key Differences

Aspect	undefined	null
Who sets it?	JavaScript sets it automatically	You (the developer) set it explicitly
Meaning	"Value not assigned"	"Intentionally empty"
typeof	"undefined"	"object" (yes, weird but true)
Common use	Uninitialized variables, missing parameters	Empty variables with intent

 

Practical Example

let task;
let result = null;

console.log(task);   // undefined
console.log(result); // null

In this example:

• task hasn’t been assigned a value → undefined
• result is explicitly set to be empty → null

In functions:

function getUser(id) {
  if (id === 1) {
    return { name: "Dina" };
  } else {
    return null;
  }
}
let user = getUser(2);
console.log(user); // null

This way, you're saying “I looked for a user, and deliberately found nothing.”

 

typeof Quirk

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (yep, legacy bug)

Don’t rely on typeof null — it’s a known bug that’s too old to fix without breaking the web.

 

Equality Check: == vs ===

console.log(null == undefined);  // true
console.log(null === undefined); // false

Use === to avoid automatic type conversion (aka JavaScript magic).

 

When to Use null

Use null when you want to:

• Intentionally mark something as empty
• Initialize variables to be updated later
• Clear out values (e.g., from form inputs or data)

let user = {
  name: "Alex",
  session: null // not logged in yet
};

 

When to Let undefined Exist

Let undefined be when:

• You're dealing with optional function parameters
• A property might or might not exist
• A variable hasn’t been initialized yet

function sendMessage(text, to) {
  if (to === undefined) {
    to = "everyone";
  }
  console.log("Sending to " + to + ": " + text);
}

sendMessage("Hello!");

 

Common Bug Caused by Misusing Them

let data = null;

if (!data) {
  console.log("No data available");
}

This works, but what if data = 0 or ""? Falsy values like those would still pass the condition.

Better approach:

if (data === null || data === undefined) {
  console.log("No data available");
}

 

Best Practices

•  Use null when you want to explicitly empty a value
•  Use === instead of ==
•  Avoid using typeof null === "object" for logic
•  Prefer null over undefined in JSON/API responses
•  Be mindful of default values and falsy conditions

 

Not the Same, But Complementary

null and undefined both represent “no value” — but in very different ways.

• undefined = not set yet (default by JS)
• null = empty on purpose (set by developer)

Understanding their differences will help you write cleaner, safer code.

Remember: It's better to have an intentional null than a mysterious undefined.