null vs undefined

What is undefined?

undefined is JavaScript's way of saying "this variable exists but has not been given a value yet." The runtime produces it in four common situations:

• Unassigned variable. let count; — count is undefined until you assign it.
• Missing function argument. Calling fn() when the function expects a parameter leaves that parameter as undefined inside the function body.
• Missing object property. Reading a property that does not exist on an object returns undefined rather than throwing.
• Void function return. Any function that reaches its end without a return statement implicitly returns undefined.

The void operator — as in void 0 — also always evaluates to undefined. It appeared frequently in older minified code as a guaranteed way to obtain undefined before it became a read-only value.

{`let x;
console.log(x);           // undefined (unassigned)

function greet(name) {
  console.log(name);      // undefined if not passed
}
greet();

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

function noReturn() {}
console.log(noReturn());  // undefined (no return statement)

console.log(void 0);      // undefined`}

What is null?

null is a deliberate assignment. When a developer writes const user = null, they are explicitly communicating: "I know this variable exists, and right now there is no user." This intentional quality is what distinguishes it from undefined.

Common situations where null is the right choice:

• An optional object that is absent. let currentUser = null — before the user logs in.
• Resetting a reference. Setting a variable to null severs the reference and allows the garbage collector to reclaim the object.
• API and database conventions. REST and GraphQL APIs commonly return null for optional fields that were not populated. SQL databases have a native NULL concept that maps naturally to JavaScript's null.
• Sentinel return values. A function that searches for an item and finds nothing can return null to signal "not found" without throwing an exception.

{`let currentUser = null; // not logged in yet

async function fetchUser(id) {
  const row = await db.find(id);
  return row ?? null;   // explicit "not found"
}

// Resetting a reference
let heavyObject = buildCache();
heavyObject = null;     // GC can now reclaim the memory

// TypeScript: optional vs nullable
type Config = {
  timeout: number | null;  // deliberately unset — null
  retries?: number;        // may be undefined — optional
};`}

Key operators: optional chaining and nullish coalescing

Two operators introduced in ES2020 make working with null and undefined significantly safer and more readable.

Optional chaining (?.)

Accesses a property or calls a method only if the left-hand side is not nullish. If it is null or undefined, the entire expression short-circuits to undefined instead of throwing a TypeError.

{`const city = user?.address?.city;
// If user or address is null/undefined → city is undefined
// No TypeError thrown

const len = arr?.length;
// Safe even if arr is null

user?.save();            // Call only if user is not nullish`}

Nullish coalescing (??)

Returns the right-hand side when the left-hand side is null or undefined. Unlike the logical OR operator (||), it does not trigger on other falsy values such as 0, "", or false.

{`const name = user?.name ?? 'Anonymous';
// Falls back only on null/undefined — not on ""

const count = options.retries ?? 3;
// retries === 0 → keeps 0 (unlike || which would give 3)

// Combining both:
const city = user?.address?.city ?? 'Unknown';`}

JSON serialisation difference

{`const a = { name: 'Alice', age: undefined };
const b = { name: 'Alice', age: null };

JSON.stringify(a); // '{"name":"Alice"}'        — age omitted
JSON.stringify(b); // '{"name":"Alice","age":null}' — age preserved

// Practical consequence: use null if the field must appear
// in the serialised payload; leave undefined if absence is fine.`}

TypeScript and strictNullChecks

By default in older TypeScript configurations, null and undefined could be assigned to any type, which masked bugs. The strictNullChecks compiler option (enabled automatically by strict: true) makes them distinct types.

With strictNullChecks on:

• A string variable cannot hold null or undefined unless the type is explicitly declared as string | null or string | undefined.
• The compiler requires you to narrow or guard before using a potentially-null value, eliminating null-dereference bugs at compile time.
• Optional properties (prop?: T) have type T | undefined; nullable properties (prop: T | null) have type T | null — a meaningful semantic distinction.

{`// strictNullChecks: true

function getLength(s: string | null): number {
  // s.length  ← error: object is possibly null
  return s?.length ?? 0;  // safe with optional chaining + ??
}

// Optional vs nullable
type Profile = {
  bio?: string;          // string | undefined — field may not exist
  avatarUrl: string | null; // field exists but may be deliberately absent
};`}

If you are starting a new project, enable TypeScript with strict: true from day one. Retrofitting strictNullChecks onto a large existing codebase is a significant effort.

How engineers talk about null vs undefined

These are phrases you will hear in code reviews, stand-ups, and technical interviews. Knowing them helps you follow discussions and contribute confidently.

Decision guide

• Variable declared but no value assigned yet → runtime produces undefined automatically
• Object property that does not exist → runtime produces undefined
• You want to say "no value here, intentionally" → assign null
• Check for both null and undefined at once → use value == null or use ?? / ?.
• Field must appear in JSON output with an explicit empty marker → use null (undefined is omitted)
• Field should be absent from JSON output entirely → leave as undefined
• TypeScript optional field (?:) vs nullable field (| null) → choose based on whether absence is a deliberate runtime state or merely "not provided"
• Providing a fallback value without replacing 0 or "" → use ?? not ||
• Navigating a chain of objects safely → use optional chaining (?.)