JavaScript Loops
JavaScript for Loop
The JavaScript
forloop is used to run the same block of code again and again.
It is useful when you want to repeat a task a specific number of times.
Example
Example
javascript
for (let i = 1; i <= 5; i++) {
console.log(i);
}In this example, the loop runs from 1 to 5.
What is a for Loop?
A for loop repeats a block of code while a condition is true.
It is commonly used when you already know how many times you want to run the code.
Syntax
Syntax
javascript
for (initialization; condition; update) {
// code to repeat
}A for loop has three main parts:
| Part | Meaning |
|---|---|
| Initialization | Starts the loop variable |
| Condition | Checks whether the loop should continue |
| Update | Changes the loop variable after each run |
Simple for Loop Example
Simple for Loop Example
javascript
for (let i = 1; i <= 5; i++) {
console.log("Hello JavaScript");
}Here, the message runs five times.
The loop starts with i = 1.
It continues while i <= 5.
After each run, i++ increases the value of i by 1.
Understanding the Loop Parts
Example
Understanding the Loop Parts
javascript
for (let i = 1; i <= 3; i++) {
console.log(i);
}This loop has three parts:
Understanding the Loop Parts
javascript
let i = 1This creates a loop variable and starts it from 1.
Understanding the Loop Parts
javascript
i <= 3This condition checks whether the loop should continue.
Understanding the Loop Parts
javascript
i++This increases the value of i after each loop run.
Counting Numbers with for Loop
A for loop is often used for counting.
Example
Counting Numbers with for Loop
javascript
for (let number = 1; number <= 10; number++) {
console.log(number);
}This prints numbers from 1 to 10.
Counting Backward
You can also count backward using a for loop.
Example
Counting Backward
javascript
for (let i = 5; i >= 1; i--) {
console.log(i);
}Here, the loop starts from 5 and ends at 1.
The i-- decreases the value of i by 1 after each run.
for Loop with Arrays
A for loop is very useful for working with arrays.
Example
for Loop with Arrays
javascript
let fruits = ["Apple", "Banana", "Mango"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}Array indexes start from 0.
So, fruits[0] means "Apple".
The loop continues while i is less than fruits.length.
for Loop with Strings
You can also use a for loop to read characters from a string.
Example
for Loop with Strings
javascript
let name = "John";
for (let i = 0; i < name.length; i++) {
console.log(name[i]);
}This prints each character of the string one by one.
Using for Loop with Calculation
A for loop can be used to calculate totals.
Example
Using for Loop with Calculation
javascript
let total = 0;
for (let i = 1; i <= 5; i++) {
total = total + i;
}
console.log(total);This adds numbers from 1 to 5.
The final value of total is 15.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript for Loop</title>
</head>
<body>
<h1>JavaScript for Loop</h1>
<p id="result"></p>
<script>
let result = "";
for (let i = 1; i <= 5; i++) {
result += "Number: " + i + "<br>";
}
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try changing the loop condition.
Example
Try It Yourself
javascript
for (let i = 1; i <= 10; i++) {
result += "Number: " + i + "<br>";
}Also try counting backward from 10 to 1.
Important Points
- The
forloop is used to repeat code. - It is useful when you know how many times the code should run.
- A
forloop has initialization, condition, and update parts. - The loop continues while the condition is true.
- The
i++increases the value by1. - The
i--decreases the value by1. - A
forloop is commonly used with numbers, arrays, and strings.
Conclusion
The JavaScript for loop is used to repeat a block of code multiple times.
It is one of the most commonly used loops in JavaScript.
Once you understand the for loop, it becomes easier to work with repeated tasks, lists, arrays, and dynamic content.