Skip to content
Laviyx Learn

Try

JavaScript course menu

JavaScript if, else if and else: Conditions and the Ternary Operator

Learn JavaScript conditional statements: if, else if and else, combining conditions with && and ||, nested conditions, early returns, the ternary operator for choosing values, and common mistakes such as = instead of ===.

Beginner7 min readUpdated
On this page

Programs need to make decisions: show a discount if the cart is big enough, show an error if a field is empty. The if statement runs code only when a condition is true.

if#

JavaScript
const temperature = 34;

if (temperature > 30) {
  console.log("It's hot. Drink water!");
}
console.log("Have a nice day.");
Output
It's hot. Drink water!
Have a nice day.

The condition goes in parentheses. If it is truthy, the block in { } runs; otherwise it is skipped.

else#

JavaScript
const balance = 250;
const price = 400;

if (balance >= price) {
  console.log("Payment successful");
} else {
  console.log(`Insufficient balance: you need ₹${price - balance} more`);
}
Output
Insufficient balance: you need ₹150 more

else if#

Chain conditions to choose between several options. They are checked in order, and only the first true branch runs:

JavaScript
function grade(marks) {
  if (marks >= 90) {
    return "A";
  } else if (marks >= 75) {
    return "B";
  } else if (marks >= 50) {
    return "C";
  } else {
    return "Fail";
  }
}

console.log(grade(95), grade(80), grade(62), grade(30));
Output
A B C Fail

Order matters: if marks >= 50 came first, 95 would get a "C". (Functions are covered in the next section; here grade just wraps the if chain so we can test several values.)

Combining conditions#

JavaScript
const age = 25;
const hasLicence = true;
const isWeekend = false;

if (age >= 18 && hasLicence) {
  console.log("Can rent a car");
}
if (isWeekend || age < 12) {
  console.log("Discount applies");
} else {
  console.log("Full price");
}
Output
Can rent a car
Full price

Early returns instead of deep nesting#

Nested if statements quickly become hard to read. Inside functions, checking for problems first and returning early keeps the main logic flat:

JavaScript
function checkout(cart, user) {
  if (!user) {
    return "Please log in";
  }
  if (cart.length === 0) {
    return "Your cart is empty";
  }
  return `Placing order for ${cart.length} items`;
}

console.log(checkout([], { name: "Asha" }));
console.log(checkout(["pen", "book"], { name: "Asha" }));
console.log(checkout(["pen"], null));
Output
Your cart is empty
Placing order for 2 items
Please log in

The ternary operator#

When you only need to choose between two values, the ternary operator is shorter:

JavaScript
const items = 5;
const label = items === 1 ? "item" : "items";
console.log(`${items} ${label}`);

const isMember = true;
console.log(`Shipping: ${isMember ? "free" : "₹50"}`);
Output
5 items
Shipping: free

Keep ternaries simple. If you nest several, an if...else chain is easier to read.

Common mistakes#

Practice#

Practice exercise

Write a function ticketPrice(age) that returns ₹0 for children under 3, ₹100 for ages 3 to 12, ₹50 for 60 and over, and ₹200 for everyone else. Print the price for ages 2, 8, 30 and 65.

Show solution
JavaScript
function ticketPrice(age) {
  if (age < 3) return 0;
  if (age <= 12) return 100;
  if (age >= 60) return 50;
  return 200;
}

for (const age of [2, 8, 30, 65]) {
  console.log(`Age ${age}: ₹${ticketPrice(age)}`);
}
Output
Age 2: ₹0
Age 8: ₹100
Age 30: ₹200
Age 65: ₹50

Each return ends the function, so later checks only run when earlier ones did not match.

Key takeaway#

Finished this lesson?

Related lessons

JavaScriptJavaScript Comparisons: === vs ==, Truthy and Falsy ValuesUnderstand JavaScript comparisons: strict equality (===) versus loose equality (==), comparing strings, numbers and objects, NaN and Object.is, the complete list of falsy values, truthy values, and safe ways to check for empty or missing values.Beginner8 min readJavaScriptJavaScript switch Statement: Cases, break, Fall-through and AlternativesLearn the JavaScript switch statement: matching a value against cases, why break is needed, intentional fall-through to group cases, the default case, strict comparison in switch, and object lookups as an alternative.Beginner7 min readJavaScriptJavaScript Operators: Arithmetic, Assignment, Increment, Logical and MoreLearn JavaScript operators: arithmetic, assignment and compound assignment (+=, -=), increment and decrement (prefix vs postfix), comparison, logical AND, OR and NOT, nullish coalescing (??), optional chaining (?.), the ternary operator and precedence.Beginner8 min read