Javascript · Booleans
Short-circuit evaluation
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What is Short-Circuit Evaluation?
When JavaScript evaluates logical operators like
&&
and
||
, it doesn't always need to check both sides to know the result. This is called short-circuit evaluation.
Here's how it works:
With
&&
(AND):
- If the left side is falsy, JavaScript knows the whole expression will be false
- So it stops and never evaluates the right side
With
||
(OR):
- If the left side is truthy, JavaScript knows the whole expression will be true
- So it stops and never evaluates the right side
Let's see this in action! Run the code below and watch which messages appear:
Example with
&&
:
The first line won't print because the left side is false, so JavaScript doesn't need to evaluate the right side because AND is false.
false && console.log("This will NOT print!");
true && console.log("This WILL print!");
Example with
||
:
The first line won't print because the left side is true, so JavaScript doesn't need to check the right side because OR is true.
true || console.log("This will NOT print!");
false || console.log("This WILL print!");
Exercise 2 — Practical Uses of Short-Circuit
Now let's see how programmers use short-circuit evaluation in real code! Here are two common patterns:
Pattern 1: Default values with
||
When a value might be falsy (like undefined, null, or empty string), you can provide a fallback:
// Try changing codemonName to "" or null
let codemonName = "";
let displayName = codemonName || "Unknown Codémon";
console.log("Codémon name:", displayName);
// One more example
let level = 0; // 0 is falsy!
let displayLevel = level || 1;
console.log("Level:", displayLevel);
Pattern 2: Conditional execution with
&&
You can run code only if a condition is true, without writing a full
if
statement:
// Try changing hasPotion to false
let hasPotion = true;
let codemonHP = 30;
// Short way to do: if (hasPotion) { heal }
hasPotion && console.log("Using potion! HP restored.");
Exercise 3 — Understanding && Short-Circuit
let codemonHP = 0;
let hasEnergy = true;
codemonHP > 0 && console.log("Attack!");
hasEnergy && console.log("Ready to fight!");
What will be printed to the console?
Options
• ```Attack!```
```Ready to fight!```
• Only ```Ready to fight!```
• Only ```Attack!```
• Nothing will be printed
Hint : Remember: With ```&&```, if the left side is falsy, the right side never evaluates. Check the value of ```codemonHP > 0``` and ```hasEnergy```.
Exercise 4 — Understanding || Short-Circuit
let playerName = "Pierre";
let name1 = playerName || console.log("Using default!");
let name2 = "" || console.log("Name is empty!");
What will be printed to the console?
Options
• ```Using default!```
```Name is empty!```
• Only ```Name is empty!```
• Only ```Using default!```
• Nothing will be printed
Hint : Remember: With ```||```, if the left side is truthy, the right side never evaluates. Check if ```playerName``` and ```""``` are truthy or falsy.
Exercise 5 — Setting Default Values
Complete the code to give Aquachu a default level of 5 if no level is provided:
let aquachuLevel = null;
let level = aquachuLevel ____ ____;
console.log("Aquachu is level", level);
Options: || && 5 "5" null
Hint : Use the ```||``` operator to provide a fallback value when the first value is falsy. The default value should be a number.
Exercise 6 — Conditional Execution
Complete the code to print a victory message only if the battle is won:
let battleWon = true;
let enemyDefeated = false;
battleWon ____ console.log("Victory! You won the battle!");
enemyDefeated ____ console.log("Enemy Codémon fainted!");
Options: && || && ||
Hint : Use the ```&&``` operator to execute code only when a condition is true. The right side only runs if the left side is truthy.
Exercise 7 — Match Short-Circuit Behaviors
Match each expression with what happens during evaluation:
Items to match
• false && expression
• true || expression
• true && expression
• false || expression
• value || defaultValue
• condition && action
Definitions
• expression never evaluates
• expression never evaluates
• expression always evaluates
• expression always evaluates
• pattern for default values
• pattern for conditional execution
Exercise 8 — Codémon Battle System
Time to build a simple Codémon battle system using short-circuit evaluation!
Your task:
1. Create a variable
codemonName
set to an empty string
""
2. Create a variable
displayName
that uses
codemonName
but defaults to
"Aquachu"
if it's empty (use
||
)
3. Create a variable
hasPotion
set to
true
4. Print the display name
5. Use short-circuit evaluation to print
"Using potion to heal!"
only if
hasPotion
is true (use
&&
)
Starter code
// Create your variables here
// Display name and conditional message