Quickly Understand JavaScript .forEach() & jQuery .each() In 1 Minute

Your knowledge of JavaScript and jQuery is incomplete if you don't know how to loop with .forEach() and .each() methods. This tutorial helps you to quickly master JavaScript .forEach() & jQuery .each() in 1 minute time.

Do you remember this famous scene from the Movie Matrix? Well, this tutorial is similar to the same situation where Neo has to make a choice. But now instead of ‘Neo’, it is "you" who has to make the choice, between two method - .forEach() and jQuery .each().

There are two methods to deal with an array on client-side – JavaScript .forEach() and jQuery .each(). Here, I will teach you how to use both of these methods in different scenarios.

Definition of these 2 methods

a. JavaScript .forEach() Method

The .forEach() method of JavaScript executes a given function once for each element of the array.

For example -

var arr = ['a', 'b', 'c'];    
arr.forEach(function(element) {  
    console.log(element);  
}); 

The above JavaScript code will print – ‘a’, ‘b’, & ‘c’ in the console window.

b. jQuery .each() Method 

jQuery has it’s own method called jQuery Each method and it is used to loop over arrays, array of object and matched elements of the DOM. See the below code:

var arr = ['a', 'b', 'c'];  
$.each(arr , function (index, value){  
  console.log(arr);   
}); 

The above jQuery code will print – ‘a’, ‘b’, & ‘c’ in the console window.

Looping through DOM elements

a. JavaScript .forEach() Method

Suppose you want to extract all the anchor tags from the web page, and then loop through each of them. In that case, first, you have to get all the anchors using document.getElementsByTagName("a") and then convert it into an array. This is because of JavaScript .forEach() method loops only through an array. 

See the below code: 

var links = document.getElementsByTagName("a");    
var Arr = Array.from(links);    
Arr.forEach(someFunction);    
    
function someFunction(currentValue) {    
    console.log(currentValue);    
}

I used Array.from() method to convert to an array. 

b. jQuery .each() Method 

In case of .each() method, you simply loop through all the anchor tags, like shown in the below code, as jQuery Each method can loop through arrays, an array of objects, and matched elements of the DOM. So you don’t have to do the conversion to an array like JavaScript .forEach() method.

See the below code:

$("a").each(function (index, value) {   
  console.log($(this).attr("href"));   
});

Clearly you can see in this case the lines of codes are very less than compared to .forEach() method of JavaScript.

Which one you should choose? 

Case 1: DOM Manipulations

When working with DOM elements the jQuery Each method has a great advantage because it removes a lot of code lines. So prefer this method during DOM manipulations. 

Case 2: Website is using jQuery from before

If your website is already using jQuery then you should use jQuery Each method because this will bring code consistency in your project.

In all other cases use JavaScript .forEach() method. 

Conclusion

Both of these above methods are very good and they make the codes easy to understand. I would recommend every web developer to know both of these methods.

I have also written a tutorial on .forEach() method of JavaScript on C-Sharpcorner. You should check it too - 7 Ways To Avoid jQuery .each() Method With An Equivalent JavaScript .forEach() Method.

Thank you for reading.