What is the difference between null and undefined in JavaScript?

In JavaScript, both `null` and `undefined` represent the absence of a meaningful value, but they signify different contexts and origins. Understanding their distinction is crucial for writing robust and bug-free code.

Undefined

undefined is a primitive value that indicates a variable has been declared but not yet assigned a value. It's often assigned by JavaScript itself in various scenarios. It means 'value not provided' or 'no value exists'.

Common scenarios where undefined occurs:

• A variable declared without being initialized (e.g., let x;).
• Accessing a non-existent property of an object (e.g., obj.nonExistentProperty).
• A function parameter that was not provided (e.g., function foo(x) { console.log(x); } foo();).
• The return value of a function that does not explicitly return anything (e.g., function doSomething() {}).
• The value of void(0).

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

const obj = {};
console.log(obj.property); // undefined

function greet(name) {
  console.log(`Hello, ${name}`);
}
greet(); // Hello, undefined

Null

null is also a primitive value, but it represents the intentional absence of any object value. It means 'no value', 'empty', or 'unknown value'. Unlike undefined, null must be explicitly assigned by a developer to a variable or property.

Common scenarios where null is used:

• To explicitly indicate that a variable has no value or points to no object.
• When an API or function is expected to return an object but finds nothing relevant (e.g., document.getElementById('non-existent-id') returns null).
• To clear the value of a variable, effectively releasing the object it was pointing to (potentially aiding garbage collection).

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

const user = {
  name: 'Alice',
  email: null // Intentionally no email
};
console.log(user.email); // null

const element = document.getElementById('nonExistentElement');
console.log(element); // null (if element not found)

Key Differences Summarized

Practical Implications

When checking for the absence of a value, it's generally recommended to use the strict inequality operator (!==) or check for falsy values. Because null and undefined are both falsy, a simple conditional check often treats them similarly.

let val1; // undefined
let val2 = null;
let val3 = 0; // falsy but not null/undefined
let val4 = ''; // falsy but not null/undefined

if (val1) { console.log('val1 is truthy'); } else { console.log('val1 is falsy'); } // falsy
if (val2) { console.log('val2 is truthy'); } else { console.log('val2 is falsy'); } // falsy

// To specifically check for null or undefined (falsy values):
if (val1 == null) { console.log('val1 is null or undefined'); } // true
if (val2 == null) { console.log('val2 is null or undefined'); } // true
if (val3 == null) { console.log('val3 is null or undefined'); } else { console.log('val3 is not null or undefined'); } // not null or undefined

// To strictly differentiate:
console.log(val1 === undefined); // true
console.log(val2 === null);      // true
console.log(val1 === null);      // false
console.log(val2 === undefined); // false

Use null when you want to explicitly signal that a variable should have no object value, clearing it out, or initializing it to 'empty'. Use undefined when a variable has simply not been assigned yet or a property doesn't exist. Often, you'll encounter undefined more frequently as a signal from the JavaScript engine, whereas null is a deliberate choice by the programmer.