Making decisions

if and else

So far every line of your programs ran, top to bottom. Real programs have to choose: save the task, or reject it because the title is empty. An if statement runs a block of code only when a condition is truthy:

const title = "";

if (title.trim() === "") {
  console.log("A task needs a title");
}

console.log("This line always runs");

A task needs a title
This line always runs

The condition goes in parentheses. The code to run goes in a block, between { and }. Indent the code inside a block by two spaces so you can see at a glance what belongs to the if.

Add else to say what happens when the condition is falsy. Exactly one of the two blocks runs:

const title = "Buy milk";

if (title.trim() === "") {
  console.log("A task needs a title");
} else {
  console.log(`Saving "${title}"`);
}

Saving "Buy milk"

The condition does not have to be a boolean. JavaScript converts it using the truthy and falsy rules from Values, variables and types. if (title) is true for any non-empty string. That is handy, but be careful with numbers: if (count) is false when count is 0.

Several choices with else if

When there are more than two possibilities, chain them with else if. JavaScript tests the conditions from top to bottom and runs only the first block whose condition is truthy. else at the end catches everything else.

const hoursLeft = 5;

if (hoursLeft < 0) {
  console.log("Overdue");
} else if (hoursLeft < 24) {
  console.log("Due today");
} else if (hoursLeft < 24 * 7) {
  console.log("Due this week");
} else {
  console.log("Due later");
}

Due today

5 is also less than 24 * 7, but "Due this week" did not print: once one branch runs, the others are skipped. So the order matters. Put the most specific conditions first.

Nested conditions

A block can contain another if. This is called nesting:

const loggedIn = true;
const role = "viewer";

if (loggedIn) {
  if (role === "admin") {
    console.log("Show the admin panel");
  } else {
    console.log("Show the normal dashboard");
  }
} else {
  console.log("Show the login page");
}

Show the normal dashboard

One level of nesting is fine. Three or four levels become hard to follow. The section on guard clauses below shows how to flatten them.

The ternary operator

Sometimes you only want to choose between two values. The ternary operator condition ? a : b gives a when the condition is truthy and b otherwise. It is called "ternary" because it takes three parts.

const done = true;
const count = 1;

const mark = done ? "x" : " ";
console.log(`[${mark}] Buy milk`);
console.log(`${count} ${count === 1 ? "task" : "tasks"} left`);

[x] Buy milk
1 task left

Use a ternary for a short choice between two values. For anything longer, or for choices that do things (print, save, delete), use if. Never nest ternaries inside ternaries; they quickly become unreadable.

switch

When you compare one value against many fixed options, switch can be clearer than a long else if chain. It compares with ===:

const status = "in_progress";

switch (status) {
  case "todo":
    console.log("Not started");
    break;
  case "in_progress":
  case "review":
    console.log("Someone is working on it");
    break;
  case "done":
    console.log("Finished");
    break;
  default:
    console.log(`Unknown status: ${status}`);
}

Someone is working on it

• Each case is one possible value. default runs when no case matches, like else.
• break leaves the switch. Two cases with nothing between them, like "in_progress" and "review", share the same code.

const level = "warn";

switch (level) {
  case "error":
    console.log("page the on-call engineer");
  case "warn":
    console.log("write to the error log");
  case "info":
    console.log("write to the normal log");
}

write to the error log
write to the normal log

Here the fall through is deliberate: a warning is also written to the normal log. Most of the time it is a bug. If you let cases fall through on purpose, add a comment saying so.

Guard clauses

Decisions usually live inside a function: a named piece of code that takes inputs and gives back a result with return. Functions get their own lesson; for now you only need this shape:

function describe(count) {
  return `${count} tasks`;
}

console.log(describe(3));

3 tasks

count is a parameter: a variable that gets the value you pass in the parentheses when you call the function. return ends the function and hands back a value.

Because return ends the function straight away, you can check the bad cases first and leave early. Each early check is called a guard clause. You wrote guard clauses as negated conditions in Conditional reasoning; here they are in real JavaScript. Compare the nested version with the guarded one:

function canEditNested(user, task) {
  if (user) {
    if (task.ownerId === user.id) {
      if (!task.locked) {
        return "yes";
      } else {
        return "no: task is locked";
      }
    } else {
      return "no: not your task";
    }
  } else {
    return "no: not logged in";
  }
}

