JavaScript Fundamentals

Ternary Operator

Write shorter, cleaner if-else statements with the ternary operator

Find videos you like?

Save to resource drawer for future reference!

The Shortcut for Simple Decisions

The ternary operator is a one-line shortcut for writing simple if-else statements. It's called "ternary" because it has three parts: a condition, a value if true, and a value if false.

Think of it Like This

Ask a yes/no question → Get answer A if yes → Get answer B if no

The Structure: Question ? Yes : No

Three simple parts make up the ternary operator

Basic Format

condition

Check this

valueIfTrue

If YES

valueIfFalse

If NO

❓

1. Condition

The question you're asking (true or false?)

✅

2. If True

The value returned when condition is true

❌

3. If False

The value returned when condition is false

Simple Example: Age Check

See how ternary makes code shorter and cleaner

The Long Way (If-Else)

let age = 20;
let status;

if (age >= 18) {
  status = 'Adult';
} else {
  status = 'Minor';
}

console.log(status);
// Output: Adult

Takes 9 lines of code

The Short Way (Ternary)

let age = 20;

let status = age >= 18 ? 'Adult' : 'Minor';

console.log(status);
// Output: Adult

Only 3 lines! Much cleaner ✨

Same Result, Less Code

Both do the exact same thing, but ternary is much shorter for simple yes/no decisions!

More Ternary Examples

Practice with different scenarios

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

When to Use Ternary Operator

Best for simple decisions, not complex logic

Good Uses ✅

•

Simple yes/no decisions
age >= 18 ? 'Adult' : 'Minor'

•

Assigning one of two values
let status = isOnline ? 'Active' : 'Offline'

•

Quick inline checks
price > 100 ? 'Expensive' : 'Affordable'

Avoid For ❌

•

Complex conditions
Multiple checks get messy fast

•

Nested ternaries
Hard to read and understand

•

Multiple actions needed
Use regular if-else for that

Warning: Avoid Nested Ternaries!

They make code very hard to read

Don't Do This - Confusing!

// Too confusing! Which value goes where?
let grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'F';

Do This Instead - Clear!

// Much easier to read and understand
let grade;
if (score >= 90) grade = 'A';
else if (score >= 80) grade = 'B';
else if (score >= 70) grade = 'C';
else grade = 'F';

Remember

If you need more than 2 options or your condition is getting long, use regular if-else statements instead!

Real-World Examples

How ternary operators are used in actual applications

User Status Badge

Show different messages based on user login status

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Shopping Cart Discount

Apply discounts for members automatically

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Key Takeaways

⚡

Shorter Code

Ternary operator turns 5+ lines into just 1 line

❓

Format: condition ? yes : no

Question mark for true, colon for false

✅

Best for Simple Choices

Perfect for quick yes/no decisions

⚠️

Avoid Nesting

Don't put ternaries inside ternaries - use if-else

Previous Topic

Operators

Arithmetic, assignment, comparison, logical, and type operators in JavaScript.

Next Topic

If...Else Statements

Making decisions in code with if, else if, else statements.

Ask a Question

Have a question about Ternary Operator? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Ternary Operator

Write shorter, cleaner if-else statements with the ternary operator

Find videos you like?

Save to resource drawer for future reference!

The Shortcut for Simple Decisions

The ternary operator is a one-line shortcut for writing simple if-else statements. It's called "ternary" because it has three parts: a condition, a value if true, and a value if false.

Think of it Like This

Ask a yes/no question → Get answer A if yes → Get answer B if no

The Structure: Question ? Yes : No

Three simple parts make up the ternary operator

Basic Format

condition

Check this

valueIfTrue

If YES

valueIfFalse

If NO

❓

1. Condition

The question you're asking (true or false?)

✅

2. If True

The value returned when condition is true

❌

3. If False

The value returned when condition is false

Simple Example: Age Check

See how ternary makes code shorter and cleaner

The Long Way (If-Else)

let age = 20;
let status;

if (age >= 18) {
  status = 'Adult';
} else {
  status = 'Minor';
}

console.log(status);
// Output: Adult

Takes 9 lines of code

The Short Way (Ternary)

let age = 20;

let status = age >= 18 ? 'Adult' : 'Minor';

console.log(status);
// Output: Adult

Only 3 lines! Much cleaner ✨

Same Result, Less Code

Both do the exact same thing, but ternary is much shorter for simple yes/no decisions!

More Ternary Examples

Practice with different scenarios

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

When to Use Ternary Operator

Best for simple decisions, not complex logic

Good Uses ✅

•

Simple yes/no decisions
age >= 18 ? 'Adult' : 'Minor'

•

Assigning one of two values
let status = isOnline ? 'Active' : 'Offline'

•

Quick inline checks
price > 100 ? 'Expensive' : 'Affordable'

Avoid For ❌

•

Complex conditions
Multiple checks get messy fast

•

Nested ternaries
Hard to read and understand

•

Multiple actions needed
Use regular if-else for that

Warning: Avoid Nested Ternaries!

They make code very hard to read

Don't Do This - Confusing!

// Too confusing! Which value goes where?
let grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'F';

Do This Instead - Clear!

// Much easier to read and understand
let grade;
if (score >= 90) grade = 'A';
else if (score >= 80) grade = 'B';
else if (score >= 70) grade = 'C';
else grade = 'F';

Remember

If you need more than 2 options or your condition is getting long, use regular if-else statements instead!

Real-World Examples

How ternary operators are used in actual applications

User Status Badge

Show different messages based on user login status

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Shopping Cart Discount

Apply discounts for members automatically

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Key Takeaways

⚡

Shorter Code

Ternary operator turns 5+ lines into just 1 line

❓

Format: condition ? yes : no

Question mark for true, colon for false

✅

Best for Simple Choices

Perfect for quick yes/no decisions

⚠️

Avoid Nesting

Don't put ternaries inside ternaries - use if-else

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Operators

If...Else Statements

JavaScript Code Editor

Building Your Learning Module...

Ternary Operator

The Shortcut for Simple Decisions

Think of it Like This

Basic Format

1. Condition

2. If True

3. If False

The Long Way (If-Else)

The Short Way (Ternary)

Same Result, Less Code

More Ternary Examples

Good Uses ✅

Avoid For ❌

Don't Do This - Confusing!

Do This Instead - Clear!

Remember

User Status Badge

Shopping Cart Discount

Key Takeaways

Shorter Code

Format: condition ? yes : no

Best for Simple Choices

Avoid Nesting

Operators

If...Else Statements

JavaScript Code Editor

Ternary Operator

The Shortcut for Simple Decisions

Think of it Like This

Basic Format

1. Condition

2. If True

3. If False

The Long Way (If-Else)

The Short Way (Ternary)

Same Result, Less Code

More Ternary Examples

Good Uses ✅

Avoid For ❌

Don't Do This - Confusing!

Do This Instead - Clear!

Remember

User Status Badge

Shopping Cart Discount

Key Takeaways

Shorter Code

Format: condition ? yes : no

Best for Simple Choices

Avoid Nesting