Learning Objectives

Branch code based on conditions using if / else if / else.
Use comparison operators (===, !==, >, <, etc.) and logical operators (&&, ||, !) correctly.
Handle multiple branches with the switch statement.
Handle repetitive work with for and while loops.
Control loop flow with break and continue.

1. Conditionals: if / else if / else

const 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 if (score >= 60) {
  console.log("Grade D");
} else {
  console.log("Grade F");
}

Ternary Operator (Handling Simple Conditions)

const age = 20;
const status = age >= 19 ? "adult" : "minor";
console.log(status); // "adult"

2. Comparison Operators

Operator	Meaning	Example	Result
`===`	Strict equality (value + type)	`5 === "5"`	`false`
`!==`	Strict inequality	`5 !== "5"`	`true`
`==`	Loose equality (type coercion)	`5 == "5"`	`true`
`>`	Greater than	`10 > 5`	`true`
`<`	Less than	`10 < 5`	`false`
`>=`	Greater than or equal to	`5 >= 5`	`true`
`<=`	Less than or equal to	`4 <= 5`	`true`

Note: Always use === instead of ==. It also compares types, so it is safer.

3. Logical Operators

// && (AND): true only when both are true
const isAdult = true;
const hasTicket = true;
console.log(isAdult && hasTicket); // true

// || (OR): true when at least one is true
const isWeekend = false;
const isHoliday = true;
console.log(isWeekend || isHoliday); // true

// ! (NOT): true → false, false → true
const isLoggedIn = false;
console.log(!isLoggedIn); // true

Short-circuit Evaluation

// && : if the left side is false, the right side is not evaluated
false && console.log("not executed");

// || : if the left side is true, the right side is not evaluated
true || console.log("not executed");

// Default value pattern (||)
const username = "";
const displayName = username || "Guest"; // "Guest"

// Optional chaining pattern (&&)
const user = { name: "John Doe" };
const name = user && user.name; // "John Doe"

4. switch Statement

It finds the matching value among several values and runs it.

const day = "Mon";

switch (day) {
  case "Mon":
  case "Tue":
  case "Wed":
  case "Thu":
  case "Fri":
    console.log("It is a weekday.");
    break;
  case "Sat":
  case "Sun":
    console.log("It is the weekend.");
    break;
  default:
    console.log("Invalid input.");
}

Note: If you leave out break in each case, execution falls through to the next case (fall-through).

5. for Loop

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

// Iterating over an array
const fruits = ["apple", "banana", "strawberry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...of (iterating over values, ES6+)
for (const fruit of fruits) {
  console.log(fruit);
}

6. while Loop

let count = 0;

while (count < 5) {
  console.log(count); // 0, 1, 2, 3, 4
  count++;
}

// do...while: runs at least once before the condition is checked
let num = 0;
do {
  console.log(num); // 0
  num++;
} while (num < 0); // runs once even though the condition is false

7. break / continue

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

// continue: skips only the current iteration
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // skip even numbers
  console.log(i); // 1, 3, 5, 7, 9
}

Practice Files

Example
Assignment
Assignment Solution

Assignment

Assignment 02 — Multiplication Table Printer

Assignment Goal

Using loops and conditionals, build a multiplication table printer.

Requirements

Features

Create a dropdown (<select>) for choosing one of the tables from 1 to 9.
When the "Print" button is clicked, print the selected times table on the screen.
When the "Print All" button is clicked, print every table from 2 through 9.

Output Format (Example)

Single table (when table 5 is selected)

── 5 times table ──
5 × 1 = 5
5 × 2 = 10
5 × 3 = 15
...
5 × 9 = 45

Print All (tables 2–9)

── 2 times table ──    ── 3 times table ──    ...
2 × 1 = 2    3 × 1 = 3
...

Conditions

Use a for loop to calculate the multiplication table.
Include table 1 in the dropdown, but when it is selected show the message "The 1 times table is pointless! Please choose a table from 2 to 9."
When printing all tables, lay out tables 2–9 side by side. (Use CSS Grid or flex)
The result must clear the existing content and print the new content.

Hints

// Nested for statement example
for (let dan = 2; dan <= 9; dan++) {
  for (let i = 1; i <= 9; i++) {
    console.log(`${dan} × ${i} = ${dan * i}`);
  }
}

// Reading the dropdown value
const selected = parseInt(document.getElementById('danSelect').value);

File Structure

assignment/
└── index.html   ← write your code here

Grading Criteria

Item	Points
Dropdown and button UI	20 points
Correct multiplication table output using a for loop	40 points
Print All feature (tables 2–9)	20 points
Guidance message when table 1 is selected	10 points
Result is laid out neatly on screen	10 points

Total 100 points

Control Flow