Assignment & Ternary Operator0%
Conditional Statements: if, else if, else

Assignment & Ternary Operator

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Assignment & Ternary Conditional Operator

Assignment operators update the value stored inside variables, while the ternary operator provides a concise, elegant way to write inline conditional expressions.

1. Assignment Operators

The basic assignment operator is the equals sign (=). JavaScript also provides compound assignment operators that combine an arithmetic operation with assignment:

OperatorNameEquivalent ToExample
=Simple Assignmentx = ylet score = 100;
+=Addition Assignmentx = x + yscore += 10; (Now 110)
-=Subtraction Assignmentx = x - yscore -= 20; (Now 90)
*`=`**Multiplication Assignmentx = x * yscore *= 2; (Now 180)
/=Division Assignmentx = x / yscore /= 3; (Now 60)
%=Modulus Assignmentx = x % yscore %= 7; (Now 4)
`=`**Exponentiation Assignmentx = x ** yscore **= 2; (Now 16)

String Concatenation Assignment (+=):

JavaScript
let message = "Hello";
message += " World";
message += "!";
console.log(message); // "Hello World!"

2. The Ternary Operator (condition ? expr1 : expr2)

The ternary operator is the only operator in JavaScript that takes three operands. It serves as a compact, inline shortcut for an if...else statement:

Output
condition ? value_if_true : value_if_false

Comparison: if...else vs. Ternary

JavaScript
const age = 20;
let statusMessage;
 
// Using traditional if...else:
if (age >= 18) {
statusMessage = "Adult";
} else {
statusMessage = "Minor";
}
 
// Using concise ternary operator:
const statusMessage = age >= 18 ? "Adult" : "Minor";

Why Developers Love the Ternary Operator:

Because the ternary operator is an expression (it returns a value), you can assign it directly to a const variable, pass it as a function argument, or embed it directly inside template literals:

JavaScript
const userRole = "admin";
console.log(`Welcome, ${userRole === "admin" ? "Administrator" : "Guest"}!`);

3. Nested Ternary Operators (Use With Caution!)

You can chain ternary operators for multiple conditions, but be careful not to hurt code readability:

JavaScript
const score = 85;
 
const grade = score >= 90 ? "A"
: score >= 80 ? "B"
: score >= 70 ? "C"
: "F";
 
console.log(grade); // "B"
Pro Tip
[!TIP] If a nested ternary exceeds 2 levels of depth, switch to a standard if...else or switch statement for better team readability.
Interactive Quiz

Practice Quiz

Question 1
What is the equivalent of x += 5?
Question 2
How many operands does the ternary operator take?
Question 3
What is the result of const result = (10 > 5) ? "Yes" : "No";?
Question 4
Why is the ternary operator preferred over if...else when initializing const variables?
Question 5
What is the value of x after running let x = 12; x %= 5;?
Next Lesson

Conditional Statements: if, else if, else

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Logical OperatorsConditional Statements: if, else if, else

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext