Understanding the difference Between null and undefined in JavaScript

As a newbie JavaScript developer who might have encounter 2 values null and undefined while dealing with variables. They both represent something which is empty or missing but they are not the same. Understanding the difference between null and undefined will make you a better JavaScript Developer.

In this article, we’ll understand the difference between null and undefined with simple examples.

What is undefined?

undefined means a variable has been declared but no value is assigned to the variable. Its a default value given to variable by JavaScript Engine.

let x; // x is declared but not assigned a value
console.log(x); // Output: undefined

In above code example we have declared x but not assigned any value to it. Therefore JavaScript automatically assigns undefined to x.

Here are few more examples of undefined.

In the below code example we are trying to access a non existent property.

let person = {};
console.log(person.age);  // Output: undefined (age property doesn't exist)

Also look at the below code example here we are assigning a function call to a variable without return statement.

function greet() {
  console.log("Hello!");
}
let result = greet();  // This function doesn't return anything
console.log(result);   // Output: undefined

What is null?

null is a value that represents “nothing” or “empty”. Unlike undefined, it’s an assigned intentionally to a variable. You can think of it as a way to indicate that a variable should be empty or have no value.

let y = null;
console.log(y);  // Output: null

As you can see in the above code example. We are explicitly assigning null to y meaning we are saying that y has no value.

Let’s play a game try to guess the output of the below code.

let x;
let y = null;
console.log(typeof x);
console.log(typeof y);

If you have guessed line number 3 will log undefined and line number 4 will log object to console then you are absolutely right.

The fact that typeof null returns object is a known bug in JavaScript. It has existed since the beginning of the language and remains for backward compatibility.

Key differences between null and undefined

undefinednull
Typeundefinedobject
MeaningVariable is declared but not assigned a value.Variable has assigned null value.
Assigned byJavaScript (default)Developer (manually)

Try to guess the output of the below code snippet.

let x;
let y = null;
console.log(x==y)
console.log(x===y)

If you guessed line number 3 will log true and line number 4 will log false to console then you are right. Here is why:

  • == (loose equality) considers both null and undefined loosely equal because they represent an absence of value.
  • === (strict equality) checks both the value and the type, so null and undefined are not strictly equal.

Conclusion

In summary, undefined means a variable has been declared but hasn’t been assigned a value yet, whereas null is an intentional assignment to indicate “no value.” Understanding these differences is key to writing cleaner, more predictable code in JavaScript.

Leave a Comment