Home 〉 Javascript Tutorials 〉 JavaScript Loops: Mastering for, while, do...while, for...in, for...of, and forEach
JavaScript Loops: Mastering for, while, do...while, for...in, for...of, and forEach !
JavaScript Loops: Mastering for, while, do...while, for...in, for...of, and forEach !
Summary
Are you struggling to understand how loops work in JavaScript? Loops are fundamental in programming, allowing you to execute a block of code multiple times efficiently. This tutorial covers various types of loops in JavaScript, including for, while, do...while, for...in, for...of, and forEach. Each loop type is explained with syntax and practical examples to help you grasp their usage. By the end of this guide, you'll be able to choose the appropriate loop for different scenarios in your code. Let's dive into the world of JavaScript loops and enhance your programming skills.
Introduction to JavaScript Loops
Loops in JavaScript are used to perform repeated tasks based on a condition. They are essential for tasks like iterating over arrays, performing operations multiple times, and automating repetitive processes. Understanding different loop types helps in writing efficient and clean code.
JavaScript Loop Types
1. for Loop
The for loop is used when the number of iterations is known. It consists of three parts: initialization, condition, and increment/decrement.
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<p id="js-loop"></p>
<script>
for (let i = 0; i < 5; i++) {
document.getElementById('js-loop').innerHTML += i + '<br>';
}
</script>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This loop will print numbers from 0 to 4.
2. while Loop
The while loop executes a block of code as long as the specified condition is true.
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<p id="js-loop1"></p>
<script>
var i = 0;
while (i < 5) {
document.getElementById('js-loop1').innerHTML += i + '<br>';
i++;
}
</script>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This loop also prints numbers from 0 to 4.
3. 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.
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<p id="js-loop2"></p>
<script>
var i = 0;
do {
document.getElementById('js-loop2').innerHTML += i + '<br>';
i++;
} while (i < 5);
</script>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This loop ensures the code runs at least once, printing numbers from 0 to 4.
4. for...in Loop
The for...in loop is used to iterate over the enumerable properties of an object.
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<p id="js-loop3"></p>
<script>
var person = {fname:"John", lname:"Doe", age:25};
for (let key in person) {
document.getElementById('js-loop3').innerHTML += key + ": " + person[key] + '<br>';
}
</script>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This loop will print each property and its value in the person object.
5. for...of Loop
The for...of loop is used to iterate over iterable objects like arrays, strings, etc.
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<p id="js-loop4"></p>
<script>
var numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {
document.getElementById('js-loop4').innerHTML += num + '<br>';
}
</script>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This loop will print each number in the numbers array.
6. forEach Loop
The forEach method executes a provided function once for each array element.
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<p id="js-loop5"></p>
<script>
var fruits = ["apple", "banana", "cherry"];
fruits.forEach(function(item, index) {
document.getElementById('js-loop5').innerHTML += index + ": " + item + '<br>';
});
</script>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This will print each fruit with its index.
Choosing the Right Loop
- Use for loops when the number of iterations is known.
- Use while loops when the number of iterations is unknown and depends on a condition.
- Use do...while loops when the code block needs to execute at least once.
- Use for...in loops to iterate over object properties.
- Use for...of loops to iterate over iterable objects like arrays.
- Use forEach for array-specific iterations.
Conclusion
Understanding different loops in JavaScript is crucial for writing efficient code. Each loop serves a specific purpose and choosing the right one depends on the task at hand. Practice using these loops to become proficient in controlling the flow of your programs.
Frequently Asked Questions (FAQs)
What is the difference between for and while loops?
A for loop is typically used when the number of iterations is known, whereas a while loop is used when the number of iterations is unknown and depends on a condition.
Can we use break and continue statements in loops?
Yes, break is used to exit a loop prematurely, and continue skips the current iteration and moves to the next one.
Is it possible to nest loops in JavaScript?
Yes, loops can be nested within each other to perform complex iterations, such as iterating over multi-dimensional arrays.
What is the use of forEach loop?
The forEach loop is used to execute a function on each element of an array, providing a concise way to iterate over arrays.
When should we use for...in vs for...of loops?
Use for...in to iterate over object properties and for...of to iterate over iterable objects like arrays and strings.