JavaScript Simplified · One concept, one day, one project · Day 7 of 32

The Ternary Operator

Writing a simple either/or choice in a single line. You use it to show whether a theme is in dark mode or light mode.

By the end of today you can

Write a simple choice with the ternary operator
Read a ternary and say what each part does
Know when a ternary is clearer than if/else, and when it is not
Build a theme status display

Sometimes a decision is tiny: if it is dark, say "Dark Mode", otherwise say "Light Mode". Writing a full if/else for that can feel heavy. The ternary operator is a short way to pick between two values in one line.

1. The Ternary Operator

Definition

The ternary operator chooses between two values based on a condition. Its shape is:

What this code doesThe shape of a ternary. The ? and : are part of the operator.

shape.js

condition ? valueIfTrue : valueIfFalse

NOTE   

Read it as: is the condition true? If yes, the first value. If no, the value after the colon.

The ? asks the question; the value before the : is used when the condition is true, and the value after it when the condition is false.

What this code doesisDark is true, so label becomes "Dark Mode". Change isDark to false and it becomes "Light Mode". One line does the whole choice.

app.js

const isDark = true;

const label = isDark ? "Dark Mode" : "Light Mode";
console.log(label);

OUTPUT   TERMINAL

➜ webbo3 node app.js
Dark Mode

2. The Same Thing, Both Ways

A ternary is just a compact if/else when you are choosing a value. These two produce the same result.

What this code doesSix lines of if/else, or one line of ternary, for the same job. When you are simply picking one value or another, the ternary is often clearer.

app.js

const score = 72;

// if/else
let result;
if (score >= 50) {
  result = "Pass";
} else {
  result = "Fail";
}

// the same choice as a ternary
const result2 = score >= 50 ? "Pass" : "Fail";

console.log(result);
console.log(result2);

OUTPUT   TERMINAL

➜ webbo3 node app.js
Pass
Pass

Keep ternaries simple

A ternary is for a small, clear choice. If you find yourself nesting one ternary inside another, stop and use if/else instead. Clever one-liners that nobody can read are not a win.

Today’s Mini Project

🌙 Theme Status

Show whether the interface is in dark mode or light mode, using a ternary. Then show a matching short message, also with a ternary.

What this code doesTwo small either/or choices, each in one line. Flip darkMode to true and both lines change together.

app.js

const darkMode = false;

const theme = darkMode ? "Dark Mode" : "Light Mode";
const tip = darkMode ? "Easy on the eyes at night." : "Bright and clear.";

console.log("Theme: " + theme);
console.log(tip);

OUTPUT   TERMINAL

➜ webbo3 node app.js
Theme: Light Mode
Bright and clear.

Challenge (15 minutes)

Add a ternary that sets icon to "moon" when dark and "sun" when light, and print it. Expected: a line like "Icon: sun" that matches the theme.

Try This

Use a ternary to set a variable fee to 0 when age < 13 and 500 otherwise, then print it.

Expected: 0 for a child, 500 for an adult.

Picture This

You have two tools for a decision now: the full if/else for anything with steps, and the quick ternary for a clean either/or. Good code uses the simplest tool that reads clearly, not the cleverest one.

Checkpoint

What are the three parts of a ternary?

The condition (before the ?), the value used when it is true (between ? and :), and the value used when it is false (after the :).

When should you use a ternary instead of if/else?

When you are picking between two values based on a simple condition. For anything with several steps or several cases, if/else or else if is clearer.

Why avoid nesting ternaries?

Because they quickly become hard to read. A ternary inside a ternary is a sign to switch to if/else, which stays clear.

Tick Before You Move On

☐ I can write a choice with condition ? a : b
☐ I can read a ternary and say what each part does
☐ I know when a ternary is clearer than if/else
☐ I built the Theme Status display

Quick Recap

The ternary operator picks between two values in one line. Its shape is condition ? valueIfTrue : valueIfFalse. It is a compact if/else for choosing a value. Keep it to simple choices; use if/else when there are steps or many cases.

Next: Day 8. Computers are brilliant at doing the same thing many times. Tomorrow you learn loops, so you never have to copy and paste a line twenty times again.

The Ternary Operator

1. The Ternary Operator

Definition

2. The Same Thing, Both Ways

Today’s Mini Project

Checkpoint

Learn this with a real instructor