javascript-course-chapter-12
Chapter 12: Loops
Learn JavaScript loops with explanations, fully commented code, outputs, and code explanations.
Goal: Understand how to repeat code using for, while, do while, for...of, for...in, break, continue, nested loops, iteration patterns, and performance.
12.1 for
The for loop repeats code a specific number of times.
It is best when you know how many times the loop should run.
A for loop has three parts: start value, condition, and update.
JavaScript checks the condition before each repetition.
When the condition becomes false, the loop stops automatically.
For loops are useful for arrays, counters, tables, reports, and calculations.
Example: Print numbers 1 to 5
// Start the counter variable at 1.
for (let i = 1; i <= 5; i++) {
// Print the current value of i.
console.log(i);
}
Code Explanation: The variable i starts at 1. The loop checks if i is less than or equal to 5. If true, it prints the number. Then i++ increases the value. When i becomes 6, the loop stops.
12.2 while
The while loop repeats code while a condition is true.
It is useful when you do not know exactly how many times code should run.
The condition is checked before the loop body runs.
If the condition is false at the beginning, the loop does not run.
You must update the condition inside the loop.
Without an update, the loop may run forever.
Example: Count from 1 to 5
// Create a counter variable.
let count = 1;
// Keep looping while count is 5 or less.
while (count <= 5) {
// Print the current count.
console.log(count);
// Increase count to avoid infinite loop.
count++;
}
Code Explanation: The variable count starts at 1. JavaScript checks the condition. If true, it prints the value. Then count++ increases the value. When count becomes 6, the condition becomes false.
12.3 do while
The do while loop is similar to a while loop.
The difference is that the code runs before the condition is checked.
This means it always runs at least one time.
It is useful when something must happen first.
After the first run, JavaScript checks the condition.
It is often used for menus, prompts, and repeated user actions.
Example: Run at least once
// Create a number variable.
let number = 1;
// Run this block first.
do {
// Print the current number.
console.log(number);
// Increase number by 1.
number++;
} while (number <= 3);
Code Explanation: The code inside do runs first. It prints the number and increases it. Then JavaScript checks the condition. If the number is still 3 or less, it repeats. When number becomes 4, it stops.
12.4 for...of
The for...of loop is used to loop through values.
It works very well with arrays and strings.
It gives the actual item directly.
You do not need to use index numbers.
This makes the code easier for beginners.
Use it when you want to read every value in a list.
Example: Loop through fruits
// Create an array.
let fruits = ["Apple", "Banana", "Orange"];
// Loop through each fruit.
for (let fruit of fruits) {
// Print current fruit.
console.log(fruit);
}
Output:Apple
Banana
Orange
Code Explanation: The array has three values. The loop takes one value at a time. First fruit is Apple. Then it becomes Banana. Then it becomes Orange. After the last value, the loop stops.
12.5 for...in
The for...in loop is mainly used with objects.
It loops through object property names.
Property names are also called keys.
You can use each key to get the matching value.
This is useful when object properties are unknown.
For arrays, for...of is usually better.
Example: Loop through object
// Create an object.
let student = {
name: "Ali",
age: 15,
city: "Toronto"
};
// Loop through object keys.
for (let key in student) {
// Print key and value.
console.log(key + ": " + student[key]);
}
Output:name: Ali
age: 15
city: Toronto
Code Explanation: The object has keys called name, age, and city. The loop reads one key at a time. student[key] gets the value. This lets JavaScript read object data dynamically.
12.6 break
The break statement stops a loop immediately.
When JavaScript reaches break, it exits the loop.
Remaining repetitions are skipped.
It is useful when the answer is already found.
Break can make loops faster.
It is used in searching, menus, games, and switch statements.
Example: Stop at 5
// Loop from 1 to 10.
for (let i = 1; i <= 10; i++) {
// Stop when i equals 5.
if (i === 5) {
break;
}
// Print numbers before 5.
console.log(i);
}
Code Explanation: The loop starts at 1. It prints 1, 2, 3, and 4. When i becomes 5, the condition is true. The break statement stops the loop completely.
12.7 continue
The continue statement skips the current loop cycle.
It does not stop the full loop.
JavaScript moves to the next repetition.
It is useful when you want to ignore some values.
Continue is common in filtering logic.
It keeps code clean by skipping unwanted cases.
Example: Skip number 3
// Loop from 1 to 5.
for (let i = 1; i <= 5; i++) {
// Skip number 3.
if (i === 3) {
continue;
}
// Print all numbers except 3.
console.log(i);
}
Code Explanation: The loop runs from 1 to 5. When i is 3, continue skips the print line. The loop still continues. That is why 3 does not appear in the output.
12.8 Nested Loops
A nested loop is a loop inside another loop.
The outer loop controls the main repetition.
The inner loop runs inside each outer loop cycle.
Nested loops are useful for grids and tables.
They are also used in game boards and patterns.
Use them carefully because they can run many times.
Example: Rows and columns
// Outer loop controls rows.
for (let row = 1; row <= 3; row++) {
// Inner loop controls columns.
for (let col = 1; col <= 2; col++) {
// Print row and column.
console.log("Row " + row + ", Column " + col);
}
}
Output:Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
Row 3, Column 1
Row 3, Column 2
Code Explanation: The outer loop runs three times. For each row, the inner loop runs two times. This creates two columns for every row. Nested loops multiply the total number of repetitions.
12.9 Iteration Patterns
Iteration patterns are common ways to use loops.
Examples include counting, summing, searching, and filtering.
These patterns appear in many real projects.
They help solve problems faster.
Simple loops can create reports and calculations.
Beginners should practice these patterns often.
Example: Add numbers 1 to 5
// Start total at 0.
let total = 0;
// Loop from 1 to 5.
for (let i = 1; i <= 5; i++) {
// Add current number to total.
total = total + i;
}
// Print final total.
console.log(total);
Code Explanation: The total starts at 0. The loop adds 1, then 2, then 3, then 4, then 5. The final calculation is 1 + 2 + 3 + 4 + 5. The result is 15.
12.10 Performance
Loop performance means writing loops that run efficiently.
Small loops are usually not a problem.
Large loops can slow down a page.
Avoid unnecessary work inside loops.
Use break when the result is found.
Good performance makes websites faster for users.
Example: Stop after finding a value
// Create a list of names.
let names = ["Ali", "Sara", "Noah", "Mina"];
// Store the name we want to find.
let searchName = "Noah";
// Loop through names.
for (let name of names) {
// Check if current name matches.
if (name === searchName) {
// Print result.
console.log("Found: " + name);
// Stop because answer is found.
break;
}
}
Code Explanation: The loop checks names one by one. It checks Ali, then Sara, then Noah. When Noah is found, it prints the result. The break stops the loop before checking Mina.
Chapter 12 Summary
for loops repeat code a known number of times.while loops repeat while a condition is true.do while loops always run at least once.for...of loops through values.for...in loops through object keys.break stops a loop completely.continue skips one loop cycle.- Nested loops place one loop inside another.
- Iteration patterns help with common coding tasks.
- Performance improves when loops avoid unnecessary work.
