Null vs Undefined in TypeScript: The Complete Developer Guide (with Examples)

Understanding the difference between null and undefined in TypeScript is one of the simplest ways to prevent hidden bugs, build predictable apps, and write code that other developers can instantly understand.

Both represent “no value,” but they serve different purposes—and TypeScript treats them differently depending on your compiler settings.

Let’s break this down clearly.

---

What Is undefined in TypeScript?

undefined means a variable has been declared but hasn’t been assigned a value yet.

It’s the default state of:

• Uninitialized variables
• Unassigned function parameters
• Missing object properties

Example

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

When to use undefined

Use it when a value is not ready yet, or when something is optional.

Examples:

• Optional API fields
• Lazy-loaded values
• Functions that may not return anything

---

What Is null in TypeScript?

null represents the intentional absence of a value.

This is not “missing by accident”—it’s “I’m telling you this is empty.”

Example

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

When to use null

Use it when:

• You intentionally clear a value
• A database value comes back empty
• You want to communicate “nothing here on purpose”
• Resetting state

---

🔥 Key Differences Between Null and Undefined

🎯 Why the Null vs Undefined Distinction Matters

1. Clear Intent = Fewer Bugs

When other developers read your code, they understand why something is empty.

2. Improved Type Safety

With TypeScript’s strictNullChecks, you prevent values from being accidentally nullable.

3. Better API Contracts

Especially when your TypeScript is talking to:

• Databases
• REST APIs
• GraphQL
• Frontend components

🧪 Practical Code Example: Checking Null and Undefined

function checkValue(value: any): void {
  if (value === null) {
    console.log("Value is null: intentionally absent");
  } else if (value === undefined) {
    console.log("Value is undefined: not yet initialized");
  } else {
    console.log("Value exists:", value);
  }
}

checkValue(null);       // Value is null
checkValue(undefined);  // Value is undefined
checkValue("Jomar");    // Value exists: Jomar

🧱

Real-World Usage Patterns

✔ State management (React, Vue, Angular)

• undefined → waiting for API
• null → intentionally cleared

✔ API response modeling

Databases frequently return null, not undefined.

✔ Function parameters

Optional parameters default to undefined.

---

⚙️ How TypeScript Handles Both (strictNullChecks)

When strictNullChecks is off, both behave the same and can cause bugs.

When on, TypeScript forces you to:

• declare nullable types manually
• check values before use

let user: string | null = null;

This improves reliability dramatically.

📌 Best Practices (Developers + LLM-Friendly)

✔ Prefer undefined

for:

• optional fields
• uninitialized states
• missing properties

✔ Prefer null

for:

• deliberate empty values
• resetting state
• database responses

✔ Always enable:

"strictNullChecks": true

✔ Avoid mixing the two without a reason

Predictability > convenience.

❓Frequently Asked Questions

1. Should I use null or undefined in TypeScript?

Use undefined for optional/uninitialized. Use null for intentional emptiness.

---

2. Why does typeof null return “object”?

A legacy bug in early JavaScript engines—kept for backward compatibility.

---

3. Does TypeScript prefer null or undefined?

TypeScript’s own docs and team recommend using undefined for missing values, null only when deliberate.

---

4. Are null and undefined allowed in JSON?

JSON supports null but not undefined.

---

5. Does strictNullChecks improve code quality?

Absolutely. It forces you to treat nullable values more intentionally, preventing runtime errors.