Quickly Understand JavaScript's .forEach() vs. jQuery's .each()

Do you remember this famous scene from the 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 havs to make the choice, between two methods: .forEach()and jQuery's .each().

There are two functions to deal with an array on the client-side – JavaScript's .forEach() and jQuery's .each(). Here, I will teach you how to use both of these methods with some sample code.

JavaScript's .forEach() Method

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

For example:

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

The above JavaScript code will print the following in the console window:

a
b
c

jQuery's .each() Method

jQuery has its own method to loop though an array. This is called the jQuery Each Method, but is more commonly known as .each(). See the below code:

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

The above jQuery code will prin the following in the console window.

a, b, c

Which One Should You Choose?

Both of these above methods are very good and result in decreasing the lines of code as compared to the normal For Loop in JavaScript. They also make the code easy to understand.

If you are using jQuery, then you'll probably prefer the .each() method (for maintaining code consistency), otherwise, I'd suggest using .forEach(). But it is totally your own choice.