Javascript · Conditional Statements
Ternary operator ? :
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — The Ternary Operator
Sometimes an
if
/
else
feels heavy for a tiny decision. JavaScript has a compact shortcut: the ternary operator. It fits a whole decision on one line.
condition ? valueIfTrue : valueIfFalse
let aquachuHP = 75;
let status = aquachuHP > 50 ? "healthy" : "weak";
console.log("Aquachu is " + status);
Read it like a question: "is
aquachuHP > 50
? If yes, take
"healthy"
, if no, take
"weak"
". Change the HP to
30
and run again.
Exercise 2 — An Expression, Not a Statement
The big difference with
if
/
else
: the ternary produces a value. That's why you can put it directly in a variable, or even inside a
console.log
.
These two versions do exactly the same thing. First with
if
/
else
:
let zapEnergy = 20;
// Version 1: if/else (5 lines)
let attack;
if (zapEnergy >= 50) {
attack = "Thunder";
} else {
attack = "Spark";
}
console.log(attack);
And the same result with a ternary:
let zapEnergy = 20;
// Version 2: ternary (1 line)
let attack = zapEnergy >= 50 ? "Thunder" : "Spark";
console.log(attack);
Keep it Simple
The ternary is great for choosing between two values. For multiple lines of code or chains of decisions, prefer
if
/
else
: it stays readable.
Exercise 3 — Predict the Ternary
What will this code print?
let pyrochuLevel = 15;
let badge = pyrochuLevel >= 20 ? "Fire badge" : "No badge";
console.log(badge);
Options
• ```No badge```
• ```Fire badge```
• ```true```
• An error
Hint : Evaluate the condition before the ```?``` first. Which of the two values does the ternary pick when the condition is ```false``` ?
Exercise 4 — Parts of the Ternary
In
hp > 50 ? "fight" : "rest"
, match each part with its role.
Items to match
• hp > 50
• ?
• "fight"
• "rest"
Definitions
• The condition to evaluate
• Separates condition and values
• Value when the condition is true
• Value when the condition is false
Exercise 5 — Complete the Ternary
Florachu likes the sun. Complete the ternary so
mood
is
"happy"
when it's sunny, and
"sleepy"
otherwise.
let isSunny = true;
let mood = isSunny ____ "happy" ____ "sleepy";
console.log("Florachu is " + mood);
Options: ? : ! ; &&
Hint : Two symbols structure a ternary: one asks the question, the other separates the two possible answers.
Exercise 6 — From if/else to Ternary
Which ternary is equivalent to this
if
/
else
?
let entry;
if (age >= 18) {
entry = "allowed";
} else {
entry = "denied";
}
Options
• ```let entry = age >= 18 ? "allowed" : "denied";```
• ```let entry = age >= 18 ? "denied" : "allowed";```
• ```let entry = age >= 18 : "allowed" ? "denied";```
• ```let entry = ? age >= 18 "allowed" : "denied";```
Hint : The order is always: condition, then ```?```, then the "true" value, then ```:```, then the "false" value.
Exercise 7 — Entry Fee
The Codémon stadium offers a discount to young trainers. Complete the code: the ticket costs 5 when
age
is strictly below 12, otherwise 10.
let age = 10;
let price = age ____ 12 ? ____ : ____;
console.log("Ticket price: " + price);
Options: < 5 10 > 10 5
Hint : The value right after the ```?``` is used when the condition is true. Who gets the discount here?
Exercise 8 — When to Avoid the Ternary
In which situation is an
if
/
else
a better choice than a ternary?
Options
• When each branch needs to run several lines of code
• When choosing between two simple values
• When assigning a default status to a variable
• Never, the ternary is always better
Hint : The ternary produces one value. What happens to readability when you try to squeeze many actions into it?
Exercise 9 — Ternary Makeover
This code works, but it's heavy. Rewrite it using two ternaries instead of the two
if
/
else
blocks, then print both variables.
let rockachuHP = 65;
let status;
if (rockachuHP > 50) {
status = "ready";
} else {
status = "resting";
}
let icon;
if (rockachuHP > 50) {
icon = "⚔️";
} else {
icon = "💤";
}
Starter code
let rockachuHP = 65;
// Rewrite with two ternaries
let status =
let icon =
console.log(status);
console.log(icon);