JavaScript if...else

By the end of this lesson, you will be able to choose between two JavaScript code paths using if...else, write clear conditions, and avoid common mistakes.

What it is

An if...else statement is a control-flow tool. It evaluates a condition inside parentheses. If the condition is truthy, JavaScript runs the first block. If the condition is falsy, it runs the else block. The mental model is a fork in the road: one path is taken, not both.

Related terms include condition, truthy, falsy, branch, and block. A block is the code wrapped in curly braces. JavaScript treats 0, "", null, undefined, NaN, and false as falsy; most other values are truthy.

Why it matters

• It lets programs respond to user input, such as showing an error when a form field is empty.
• It controls application state, such as logging a user in only when credentials are valid.
• It prevents invalid operations, such as dividing by zero or accessing missing data.
• It makes code readable by separating normal behavior from fallback behavior.

Syntax or steps

The smallest useful pattern is:

if (condition) {
  doThis();
} else {
  doThat();
}

1. Write if, then parentheses containing a condition.
2. Put the true branch inside curly braces.
3. Add else and put the false branch inside curly braces.
4. Use strict equality (===) when comparing values unless you intentionally need type coercion.

Example

const order = { total: 85, coupon: "SAVE10" };

if (order.total >= 100 || order.coupon === "SAVE10") {
  console.log("Free shipping");
} else {
  console.log("Shipping: $5.99");
}

Part-by-part explanation

• const order = ... creates an object with two properties.
• order.total >= 100 checks whether the order is large enough for free shipping.
• || means “or,” so the condition is true if either side is true.
• order.coupon === "SAVE10" checks for a specific coupon code.
• Because the coupon matches, the first branch runs and logs Free shipping.

Common mistakes

• Using = instead of === in a condition. = assigns a value; === compares values.
• Forgetting curly braces when the branch contains multiple statements. Only the first statement belongs to the if or else without braces.
• Writing a semicolon immediately after the condition, such as if (ok);. This creates an empty branch and can make the following code run unexpectedly.
• Assuming every value is either true or false. JavaScript uses truthy and falsy values, so if (name) is false when name is an empty string.

When to use it

Use if...else when you need to run statements or side effects. Use the ternary operator when you need to choose a value for an expression.

Practice

Guided exercise: Write an if...else that checks whether age is at least 18. If true, log Adult; otherwise, log Minor.

const age = 17;

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

Expected output: Minor.

Challenge: Modify the example so it logs Adult only when age is a number and at least 18. Hint: use typeof age === "number" and &&.

Quick check

Question: What happens when the condition in an if...else is falsy?

Answer: JavaScript skips the if block and runs the else block, if one is present.

Summary

if...else lets JavaScript choose one of two paths based on a condition. Keep conditions explicit, use braces for clarity, and remember that JavaScript evaluates truthy and falsy values, not only true and false.