JavaScript Fundamentals

null vs undefined

Understand two different ways JavaScript represents the absence of a value.

Learn default parameters, destructuring, JSON serialization, nullish coalescing, optional chaining, API payloads, and common interview questions.

undefined

A value has not been supplied, assigned, returned, or found. Example: let customerEmail;.

null

A developer intentionally assigns an empty value. Example: const selectedCoupon = null;.

Analogy: undefined means an employee has not provided an emergency contact; null means the employee intentionally selected “none.”

Declared but not assigned

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

undefined means a value has not been provided or assigned yet.

Intentional absence

const selectedCoupon = null;
console.log(selectedCoupon); // null

null communicates that the application intentionally has no selected coupon.

Default parameters

function greet(name = "Guest") {
  return `Hello, ${name}`;
}

greet();          // Hello, Guest
greet(undefined); // Hello, Guest
greet(null);      // Hello, null

Defaults apply to undefined, not null.

JSON serialization

JSON.stringify({
  email: undefined,
  phone: null
});
// {"phone":null}

Undefined object properties are omitted; null properties remain in JSON.

Try nullish fallbacks

The ?? operator falls back only for null and undefined. The || operator also treats 0 and an empty string as missing.

value ?? "Guest" → Guest

value || "Guest" → Guest

null vs undefined Comparison

Feature	undefined	null
Meaning	Missing or not assigned	Intentional absence
typeof	undefined	object (historical quirk)
null === undefined	false	false
null == undefined	true	true
Default parameter	Triggers default	Does not trigger default
Object JSON property	Omitted	Preserved
?? fallback	Triggers fallback	Triggers fallback

Best Practices and API Notes

Use undefined for values not supplied or initialized.

Use null for intentional absence.

Use value === null when checking specifically for null.

Use value == null only when deliberately matching both values.

Use ?? instead of || when 0, false, or an empty string are valid.

Define consistent conventions in application and API contracts.

Use Object.hasOwn or in to distinguish missing properties from properties set to undefined.

In PATCH APIs, null may clear a field while an omitted field may leave it unchanged.

React and Function Return Example

React loading state

if (product === undefined) {
  return <p>Product is loading...</p>;
}

if (product === null) {
  return <p>No product selected.</p>;
}

undefined can mean data has not loaded; null can mean loading completed but no product exists. Define the convention consistently.

Consistent lookup result

function findCustomer(id) {
  const customer = database.find(item => item.id === id);
  return customer ?? null;
}

A lookup can consistently return either a customer object or null when no customer is found.

Practice quiz

null vs undefined Quiz

Select an answer to see the explanation.

1. What does undefined usually communicate?

2. What does null usually communicate?

3. What does typeof null return?

4. What does a function return when it has no explicit return statement?

5. Which value triggers a default function parameter?

6. What is JSON.stringify({ email: undefined, phone: null }) likely to preserve?

7. Which operator falls back only for null or undefined?

8. What does order.customer?.shippingAddress?.city return when customer is null?

9. How can you specifically check whether a property exists when its value may be undefined?

10. What is a clear result for a failed findCustomer lookup?

Score: 0 / 10