Explaining Null vs Undefined in JavaScript

Purpose

I wrote this article to clear up confusion about null and undefined, so we can be better prepared for interview questions. These are very basic concepts in JavaScript, but they often cause confusion, especially for beginners.

---

Introduction

As we know, JavaScript has two types of data types:

1. Primitive Data Types

2. Non-Primitive (Reference) Data Types

---

Primitive Data Types

Primitive data types are immutable and store single values.

Here are the 8 primitive data types in JavaScript:

• Number – for all numeric values (both integers and floating point)

• String – for text values

• Boolean – true or false

• undefined – when a variable is declared but not assigned any value

• null – represents the intentional absence of any value

• Symbol – used to create unique identifiers

• BigInt – used for very large integers

• Note: typeof is not a data type; it's an operator used to check the type of a value.

So, both null and undefined are part of primitive data types.

---

Understanding undefined

undefined means that a variable has been declared but has not been assigned any value yet. JavaScript assigns undefined automatically in such cases.

---

Example:

let name;
console.log(name);  // Output: undefined

Here, name is declared but not assigned, so its value is undefined.

More Situations Where We Get undefined

---

1. Function Without Return Value

If a function does not explicitly return a value, JavaScript automatically returns undefined.

 function greet() {
  console.log("Hello!");
}

let result = greet(); 
console.log(result);  // Output: undefined

The function logs "Hello!", but since there’s no return statement, the value of result is undefined.

2. Accessing a Non-existent Array Index

let arr = [10, 20, 30];
console.log(arr[5]);  // Output: undefined

Index 5 does not exist in the array, so JavaScript returns undefined.

3. Accessing a Missing Object Property

let person = {
  name: "Avni"
};

console.log(person.age);  // Output: undefined

Here, age is not a property in the person object, so the result is undefined.

Why Is undefined Useful in Real Projects?

Yes, undefined is useful when building real projects.

We commonly use undefined to check whether:

• A variable or property has been assigned a value

• A function returned something or not

• Some data exists before performing an operation

Example: Checking if a user has set a profile picture

let user = {
  name: "Avni",
  profilePic: undefined // Not uploaded yet
};

if (user.profilePic === undefined) {
  console.log("Please upload a profile picture.");
} else {
  console.log("Profile picture is set.");
}

Why this is useful:

• Helps in checking whether a value is missing or not set

• Commonly used in forms, settings, and API responses

---

Understanding null

null is an explicit value that the developer assigns intentionally to represent that a variable is empty or has no meaningful data on purpose.

It’s used to clearly show:

“This variable is empty intentionally, and it may be used later.”

---

Real-life Analogy:

Imagine you're going to the market with a handbag.
Right now, the bag is empty, and you want it to be empty, because when you return, you plan to carry many items in it.

This is similar to assigning null to a variable in programming — the variable is intentionally empty, because it will hold data in the future.

Example:

let shoppingBag = null;  // Bag is intentionally empty for now

// Later in the program
shoppingBag = ["milk", "bread", "vegetables"];

---

Difference Between undefined and null

undefined:

• It is the default value for variables that have been declared but not assigned any value.

• It usually indicates that something is uninitialized or not found.

• It is set automatically by JavaScript.

null:

• It is an intentional assignment done by the developer.

• It means the variable is intentionally empty or has no meaningful value for now.

• Commonly used when you want to reset or clear a variable on purpose.

---

Conclusion

Understanding the difference between null and undefined helps you write cleaner, bug-free code and prepares you well for JavaScript interview questions.