Understanding the Difference between null and undefined in JavaScript.

Let's quickly examine something that often confuses people new to JavaScript: null and undefined.

Both of them represent "no value" in some way, but they're used in slightly different scenarios.

What is undefined?

When you declare a variable in JavaScript but don't assign any value to it, JavaScript gives it a default value of undefined.

It's like saying, "This thing exists, but I don't know what it's about yet."

It's JavaScript's way of saying you have a variable that hasn't been filled with a value.

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

What is null?

Now, null is a little different.

When you see null, it means the variable has been explicitly set to "no value." It's a deliberate choice.

You're telling JavaScript, "I know what this is, and it's nothing."

It's an intentional absence of any object value.

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

Key Differences

undefined is the default state of a variable that hasn't been assigned a value. null is a value you explicitly assign to a variable when you want to say "this is empty or nothing."

And when we look at the typeof these primitives, you'll see they have very different outcomes:

let undefinedVariable;
let nullVariable = null;

console.log(typeof undefinedVariable); // "undefined"
console.log(typeof nullVariable) // "object" 🤯 WTF JavaScript, I'll explain below. 

In JavaScript, typeof undefined returns "undefined", showing that undefined is its type.

On the other hand, typeof null returns "object", which is a bit misleading because null is supposed to represent the absence of an object or value. And because null is saying, "we don't know what this is yet," it assigns it the object type rather than its value.

But mostly, you'll be safe using null is a clear way to communicate that the absence of value is intentional and that the variable should not hold any value.

undefined can be seen when variables are declared but not defined or when functions don't return a value.

When to Use Each?

TLDR; To remember when to use each, if you are assigning a value, use null.

Checking for undefined tests to see whether variables have been declared or initialized. You'll also see this when you access non-existent properties in an object.

let test;
console.log(test); // undefined
console.log({}.prop); // undefined

Use null when you need to clear a variable's value intentionally or when dealing with something currently unavailable or empty but might be populated later.

let book = {
  title: "JavaScript Basics",
  author: null, // Author to be filled in later
};

Both null and undefined signify the absence of a value, but they do so in slightly different ways. Remember, undefined is what JavaScript gives you when it doesn't know the value, and null is what you use when you want to say there's nothing there.