Control Flow

</>Coding Tamilan.← JavaScript course

JavaScript · Lesson 10 / 32 · English

Control Flow

Understand the idea. Change the code. Build confidence with one focused experiment.

Detailed notesRunnable JavaScriptPractice + answer

Read this lesson in தமிழ் ↗.

01 / Understand

Start with the idea

Conditions choose a path and loops repeat work. Trace each iteration and the condition it evaluates before predicting the result.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

Step-by-step lesson notes

Control Flow in JavaScript

Control flow determines the order in which statements are executed. JavaScript provides conditional statements and loops to control program flow.

if / else if / else

JavaScript reference fragmentCODE

let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");  // ← this runs
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

Ternary Operator

JavaScript reference fragmentCODE

// condition ? valueIfTrue : valueIfFalse
let age = 20;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // "Adult"

// Can be chained (but keep it readable)
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";

switch Statement

JavaScript reference fragmentCODE

let day = "Monday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("Weekday");
    break;
  case "Saturday":
  case "Sunday":
    console.log("Weekend");
    break;
  default:
    console.log("Unknown day");
}

Don't forget break! Without it, execution falls through to the next case.

Loops

JavaScript reference fragmentCODE

// for loop
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// while loop
let count = 0;
while (count < 3) {
  console.log(count++);
}

// do...while (runs at least once)
do {
  console.log("Runs once even if false");
} while (false);

// for...of (iterates over values)
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}

// for...in (iterates over keys/indices)
const user = { name: "Alice", age: 25 };
for (const key in user) {
  console.log(key, user[key]);
}

break and continue

JavaScript reference fragmentCODE

// break — exit the loop entirely
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // 0, 1, 2, 3, 4
}

// continue — skip the current iteration
for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i); // 0, 1, 3, 4 (2 is skipped)
}

03 / Read & predict

A complete example

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

for (let lesson = 1; lesson <= 3; lesson++) {
  if (lesson === 2) {
    console.log("Review lesson " + lesson);
  } else {
    console.log("Study lesson " + lesson);
  }
}

Predict first. Reveal the expected result.

Study lesson 1
Review lesson 2
Study lesson 3

04 / Experiment

Make one change. See what happens.

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Wait for the editor to load, then load this example and press Run.

Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.

05 / Your turn

Put the idea to work

Practice challenge

Extend the loop to lesson 4.

Reveal the answer and reasoning

One additional line appears: Study lesson 4.

One mistake to avoid: A loop must make progress toward stopping. Forgetting an increment can create an infinite loop.

Your learning checkpoint

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.