JavaScript Control Flow — Conditionals & Loops

Making decisions with if and else

An if statement runs a block of code only when a condition is true. The condition goes in parentheses after if, and it must evaluate to a boolean, exactly like the comparisons you practiced in the previous chapter. You can follow an if with an else block, which runs only when the condition is false, or with else if to check additional conditions in order. This lets your program branch: different input, different outcome, using the same underlying logic every time. It also helps to know that in a condition, values like 0, an empty string, and undefined are treated as falsy, while most other values are treated as truthy, which is why you'll sometimes see a condition check a value directly, like if (userName), instead of comparing it to something explicitly.

1const total = 42;23if (total >= 50) {4  console.log("You qualify for free shipping!");5} else {6  console.log("Add more items for free shipping.");7}

You can chain multiple conditions with else if when there are more than two possible outcomes. JavaScript checks each condition from top to bottom and runs the first block whose condition is true, skipping the rest. When you have many possible exact-match values for a single variable, a switch statement can be more readable than a long else if chain: it checks a value against a series of case labels and runs the matching block, falling through to a default block if nothing matches.

1const score = 72;2let grade;34if (score >= 90) {5  grade = "A";6} else if (score >= 80) {7  grade = "B";8} else if (score >= 70) {9  grade = "C";10} else {11  grade = "D";12}1314document.querySelector("#grade").textContent = grade;

1const plan = "pro";2let price;34switch (plan) {5  case "free":6    price = 0;7    break;8  case "pro":9    price = 12;10    break;11  case "team":12    price = 29;13    break;14  default:15    price = null;16}1718console.log(price);

Repeating work with loops

A loop repeats a block of code multiple times without you writing it out repeatedly by hand. The for loop is the most common: it has a starting point, a condition that's checked before each repetition, and a step that runs after each repetition. A typical for loop counts upward using a variable, often named i, checking the condition each time and stopping once it becomes false. A while loop is simpler in structure: it just repeats as long as its condition stays true, which is useful when you don't know in advance exactly how many repetitions you'll need.

1for (let i = 1; i <= 5; i = i + 1) {2  console.log("Rep number " + i);3}45let remaining = 3;6while (remaining > 0) {7  console.log("Items left: " + remaining);8  remaining = remaining - 1;9}

A common and very readable way to loop over every item in an array is for...of, which hands you each item directly without needing to track an index manually. This pairs naturally with everything you've learned: you might loop over an array of skills and build a piece of text or update the page once for each one, connecting arrays, loops, and DOM updates into a single flow.

1const skills = ["HTML", "CSS", "JavaScript"];23for (const skill of skills) {4  console.log("Skill: " + skill);5}

Combining conditionals and loops

Conditionals and loops become far more useful once they're nested together. A loop can check a condition on every pass, for example only logging a skill if its name is longer than a certain length, or counting how many items in an array meet some rule. This kind of combination, a loop that makes a decision on each item, is the pattern behind features like filtering a list, validating every field in a form, or highlighting specific items in a gallery.

1const scores = [55, 82, 91, 40, 76];2let passingCount = 0;34for (const score of scores) {5  if (score >= 60) {6    passingCount = passingCount + 1;7  }8}910console.log(passingCount + " students passed.");

With conditionals and loops, you now have real programming logic to pair with the structure and style from earlier chapters. Your upcoming Level 2 capstone, the Digital Business Card, will ask you to combine HTML for structure, CSS with Flexbox for layout, and JavaScript with conditionals and loops for behavior, such as toggling a section of contact details, looping over an array of skills to log them, or showing a different greeting depending on a condition. Every tool for that project is now in your hands.