Difference between forEach and for loop in JavaScript

JavascriptFront End TechnologyProgramming ScriptsWeb Development

If you have ever worked with arrays in JavaScript, you have probably used the for loop. It is the most commonly used looping construct in JavaScript. However, there is another way to loop through arrays, and that is with the forEach method.

The forEach Method in JavaScript

The array forEach() method is a method of the Array object. It allows you to execute a certain set of code once for each element in an array. It looks like this −

array.forEach(function(element, index, array) {

   // code to be executed
});

The forEach method has three parts −

  • The function that will be executed for each element. This function has three parameters: element, index, and array. The element is the current element being processed.

  • The index is the current index of the element being processed.

  • The array is the array that the forEach method was called on.

The forEach method can be used to achieve the same results as the for loop, but it has some benefits over the for loop.

  • The forEach method is easier to read and understand.

  • The forEach method does not require you to create a loop counter variable.

  • The forEach method is less likely to cause an infinite loop.

  • The forEach method can be used with arrow functions, which makes the code even more concise and easier to read.

Example

In the below example we display the array element using the forEach() method.

<!DOCTYPE html> <html> <head> <title>Example- forEach loop </title> </head> <body> <div id="result"></div> <script> let str = ""; const courses = ["JavaScript", "Java", "C++", "HTML", "Web Technology" ]; courses.forEach(function(element, index) { str += element + "<br>"; }); document.getElementById("result").innerHTML = str; </script> </body> </html>

The for Loop in JavaScript

The for loop is a JavaScript construct that allows you to repeat a certain set of code a fixed number of times or until a certain condition is met. It looks like this −

for (initialization; condition; increment) {

   // code to be executed
}

The for loop has three parts −

  • The initialization where you initialize the loop counter. This is executed only once.

  • The condition where you specify the condition that must be met for the loop to continue running. If the condition is not met, the loop will not run.

  • The increment where you increase the value of the loop counter

Example 

In the below example we display the array element using the for loop.

<!DOCTYPE html> <html> <head> <title>Example- for loop </title> </head> <body> <div id="result"></div> <script> const courses = ["JavaScript", "Java", "C++", "HTML", "Web Technology"]; let str = ""; for (var i = 0; i< courses.length; i++) { str += courses[i] + "<br>"; } document.getElementById("result").innerHTML = str; </script> </body> </html>

When to use for loop over forEach?

There are some situations where you should use a for loop over the forEach method.

  • If you need to break out of the loop, you can use the break keyword.

  • If you need to skip an iteration, you can use the continue keyword.

  • If you need to iterate over an object, you can use the for-in loop.

Difference between forEach and for Loop in JavaScript

The following table highlights the major differences between forEach and for loop in JavaScript −

Basis of comparison forEach for
Definition The array forEach method is a method of the Array object. It allows you to execute a certain set of code once for each element in an array The for loop is a JavaScript construct that allows you to repeat a certain set of code a fixed number of times or until a certain condition is met
Condition The forEach method does not have a condition, so it will always run for each element in the array, even if the array is empty. The for loop, on the other hand, will not run if the condition is not met.
Loop counter The forEach method does not require you to create a loop counter variable. The for loop requires you to create a loop counter variable.
Infinite loop The forEach method is less likely to cause an infinite loop. The for loop is more likely to cause an infinite loop.
Use of arrow function The forEach method can be used with arrow functions, which makes the code even more concise and easier to read The for loop can’t be used with arrow functions.

Conclusion

The forEach method is a great way to loop through arrays. It is easier to read and understand than the for loop, and it does not require you to create a loop counter variable. However, there are some situations where you should use a for loop over the forEach method.

raja
Updated on 10-Oct-2022 11:52:09

Advertisements