Null vs Undefined in JavaScript: What’s the Difference? (With Examples)
If you’re learning JavaScript or preparing for technical interviews, you’ve likely come across the terms null and undefined. At first glance, they seem to represent the same thing, “no value.” However, they have different meanings, behave differently, and are used in different situations.
Understanding the difference between null and undefined in JavaScript is essential for writing reliable code, avoiding unexpected bugs, and confidently answering interview questions.
In this guide, you’ll learn what null and undefined mean, how they’re different, why typeof null returns "object", how equality operators treat them, and how modern JavaScript features like Optional Chaining (?.) and the Nullish Coalescing Operator (??) make working with these values much easier.
Table of Contents
What is undefined?
In JavaScript, undefined means that a variable exists but has not been assigned a value yet.
The JavaScript engine automatically assigns undefined in several situations.
Variable Declared but Not Initialized
let user;
console.log(user);
Output
undefined
The variable exists, but since no value has been assigned, JavaScript returns undefined.
Function Without a Return Statement
function greet() {
console.log("Hello");
}
const result = greet();
console.log(result);
Output
Hello
undefined
Since the function doesn’t explicitly return anything, JavaScript automatically returns undefined.
Accessing a Missing Object Property
const user = {
name: "John"
};
console.log(user.age);
Output
undefined
The age property doesn’t exist, so JavaScript returns undefined.
What is null?
Unlike undefined, null is an intentional value.
It represents the deliberate absence of an object or meaningful value.
let selectedUser = null;
console.log(selectedUser);
Output
null
Here, the developer is explicitly saying:
“There is currently no selected user.”
Unlike undefined, JavaScript never assigns null automatically. It must be assigned intentionally.
Null vs Undefined in JavaScript
Although both represent “no value,” they are conceptually different.
undefined→ JavaScript hasn’t assigned a value yet.null→ The developer intentionally assigned “no value.”
Think of it like this:
Imagine a parking lot.
- An empty parking space that hasn’t been assigned to anyone is like
undefined. - A parking space marked “Reserved but currently empty” is like
null.
Both are empty, but they communicate different intentions.
Key Differences Between Null and Undefined
| Feature | null | undefined |
|---|---|---|
| Assigned by JavaScript | No | Yes |
| Assigned by Developer | Yes | Usually No |
| Represents | Intentional absence of value | Value not assigned |
| Type | Object (historical quirk) | Undefined |
| Default Variable Value | No | Yes |
typeof null vs typeof undefined
One of the most famous JavaScript interview questions is:
console.log(typeof null);
Output
object
Most developers expect:
null
but that’s not what happens.
Now compare it with:
console.log(typeof undefined);
Output
undefined
Why is typeof null an Object?
This behavior often surprises developers.
typeof null
returns:
object
This is not because null is actually an object.
It’s a historical bug dating back to the earliest versions of JavaScript. At the time, values were internally represented using type tags, and null happened to share the same tag as objects.
By the time the mistake was recognized, millions of websites relied on this behavior. Changing it would have broken existing code, so JavaScript continues to return "object" for typeof null for backward compatibility.
In other words:
nullis not an object.typeof null === "object"is a long-standing language quirk.
Equality Comparison (== vs ===)
Another common interview question is how equality operators compare null and undefined.
Loose Equality
console.log(null == undefined);
Output
true
JavaScript intentionally treats these two values as equal when using the loose equality operator (==).
Strict Equality
console.log(null === undefined);
Output
false
Strict equality compares both the value and the type, so the comparison fails.
Comparing with Other Values
console.log(null == 0);
Output
false
console.log(undefined == 0);
Output
false
This behavior is important to remember because null only loosely equals undefined—not numbers, booleans, or empty strings.
Optional Chaining (?.)
Modern JavaScript introduced Optional Chaining to safely access nested properties without throwing errors.
Without optional chaining:
const user = null;
console.log(user.address.city);
Output
TypeError
Using Optional Chaining:
const user = null;
console.log(user?.address?.city);
Output
undefined
Instead of crashing your application, JavaScript safely returns undefined.
This feature is especially useful when working with API responses or optional object properties.
Nullish Coalescing (??)
One of the biggest improvements in modern JavaScript is the Nullish Coalescing Operator (??).
Suppose you want to provide a default value.
const username = null;
console.log(username ?? "Guest");
Output
Guest
Now consider:
const username = "";
console.log(username ?? "Guest");
Output
// Empty
Notice that an empty string is preserved.
This differs from the logical OR operator (||).
console.log("" || "Guest");
Output
Guest
Because || treats all falsy values (0, false, "", NaN) as missing.
The ?? operator only falls back when the value is null or undefined, making it a much safer choice in modern applications.
Common Use Cases
Use undefined When
- A variable hasn’t been initialized.
- A function doesn’t explicitly return a value.
- An object property doesn’t exist.
- A function parameter wasn’t provided.
Use null When
- You intentionally want to indicate “no value.”
- Resetting an object reference.
- Clearing selected items.
- Representing empty database relationships.
- Waiting for data to be assigned later.
Best Practices
To avoid confusion and bugs:
- Prefer
===over==for comparisons. - Use
nullwhen you intentionally mean “no value.” - Let JavaScript use
undefinednaturally instead of assigning it yourself. - Use Optional Chaining (
?.) when accessing deeply nested objects. - Use Nullish Coalescing (
??) instead of||when you only want to handlenullorundefined. - Don’t rely on
typeof null; remember it’s a historical quirk.
Frequently Asked Questions
What is the difference between null and undefined in JavaScript?
undefined means JavaScript hasn’t assigned a value, while null means the developer intentionally assigned “no value.”
Is null an object in JavaScript?
No.
Although typeof null returns "object", this is a historical bug preserved for backward compatibility.
Does == treat null and undefined as equal?
Yes.
null == undefined
returns:
true
However:
null === undefined
returns:
false
Should I use null or undefined?
Use null when you intentionally want to represent the absence of a value.
Allow JavaScript to produce undefined naturally for uninitialized variables or missing properties.
What is the best way to provide default values?
Use the Nullish Coalescing Operator (??) instead of || whenever you specifically want to treat only null and undefined as missing values.
Additional Learning Resources
To deepen your understanding of JavaScript values and comparisons, explore these trusted resources:
- MDN Web Docs – null
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null - MDN Web Docs – undefined
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined - JavaScript.info – Data Types
https://javascript.info/types - ECMAScript Language Specification
https://tc39.es/ecma262/
Related Articles
Continue learning JavaScript fundamentals with these topics:
- Difference Between
==and===in JavaScript - JavaScript Data Types Explained
- What Is the Temporal Dead Zone?
- Difference Between
var,let, andconst - Truthy vs Falsy Values in JavaScript
Final Thoughts
Understanding the difference between null and undefined in JavaScript is about more than memorizing definitions. It’s about recognizing the intent behind each value and using the right one in the right situation.
As a rule of thumb:
- Use
undefinedwhen a value hasn’t been assigned. - Use
nullwhen you intentionally want to represent the absence of a value. - Prefer modern JavaScript features like Optional Chaining (
?.) and the Nullish Coalescing Operator (??) to write cleaner, safer, and more maintainable code.
Whether you’re preparing for a JavaScript interview or building real-world applications, mastering these concepts will help you avoid common bugs and write code that’s easier to understand and maintain.