Introduction
In JavaScript, undefined and null are two different values that both mean "no value,"but in different ways. Many developers get confused about when to use them, or they use them the same way without knowing the difference. This can lead to some strange issues in code.
In this article, we’ll take a closer look at both undefined and null. Stay with me until the end to understand them clearly and eliminate any confusion.
Let’s get started:
What is undefined?
In JavaScript, undefined is a primitive data type. It means a variable has been declared but has not been assigned a value. JavaScript automatically sets a variable to undefined in certain situations — for example, when a variable is declared without being initialized.
let myName;
console.log(myName) // output: undefined
As you can see, I declared the variable myName but didn’t assign any value to it. JavaScript returned undefined. This means the variable exists, but it doesn’t currently hold any meaningful data.
Here’s another example:
function a() {
}
console.log(a()); // output: undefined
In the function above, I didn’t return anything, so calling it returns undefined.
Here's one more example using an object:
let obj = {};
console.log(obj.property); // output: undefined
In this case, we tried to access a property that doesn’t exist on the object, so JavaScript returned undefined.
As you can see, JavaScript uses undefined as the default value in many situations — for variables, functions, and object properties. You could say it’s one of JavaScript’s favorite values! 😄
What is null?
null is also a value used to indicate the absence of a value, but deliberately. It means that we are manually assigning the absence of a value to a given variable or function result. I know this might be confusing at first, so let’s look at an example before we dive deeper:
let myName = null;
console.log(myName) // output: null
As you can see, I’ve explicitly assigned null to the variable myName, and it outputs null. Now, before addressing the often-confusing distinction between null and undefined, it’s important to clarify: both represent the absence of a value, but in different ways.
undefined is the default value JavaScript assigns to variables that have been declared but not initialized.
null, on the other hand, is an assignment value that we use intentionally to indicate no value.
In short, undefined is JavaScript's way of saying, "I don't know what this is yet," while null is the developer’s way of saying, "This should be empty."
You may be wondering: Why do we still use null manually if JavaScript automatically assigns undefined?
That's a great question. undefined means JavaScript doesn't know the value—it was never set. On the other hand, null represents intent; we set it manually to indicate that the variable is intentionally empty. I'm going to show you a real use case that will help answer your question.
null is a way to show intent. It tells other developers that the variable is intentionally empty for now, but will be assigned meaningful data later. In other words, it's a placeholder. This helps signal that the variable should not be removed or ignored, even if it's currently empty.
// Intentionally setting to null
let userName = null;
console.log("Before assigning value:");
console.log(userName); // Output: null
// Assign a value later
userName = "Alice";
console.log("After assigning value:");
console.log(userName); // Output: Alice
Based on the example above, if you assign null, you are saying: “I know this variable is empty on purpose. I plan to set it later.”
So null is a signal to other developers (and yourself) that the variable is intentionally empty, not just forgotten.
I know it might still seem unclear, since we could get the same output even without using null. However, null is different in certain scenarios where its use is necessary. Take a look at the example below:
const data = {
name: "Alice",
age: undefined,
city: null
};
const jsonString = JSON.stringify(data);
console.log(jsonString);
// Output: {"name":"Alice","city":null}
Did you notice that I assigned the age value as undefined and the city value as null? Now look at the output: age doesn’t appear at all — strange, right? That’s because JSON.stringify() ignores properties with undefined values.
On the other hand, the city stays in the output with a value of null, which means it can still be updated or filled in later. This shows the power of using null intentionally.
In JavaScript and JSON:
- undefined is often treated as an accident or something forgotten.
- null signals that a variable, function result, or property is intentionally empty and can be filled later.
I hope you understood the difference between the two, but things don’t end here—there are still a few conflicts you need to be aware of.
Null vs. Undefined Conflicts
There is also a difference when comparing them: JavaScript returns different results depending on whether you use the loose equality operator (==) or the strict equality operator (===). Check the example below:
// Loose equality operator
console.log(null == undefined);
// Output: true
// Strict equality operator
console.log(null === undefined);
// Output: false
As you can see, the output differs: the loose equality operator (==) returns true, while the strict equality operator (===) returns false.
Many developers don’t take this seriously and use null and undefined interchangeably. However, when they compare them and encounter unexpected results, they’re often surprised. Because of this, a large portion of the developer community lacks a proper understanding of the difference — until they get caught in the web 😀.
Let’s get back to the point and figure out why the output differs. Check out the example below, and you'll understand the mystery more quickly.
console.log(typeof undefined);
// output: "undefined"
console.log(typeof null);
// output: "object"
As you can see, I used the typeof operator to get the types of both undefined and null. It returns undefined for undefined, but object for null.
This might be confusing at first, especially when trying to understand how null is treated in JavaScript. First, let’s look at why the output differs when comparing them using different operators. Then, we’ll briefly explore why the type of null is object rather than null.
The loose equality operator == compares values by ignoring their data types. Since both null and undefined represent the absence of a value, JavaScript considers them loosely equal. Here's an example:
console.log(2 == '2'); // Output: true
This returns true, even though the data types of the values are different. The first 2 is a number (written without quotes), while the second '2' is a string (enclosed in quotes). JavaScript still returns true because the == operator performs type coercion, converting both values to the same type before comparing them. For this reason, == is known as the loose equality operator.
In contrast, the strict equality operator === does not ignore data types. It checks both the value and the type, and only returns true if both match. For example, null === undefined returns false because null is of type "object" and undefined is of type "undefined". For this reason, it returns different outputs on different comparison operators.
Before we go any further, I want to clarify something: Why is the data type of null shown as 'object'?
This is actually a historical bug in JavaScript that has existed since the language was first created. When we check the data type of null using typeof, it returns 'object'. However, null is not actually an object. It is classified as a primitive data type, whereas objects and arrays are non-primitive types.
If null were truly an object, it would belong to the non-primitive category, like arrays and objects do, but it doesn’t.
Null vs Undefined with Destructuring
In destructuring, default values work differently with undefined and null, which can be a bit confusing. Look at the example below:
let arr = [undefined, 2, 3];
const [first = 3, second] = arr;
console.log(first); // 3
console.log(second); // 2
Here, the first element of the array is undefined, so the default value 3 is used for first. That’s why the output is 3.
Now, let’s see what happens when we use null instead of undefined:
let arr = [null, 2, 3];
const [first = 3, second] = arr;
console.log(first); // null
console.log(second); // 2
In this case, the value null is used as-is. The default value is not applied because null is considered a defined value.
This behavior is the same in function parameters:
function test(x = 5) {
console.log(x);
}
test(undefined); // 5
test(null); // null
As you can see, when undefined is passed, the default value 5 is used. But when null is passed, it's treated as a valid value, so the default is ignored.
This behavior is consistent across both destructuring and function parameters in JavaScript.
Understanding the difference between null and undefined is more than just a technical detail — it’s about writing intentional, predictable JavaScript. While undefined typically represents the absence of a value by the engine, null is a developer's way of saying “this value is empty on purpose.” Whether you're designing APIs, managing state, or working with defaults, knowing when to use each can make your code more robust and self-explanatory. In short: use undefined when something hasn't been set, and null when you're explicitly clearing or initializing something. The difference may be subtle, but in practice, it can make your logic clearer and your bugs easier to avoid.