Javascript · Variables
undefined and null
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What is undefined?
In JavaScript, when you declare a variable but don't assign it a value, it automatically gets a special value called
undefined
.
let codemonName;
console.log(codemonName);
let codemonLevel;
console.log(codemonLevel);
undefined
means the variable exists, but has no value yet. It's JavaScript's way of saying "I know about this variable, but nothing has been put in it."
undefined is a type AND a value
In JavaScript, undefined is both a type and the only value of that type. When a variable is undefined, its type is also undefined!
You'll see
undefined
in these situations:
- When you declare a variable without assigning a value
- When you access a property that doesn't exist on an object
- When a function doesn't return anything
Exercise 2 — What is null?
null
is another special value in JavaScript, but it's different from
undefined
. While
undefined
means "no value was assigned yet",
null
means "intentionally no value".
// We explicitly set these to null
let defeatedCodemon = null;
let currentBattle = null;
console.log(defeatedCodemon);
console.log(currentBattle);
Think of it this way:
-
undefined
= JavaScript says "I don't know what's here"
-
null
= You say "I know what's here: nothing!"
Programmers use
null
when they want to explicitly indicate that a variable should be empty. For example, if your only Codémon is knocked out, you might set your
activeCodemon
variable to
null
to show there's no active Codémon.
You must assign null yourself
JavaScript will never automatically assign null to a variable. If you see null, it means a programmer put it there on purpose. This is the key difference from undefined!
Exercise 3 — When does undefined appear?
In which of these situations will a variable have the value
undefined
?
Options
• ```let codemonType;```
• ```let codemonType = null;```
• ```let codemonType = "water";```
• ```const codemonType = 0;```
Hint : Remember: ```undefined``` appears when you declare a variable but don't assign it any value. If you assign something (even ```null```), it's no longer ```undefined```.
Exercise 4 — Creating variables with different values
Complete the code to create three variables: one that will be
undefined
, one set to
null
, and one with an actual value.
let unassignedCodemon____
let faintedCodemon ____ ____;
let activeCodemon ____ "Aquachu";
console.log(unassignedCodemon, faintedCodemon, activeCodemon);
Options: ; = ; = null undefined
Hint : To get ```undefined```, just declare the variable without assigning anything. To get ```null```, you must explicitly assign it using ```=```.
Exercise 5 — Choosing between undefined and null
You're creating a Codémon game. You want to represent that a player currently has no Codémon selected for battle. Which should you use?
Options
• ```let selectedCodemon = null;``` - because we're explicitly saying "no Codémon is selected"
• ```let selectedCodemon;``` - because we're leaving it undefined
• ```let selectedCodemon = "";``` - because an empty string represents nothing
• ```let selectedCodemon = 0;``` - because zero means no Codémon
Hint : When you want to intentionally represent "no value" or "empty" in your code, ```null``` is the better choice. It shows you made a conscious decision.
Exercise 6 — undefined vs null: Side by side
Let's compare
undefined
and
null
directly to understand their differences better:
let codemonA;
console.log("codemonA:", codemonA);
let codemonB = null;
console.log("codemonB:", codemonB);
// Checking their types
console.log("Type of codemonA:", typeof codemonA);
console.log("Type of codemonB:", typeof codemonB);
Notice something interesting? The type of
null
is shown as "object" - this is actually a bug in JavaScript that has existed since the beginning! But it doesn't change how we use
null
.
Best practice tip
Use null when you want to explicitly represent "no value" or "empty". Let undefined happen naturally when variables aren't initialized yet. This makes your code's intentions clearer!
Exercise 7 — Match the scenario to the value
Match each scenario with whether the variable would be
undefined
or
null
:
Items to match
• let codemonName;
• A player explicitly has no item equipped
• A function that doesn't return anything
• Resetting a variable to represent "no value"
• Variable declared but not yet assigned
• Programmer wants to intentionally clear a value
Definitions
• undefined
• null
• undefined
• null
• undefined
• null
Exercise 8 — Codémon Inventory System
Create a simple Codémon inventory system that properly uses both
undefined
and
null
.
Your task:
1. Create a variable
firstCodemon
and assign it the value "Aquachu"
2. Create a variable
secondCodemon
but don't assign it any value (it should be
undefined
)
3. Create a variable
thirdCodemon
and explicitly set it to
null
(representing an empty slot)
4. Use
console.log()
to display each variable
Starter code
// Create your inventory system here