function canEdit(user, task) {
  if (!user) return "no: not logged in";
  if (task.ownerId !== user.id) return "no: not your task";
  if (task.locked) return "no: task is locked";
  return "yes";
}

const ada = { id: 1 };
const task = { ownerId: 1, locked: false };

console.log(canEditNested(ada, task), "|", canEdit(ada, task));
console.log(canEditNested(null, task), "|", canEdit(null, task));
console.log(canEdit({ id: 2 }, task));
console.log(canEdit(ada, { ownerId: 1, locked: true }));

yes | yes
no: not logged in | no: not logged in
no: not your task
no: task is locked

Both functions give the same answers, but the second one reads like a checklist: every rule is one line, and the happy path is the last line. When a block is a single statement you may leave out the braces, as in if (!user) return …;. Keep that for one-line guards.

Build: age verification

A sign-up form asks for the user's age. The value arrives as text, typed by a stranger, so it can be anything. The rules:

• The age must be present, a whole number, and between 0 and 130. Otherwise, reject the input with a clear reason.
• Under 13: the user cannot sign up.
• 13 to 17: they can sign up with a parent's consent.
• 18 or older: they can sign up.

First validate the input with guard clauses, then decide. Test the function with many inputs, including bad ones, and print each result:

function checkAge(input) {
  if (input === undefined || input === null) return "invalid: age is required";

  const text = String(input).trim();
  if (text === "") return "invalid: age is required";

  const age = Number(text);
  if (!Number.isInteger(age)) return "invalid: age must be a whole number";
  if (age < 0 || age > 130) return "invalid: age must be between 0 and 130";

  if (age < 13) return "rejected: too young";
  if (age < 18) return "allowed with parental consent";
  return "allowed";
}

console.log("25    ->", checkAge("25"));
console.log("18    ->", checkAge("18"));
console.log("17    ->", checkAge("17"));
console.log("13    ->", checkAge(" 13 "));
console.log("12    ->", checkAge("12"));
console.log("''    ->", checkAge(""));
console.log("null  ->", checkAge(null));
console.log("abc   ->", checkAge("abc"));
console.log("17.5  ->", checkAge("17.5"));
console.log("-4    ->", checkAge("-4"));
console.log("200   ->", checkAge(200));

25    -> allowed
18    -> allowed
17    -> allowed with parental consent
13    -> allowed with parental consent
12    -> rejected: too young
''    -> invalid: age is required
null  -> invalid: age is required
abc   -> invalid: age must be a whole number
17.5  -> invalid: age must be a whole number
-4    -> invalid: age must be between 0 and 130
200   -> invalid: age must be between 0 and 130

Walk through a few lines of the output:

• "abc" becomes NaN, and Number.isInteger(NaN) is false, so one check rejects both text and decimals.
• The empty string needs its own check, because Number("") is 0, as you saw in Values, variables and types. Without that guard, an empty form would say "rejected: too young".
• The boundary values 18, 17, 13 and 12 are tested on purpose. Bugs love the edges: < where you meant <=.
• The decision part is only three lines, because the guards already threw out every bad input.

Practice

function grade(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  return "F";
}

console.log(grade(95), grade(90), grade(89), grade(70), grade(12));

A A B C F

function statusText(code) {
  switch (code) {
    case 200:
      return "OK";
    case 201:
      return "Created";
    case 404:
      return "Not Found";
    default:
      return "Unknown";
  }
}

console.log(statusText(200), "|", statusText(404), "|", statusText("200"));

OK | Not Found | Unknown

function shipping(total, country) {
  if (typeof total !== "number" || !(total > 0)) return "invalid total";
  if (total >= 50) return 0;
  return country === "NG" ? 5 : 15;
}

console.log(shipping(80, "GB"), shipping(20, "NG"), shipping(20, "GB"));
console.log(shipping(-5, "NG"), shipping(NaN, "NG"), shipping("80", "NG"));

0 5 15
invalid total invalid total invalid total

Recap

• if runs a block when its condition is truthy; else if and else add more branches, and only the first match runs.
• condition ? a : b chooses between two values. Keep it short.
• switch compares one value with === against many cases. Remember break.
• Guard clauses check the bad cases first and return early, which keeps code flat.
• Validate every outside input before you make a decision with it, and test the edges.

Next, Loops: repeat work as often as you need, and build a number guessing game.