Ternary operator in Javascript - Step-by-Step Execution

Concept Flow - Ternary operator

Evaluate condition

Yes/No↓

True

↓

Return true_value

↓

End

The ternary operator checks a condition and returns one value if true, another if false.

Execution Sample

Javascript

const age = 18;
const canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote);

This code checks if age is 18 or more and sets canVote to 'Yes' or 'No' accordingly.

Execution Table

Step	Condition (age >= 18)	Result	Value assigned to canVote	Output
1	18 >= 18	true	'Yes'	No output yet
2	N/A	N/A	N/A	Print 'Yes'

💡 Condition true, so 'Yes' assigned and printed.

Variable Tracker

Variable	Start	After Step 1	Final
age	undefined	18	18
canVote	undefined	'Yes'	'Yes'

Key Moments - 2 Insights

Why does the ternary operator return 'Yes' when age is 18?

Because the condition age >= 18 is true at step 1 in the execution table, so the true value 'Yes' is assigned.

What happens if the condition is false?

If the condition is false, the ternary operator assigns the false value (here 'No'), as shown in the concept flow diagram.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of canVote after step 1?

A undefined

B 'No'

C 'Yes'

D null

💡 Hint

Check the 'Value assigned to canVote' column in row for step 1.

At which step is the output printed to the console?

A Step 2

B Before step 1

C Step 1

D No output is printed

💡 Hint

Look at the 'Output' column in the execution table.

If age was 16, what would be the value assigned to canVote at step 1?

A 'Yes'

B 'No'

C undefined

D Error

💡 Hint

Refer to the concept flow and how false condition returns the false value.

Concept Snapshot

Syntax: condition ? true_value : false_value
Evaluates condition first.
Returns true_value if condition is true.
Returns false_value if condition is false.
Used for quick if-else assignments.

Full Transcript

The ternary operator in JavaScript evaluates a condition and returns one of two values depending on whether the condition is true or false. In the example, age is checked if it is 18 or more. Since age is 18, the condition is true, so 'Yes' is assigned to canVote. Then 'Yes' is printed. If the condition were false, 'No' would be assigned instead. This operator is a shortcut for simple if-else statements.