JavaScript forEach vs for loop to iterate through arrays

Purpose of forEach in JavaScript

The forEach method is generally used to loop through the array elements in JavaScript / jQuery and other programming languages.

You may use other loops like for loop to iterate through array elements by using length property of the array, however, for each makes it quite easier to iterate and perform some desired actions on array elements.

Note: As such jQuery is also JavaScript’s library, so if you use this method in the jQuery code, it works the same way.

I have used for loop in several examples in JavaScript array tutorial; in this guide, I will show you how you can use forEach method for iteration in arrays.

Syntax of using forEach method

This is how you can use the forEach method:

1	Array.forEach(function)

 

Where the array is the one you want to iterate through. You may specify a function that is called for each iteration where you may perform certain actions like doing the calculation, printing etc. of array elements.

As this function is called, this is invoked with three parameters. The first parameter represents the value of the current element, second represents the index of that element while the third is the array in use.

See the following examples to learn how you can use JS forEach with arrays.

A simple example to display numeric array elements by forEach

In this example, I have created an array with numeric elements. After that, the forEach method is used where a JS function is called. In the function, a JS command is used to display array elements in a div element. See example online:

See online demo and code

The following code is used:

You can see, a function, arrfunction, is called in the forEach method where array elements are displayed by using the array_element argument.

Same output by using for loop

By using the for loop with length property, this is how you may get the same output:

See online demo and code

This code is used to loop through array by using the for loop rather forEach:

JavaScript forEach example with a mixed array

Similarly, you can iterate through mixed arrays of JavaScript by using the forEach method. In this demo, an array with mixed elements; numbers and strings is created. After that, the forEach loop is used where I called a function that displays the array elements.

See it online:

See online demo and code

You can see, array elements are displayed in a div element as demo page loaded by using forEach JS method.

A more complex example of forEach with HTML dropdowns

In this example, I have created two HTML dropdowns. As you select a continent from the left dropdown, the second will be filled by a few countries in that continent.

For that, I have created three arrays of continents in a JS function. The function is called as you select a continent in the dropdown. In that function, the selected value is checked by using if..else statement. After that, the forEach method is used in each if statement along with sending a specific function parameter.

In each function, JS code is used to populate the other dropdown with related countries.

See the demo and code online by clicking the image or link below:

See online demo and code

Following is the complete code, with JS and markup of the above example:

A final word about forEach

The forEach method is an extension of ECMA-262 Standard. The preferred way to iterate elements is still a for loop rather using the forEach JavaScript method due to performance reason.