Loading...

JavaScript null and undefined

You just learned booleans — clear yes/no. Programs also need a way to say “there is no value here.” JavaScript gives two common empties: undefined and null. They look similar at first, but the story behind each one is different. This session keeps them apart so later conversions and checks make sense.

What is the difference between null and undefined?

undefined usually means “nothing was put here yet” — a variable declared with let and never assigned, or a missing piece. null means “empty on purpose”: you (or an API) set null to clear a slot. Check with typeof: typeof undefined is "undefined", but typeof null is the long-standing quirk "object". Prefer === when you compare to either value. Both are falsy, yet neither is the boolean type (true / false).

Empty-value toolkit

📊 null vs undefined for beginners

Idea Example Result / note
Missing / not assigned let x; then x undefined
Intentional empty let box = null you chose empty
typeof missing typeof undefined "undefined"
typeof empty typeof null "object" (quirk — still means empty)
Strict compare box === null true when box holds null
Loose compare tip null == undefined true with == — prefer === for clarity

undefined — nothing assigned yet

Declare a name with let and do not assign. The value is undefined. Log the value and typeof so the label "undefined" sticks.

undefined by default

javascript 
let nickname;
console.log(nickname);
console.log(typeof nickname);

null — empty on purpose

Set null when you want a clear “no value” signal. That is different from forgetting to assign.

assign null on purpose

javascript 
let selected = null;
console.log(selected);
console.log(typeof selected);

typeof side by side

Put both results next to each other. Remember: typeof null printing "object" is a quirk, not proof that null is a full object lesson yet.

typeof undefined and null

javascript 
console.log(typeof undefined);
console.log(typeof null);
let a;
let b = null;
console.log(typeof a);
console.log(typeof b);

Prefer === for null and undefined

=== asks for the same value and type. Use it when you mean “exactly null” or “exactly undefined.” With ==, null and undefined can match each other — easy to misread when you are learning.

strict checks with ===

javascript 
let user = null;
let title;
console.log(user === null);
console.log(title === undefined);
console.log(user === undefined);

Loose == can blur the two

With ==, null and undefined match each other. Log it once so you see the surprise — then keep real checks on ===.

loose == between null and undefined

javascript 
console.log(null == undefined);
console.log(null === undefined);

The first line is true because == is loose. The second is false. Prefer writing the check you mean with === so your intent stays obvious.

Show both empties on the page

Store one undefined-style name and one null, then write short labels with textContent.

Page labels for null and undefined

html 
<!DOCTYPE html>
<html>
<head>
<title>null and undefined — labels</title>
</head>
<body>
<p id="out">…</p>
<script>
let title;
let avatar = null;
document.getElementById("out").textContent =
"title=" + title + " | avatar=" + avatar;
</script>
</body>
</html>

The paragraph shows both empties in one line. Change only avatar to a short string, refresh, and confirm the right half updates while title stays undefined.

Try it yourself

  1. Declare let city; — log city and typeof city without assigning.
  2. Set let bag = null; — log the value and typeof bag (expect the "object" quirk).
  3. Log typeof undefined and typeof null on one screen so the contrast is clear.
  4. Compare with ===: check a null variable against null and against undefined.
  5. Log null == undefined once, then rewrite your real checks with ===.
  6. In the HTML demo, set avatar to "pic.png", refresh, and read the new line.

Common mistakes

  • Treating null and undefined as always interchangeable — the meaning differs (intentional vs not assigned)
  • Panicking when typeof null is "object" — quirk; still treat null as intentional empty
  • Relying on == between them without noticing the loose match
  • Calling either value a boolean — they are empties; booleans are only true / false
  • Confusing the empty string "" with null — "" is still a string

Summary

  • undefined: missing / not assigned yet; typeof → "undefined"
  • null: intentional empty you assign; typeof → "object" (quirk)
  • Prefer === for clear checks; both are falsy but not booleans
  • Empty string "" is text — not the same as null or undefined
  • Next: type conversion — turning values from one kind into another on purpose

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 13 of 15
Javascript Tutorial