How can I tell the difference between `undefined` and `null` in JavaScript?

They are distinct values, although both can represent an absence of a value. undefined commonly appears when a variable has not been initialized or a lookup finds no result. null is often used intentionally to represent absence. These are common situations, not guarantees about how a value got there. [S1]

For example:

let selectedItem;
const settings = { theme: null };

console.log(selectedItem);       // undefined
console.log(settings.theme);     // null
console.log(settings.missingTheme); // undefined

Here, selectedItem has not been assigned a value, theme has explicitly been set to null, and the missing property lookup produces undefined. Neither value is inherently an error; whether it is appropriate depends on what the program expects. [S1]

Here’s the comparison:

• undefined: A distinct primitive value, commonly encountered for an uninitialized variable or a lookup with no result. [S1]
• null: A distinct primitive value, often used intentionally to represent absence. [S1]
• Strict equality: === does not convert values, so the two values are not strictly equal. [S2]

console.log(null === undefined);     // false
console.log(null === null);          // true
console.log(undefined === undefined); // true

The results show that each value is strictly equal to itself, but null and undefined are not strictly equal to each other.

Use separate strict checks when you need to tell them apart:

if (value === undefined) {
  console.log("Value is undefined");
} else if (value === null) {
  console.log("Value is null");
}

Loose equality (==) treats this particular pair as equal: null == undefined is true. So it can match both in one check, but it cannot distinguish which value you have. [S2]

console.log(null == undefined); // true
console.log(null === undefined); // false

Choose the check based on whether your code needs two separate cases or intentionally handles both together.

Decide what each state means for that property. In this example, suppose nickname may be omitted, set to null, or supplied as text. These meanings are choices for the example, not universal conventions:

const profileA = {};
const profileB = { nickname: null };
const profileC = { nickname: "Sam" };

function describeNickname(profile) {
  if (profile.nickname === undefined) {
    return "No nickname value was supplied";
  }
  if (profile.nickname === null) {
    return "Nickname is explicitly absent";
  }
  return `Nickname: ${profile.nickname}`;
}

With this convention, the first two cases get different descriptions; neither is automatically treated as an error. If your code intends to treat both as simply “no nickname,” you could use profile.nickname == null. That loose comparison matches both null and undefined, so it does not preserve the distinction. [S2]

The checks identify the value, but they do not determine why it is absent or what your application should do. Define that meaning for your data flow.

Use this decision process:

1. If you need separate behavior for the two values, check with === undefined and === null separately.
2. If your code intentionally treats both alike, use one shared branch and make that choice clear.
3. Don’t use == when you need to know which value is present: null == undefined is true, while null === undefined is false. [S2]
4. Check your program’s expectations before deciding either value signals a problem. Neither is inherently an error. [S1]

A reusable pattern is:

if (value === undefined) {
  // Handle the undefined case
} else if (value === null) {
  // Handle the null case
} else {
  // Handle another value
}

Replace the comments with behavior appropriate for your program. The key is to make the distinction—or the choice to combine the cases—intentional.