if, else & conditions

Make decisions with code

A program does not always run every line. Sometimes it should greet a signed-in user and ask a guest to sign in. Sometimes it should show a warning only when a form is incomplete. JavaScript makes those choices with conditionals: statements that run code only when a condition is truthy.

You already met booleans, comparisons, logical operators, nullish and optional chaining, the ternary operator, and block statements. This lesson connects those tools: comparisons and logical operators often create the condition, while blocks hold the code that should run. If truthy and falsy values feel fuzzy, revisit Booleans & truthiness.

The most common shape is a chain. JavaScript checks the first condition. If it is false, it checks the next else if. If every condition is false, the final else is the fallback. In one trip through the chain, only one branch runs.

Step through the temperature example. Change line 1, predict the first true condition, then watch later branches get skipped.

1const temperature = 12;Run2let clothing;3 4if (temperature < 0) {5  clothing = "heavy coat";6} else if (temperature < 15) {7  clothing = "jacket";8} else if (temperature < 30) {9  clothing = "t-shirt";10} else {11  clothing = "stay cool";12}13console.log(clothing);

Try the same idea as a sorting game. Which branch would each input choose?

Because an else-if chain stops at the first true condition, the order of checks is part of the logic. A broad condition can accidentally swallow a more specific one.

In this grade calculator, score >= 50 is true for a score of 91. If that check comes first, the score >= 90 branch never gets a chance.

1function grade(score) {2  if (score >= 50) return "pass";3  if (score >= 90) return "excellent";4  return "try again";5}

A block is code between braces: { and }. In an if statement, the block is the fenced area on that path. Every statement inside the braces depends on the condition.

1const isAdmin = true;2if (isAdmin) {3  console.log("show admin link");4  console.log("delete account enabled");5}

JavaScript allows a one-line if without braces, but it controls only the next statement. Indentation does not matter to the language, so this classic bug is easy to miss in review:

1const isAdmin = false;2if (isAdmin)3  console.log("show admin link");4  console.log("delete account enabled");

Blocks also create scope for let and const. A variable declared inside an if block belongs to that block. That keeps names tidy; later Scope lessons go deeper.

The condition inside if (...) can be any value. JavaScript converts it to a yes/no decision. Values that act like yes are truthy; values that act like no are falsy. The main falsy values are false, 0, "", null, undefined, and NaN. Almost everything else is truthy.

1const value = "0";2 3if (value) {4  console.log("branch runs");5} else {6  console.log("branch skipped");7}

Functions get a full module next, but you can read this pattern now: return leaves a function immediately. An early return uses that to handle a failure case near the top.

1function checkout(user) {2  if (!user) return "Sign in first";3  if (user.blocked) return "Account blocked";4  if (user.cartItems === 0) return "Cart is empty";5  if (!user.paymentReady) return "Add payment method";6  return "Ready to checkout";7}8const user = { blocked: false, cartItems: 2, paymentReady: true };Run9const result = checkout(user);10console.log(result);

The nested and early-return versions are logically equivalent for the inputs in the experiment. The early-return version is often easier to scan because each invalid case is handled and removed from the story. The success path stays at the left edge.

Where you'll use this

Conditionals appear anywhere code reacts to data:

• Show a loading, empty, error, or success message.
• Validate a form before submitting it.
• Choose a price, shipping option, or permission message.
• Return early from a function when required input is missing.

1function statusMessage(user, cart) {2  if (!user) return "Please sign in.";3  if (cart.length === 0) return "Your cart is empty.";4  if (!user.paymentReady) return "Add a payment method.";5  return "Ready to checkout.";6}

Common misconceptions

Trace each snippet carefully. Your first-try score counts, but every answer teaches.

Key takeaways

• if runs a block only when its condition is truthy.
• else if chains use first-match wins; later branches are skipped.
• Braces create the block controlled by the condition and scope let/const variables.
• Truthy checks are useful, but explicit checks are clearer for arrays, zero, and missing values.
• Early returns handle stop cases first and keep function logic flat.

Up next: The switch statement.