if, else & conditions

Make decisions with code

A program does not always run every line. Sometimes it has to choose. For example, it may need to:

• Greet a user who is signed in, but ask a guest to sign in.
• Show a warning only when a form is not filled in.

JavaScript makes these choices with conditionals. A conditional checks a condition: a question with a yes or no answer. Then it picks which code to run.

1const isLoggedIn = false;2 3if (isLoggedIn) {4  console.log("Welcome back");5} else {6  console.log("Please sign in");7}

Line 1 sets isLoggedIn to false. Line 3 asks: is isLoggedIn true? It is not, so JavaScript skips line 4. It runs the else part on line 5 instead, and line 6 prints Please sign in. Change line 1 to true, and the program prints Welcome back instead.

The else part is the fallback. It runs only when the if condition above it is false.

You already met the tools that conditions are built from: booleans, comparisons, logical operators, ?? and ?., the ternary operator, and blocks. This lesson puts them together. A comparison or a logical operator usually makes the condition. A block holds the code that should run. If truthy and falsy values feel unclear, go back to Booleans & truthiness.

Each possible path in a conditional is called a branch. The most common shape is a chain of branches:

• JavaScript checks the first condition.
• If it is false, JavaScript checks the next else if.
• If every condition is false, the last else runs.

Each time the chain runs, only one branch runs.

1const orderTotal = 120;2 3if (orderTotal >= 100) {4  console.log("free delivery");5} else if (orderTotal >= 50) {6  console.log("standard delivery");7} else {8  console.log("delivery fee");9}

Line 3 asks: is the total 100 or more? For 120 the answer is yes. So line 4 prints free delivery, and JavaScript skips the other two branches.

Try other totals. For 70, line 3 is false and line 5 is true, so it prints standard delivery. For 20, both checks are false, so the else on line 7 runs and prints delivery fee.

Now step through the temperature example. Pick a temperature for line 1. Guess which condition will be the first true one. Then step through and watch JavaScript skip every branch after it.

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. For each temperature, which branch would run?

An else-if chain stops at the first true condition. So the order of the checks changes the result. A wide check is true for many values. It can catch a value before a narrower check gets a turn.

Look at this grade function. score >= 50 is true for a score of 91. If that check comes first, the function returns pass. The score >= 90 check never runs.

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 curly braces, { and }. In an if statement, the block holds the code for that branch. Every line inside the braces runs only when the condition is true.

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

JavaScript also lets you write an if without braces. Then the if controls only the one statement right after it. Indenting a line (moving it right with spaces) does not change this, because JavaScript ignores indenting. That makes this bug easy to miss:

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

Blocks also limit where let and const names can be used. A name made inside an if block exists only inside that block. This is called block scope. The Scope lessons later cover it in depth.

1const isMember = true;2 3if (isMember) {4  const message = "member price";5  console.log(message);6}

isMember is true, so the block runs. Line 4 makes message, and line 5 prints member price. You can use message inside these braces, but not after them.

So when only one branch needs a value, make it inside that branch. Don't reuse one vague name all through a function.

You can put any value inside if (...). JavaScript turns it into a yes or a no. A value that counts as yes is truthy. A value that counts as no is falsy.

The main falsy values are false, 0, "" (empty text), null, undefined, NaN, and 0n. Almost every other value is truthy.

1const cart = [];2 3if (cart.length > 0) {4  console.log("show checkout");5} else {6  console.log("show empty cart");7}

Line 1 makes cart an empty array. An empty array is still truthy, because every array is an object, and every object is truthy. So if (cart) would run even for an empty cart. It can't tell you whether the cart has items.

That is why line 3 asks about the number of items instead. cart.length is 0, so cart.length > 0 is false. Line 6 prints show empty cart.

Now pick a value below and see which branch it chooses.

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

The table below compares short truthy checks with checks that say exactly what they mean. Read each row as: "when I write this, JavaScript asks this question, and this is when it's a good choice."

Write the question you really mean

A comparison such as cart.length > 0 already gives a boolean: true or false. So it makes a clear condition when your question is "does this cart have an item?" The if statement then uses that answer to pick a branch.

1const accessCode = "5";2 3if (accessCode === 5) {4  console.log("open settings");5} else {6  console.log("enter a number");7}

What a user types into a text box usually reaches your code as a string (text). Here accessCode is the string "5", not the number 5.

Strict equality, ===, checks both the value and the type. A string and a number are different types. So line 3 is false, and the program prints enter a number. Use === for exact comparisons. Turn form text into a number with Number() only when your rule really needs a number.

You can also put a value straight into the condition. if (user) is a short way to ask whether there is a user, because null and undefined are falsy. But it does not prove that the user object has every property your next line needs. When one property matters, check it directly, like user.isAdmin === true.

Think about what the value means before you use the short form. For example:

• A name that must be filled in can use if (name), because an empty name should be rejected.
• A discount of 0 is different. Zero can be a real discount, so if (discount) asks the wrong question. Use discount !== undefined to tell a missing discount apart from a zero discount.

Comparisons from the previous lesson help here. They show the rule in the code, and they give a boolean. The next reader can see why the branch runs without guessing.

Functions get their own module next, but you can read this pattern now. return leaves a function right away. An early return uses this to handle a stop case, like a missing user, near the top of the function. Each of these early checks is called a guard clause.

Below are two versions of the same checkout function. One uses nested ifs: an if inside an if inside an if. The other uses early returns. Pick a shopper and step through both.

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);

Both versions give the same result for every shopper in the experiment. The early-return version is often easier to read. Each problem is handled in one line, and then it is done. The success line stays at the left edge, instead of being pushed right by many levels of braces.

Where you'll use this

Conditionals show up wherever code reacts to data. Here are common uses:

• Show a loading, empty, error, or success message.
• Check a form before sending it.
• Choose a price, a delivery option, or a permission message.
• Return early from a function when a needed value 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}7 8const user = { paymentReady: true };9const cart = ["tea"];10console.log(statusMessage(user, cart));

Line 2 stops guests before the function reads their cart. Line 3 handles a signed-in shopper with an empty cart. Line 4 handles a missing payment method. If the code reaches line 5, every check above it was false, so the shopper is ready.

Lines 8 and 9 make a signed-in shopper with tea in the cart. So line 10 prints Ready to checkout. Each return gives the screen one clear message.

In a real app, keep the checks close to the data they need. Don't write a long chain just because you can. When a decision has its own name, like "can this user check out?", put it in its own function. Use a ternary only to pick one small value inside an expression.

The table below says which tool fits which job. Read each row as: "when I need to do this, this tool fits best, and this is why."

Common misconceptions

Work through each piece of code line by line. Your first answer counts toward your score, and every answer explains why.

Key takeaways

• if runs its block only when its condition is truthy.
• In an else if chain, the first true branch runs, and the rest are skipped.
• Braces mark the block that the condition controls. They also keep let and const names inside that block.
• Truthy checks are handy. For arrays, zero, and missing values, an exact check is clearer.
• Early returns handle the stop cases first and keep a function easy to read.

Up next: The switch statement.