Loops in JavaScript
Objective
In this tutorial, you’ll learn about loops in JavaScript. Loops allow you to execute a block of code multiple times, making it easier to perform repetitive tasks.
Step 1: What are Loops?
Loops are control structures that repeatedly execute a block of code as long as a specified condition is true. JavaScript provides several types of loops, including for, while, and do...while.
Step 2: The for Loop
The for loop is used to repeat a block of code a certain number of times.
Syntax:
for (initialization; condition; increment) {
// Block of code to be executed
}- Initialization: Typically used to initialize a counter variable.
- Condition: The loop continues as long as this condition is true.
- Increment: Increases or decreases the counter variable after each iteration.
Example:
for (let i = 0; i < 5; i++) {
console.log("Iteration: " + i);
}In this example, the loop runs 5 times, printing “Iteration: ” followed by the loop counter i each time.
Step 3: The while Loop
The while loop executes a block of code as long as the specified condition is true.
Syntax:
while (condition) {
// Block of code to be executed
}Example:
let j = 0;
while (j < 5) {
console.log("While Loop Iteration: " + j);
j++;
}In this example, the loop continues to run as long as j is less than 5, incrementing j each time.
Step 4: The do...while Loop
The do...while loop is similar to the while loop, but it executes the block of code at least once before checking the condition.
Syntax:
do {
// Block of code to be executed
} while (condition);Example:
let k = 0;
do {
console.log("Do While Loop Iteration: " + k);
k++;
} while (k < 5);In this example, the loop runs at least once and then checks the condition to determine if it should continue.
Step 5: Writing and Executing Code
JavaScript Code:
Create a file named loops.js and paste the following JavaScript code:
// Using a for loop to print numbers 0 to 4
for (let i = 0; i < 5; i++) {
console.log("For Loop Iteration: " + i);
}
// Using a while loop to print numbers 0 to 4
let j = 0;
while (j < 5) {
console.log("While Loop Iteration: " + j);
j++;
}
// Using a do...while loop to print numbers 0 to 4
let k = 0;
do {
console.log("Do While Loop Iteration: " + k);
k++;
} while (k < 5);
// Displaying results on the page
let result = "";
for (let i = 0; i < 5; i++) {
result += "For Loop Iteration: " + i + "<br>";
}
document.getElementById("for-loop").innerHTML = result;
result = "";
j = 0;
while (j < 5) {
result += "While Loop Iteration: " + j + "<br>";
j++;
}
document.getElementById("while-loop").innerHTML = result;
result = "";
k = 0;
do {
result += "Do While Loop Iteration: " + k + "<br>";
k++;
} while (k < 5);
document.getElementById("do-while-loop").innerHTML = result;HTML Code:
Create a file named loops.html and paste the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Loops</title>
</head>
<body>
<h1>Loops in JavaScript</h1>
<h2>For Loop</h2>
<p id="for-loop"></p>
<h2>While Loop</h2>
<p id="while-loop"></p>
<h2>Do While Loop</h2>
<p id="do-while-loop"></p>
<script src="loops.js"></script>
</body>
</html>Step 6: Save and Open in Browser
- Save both
loops.jsandloops.htmlfiles. - Open
loops.htmlin your browser. - You should see the results of the loops displayed on the webpage.
- Open the browser console (Right-click on the page, choose “Inspect”, then go to the “Console” tab) to see the output of
console.log().
Explanation of the Code:
- For Loop: Runs 5 times, printing the loop counter each time.
- While Loop: Continues running as long as
jis less than 5. - Do While Loop: Executes the block at least once and then checks the condition to continue.
Step 7: Experimenting
- Change Loop Conditions: Modify the conditions in the loops (e.g., change the number of iterations) and see how the output changes.
- Nested Loops: Try creating a loop inside another loop to see how nested loops work.
Step 8: Summary
- You learned about the different types of loops in JavaScript:
for,while, anddo...while. - You practiced using these loops to execute a block of code multiple times.
- You displayed the results of these loops on a webpage and in the console.
