In this article, we are going to cover the JavaScript forEach() method. This method is used to iterate over an array of values by calling the custom function once for each element in the array.

 

Iterating over an array of values with JavaScript forEach loop

Before we begin we will first need to create an HTML skeleton and then define script tags within which we will write javascript code as shown below.

 

 

Define an array of fruits in between the script tags <script> </script> containing the following types of fruits: [ ‘apple’, ‘cherry’, ‘pineapple’]. To get started we will need to write the name of the array we have just created, place a dot notation before writing the forEach method with parenthesis in the end. Make sure that the name Each in the method starts with a capital letter. 

 

Learn JavaScript forEach method

 

In between the parentheses of the method, pass the name of the custom function that we are going to create. For this example, the name of the function is going to be “my_function”. Now, we will need to define this function using the “function” keyword and the name we have just assigned to it above. A function in Javascript contains parentheses where we will pass parameters and curly brackets where we can write some code.

 

 

In the function definition, we are going to list three parameters; an item which will be regressively apple, cherry and pineapple. We will then list index as the second parameter and because javascript is a zero-based index language, apple, cherry and pineapple will bear index zero, one and two respectively. The third parameter that we will list is the array itself since we are going to do an in-place modification of the array itself. As shown in the code above.

However, we are going to look at three examples. Each one is going to require a different set of parameters. In the first example, we will use the item parameter, both the item and index parameter in the second example and all the three parameters in the last example.

 

Python for loop

Example One

Using the code that we already have displayed above in this example, we are going to customize the function name to be “display” and remove both the index and array parameters. Both in the function definition and inside the forEach() method parentheses. In order to display the results of the display function, we’ll need to create a paragraph outside the script tags with an id = “for_each_example”.

In the curly braces, we are going to use document.getElementById(“for_each_example”), a common javascript method that enables us to obtain information from the element bearing the id within the parentheses. We are going to attach a common property  inner.HTML  that will allow us to pass values from the array after we have concatenated them. As shown  in the code below

 

 

Note that if we remove the plus sign we will only obtain “pineapple” as the output.  We have also added a “break” element in order to make the output a bit more cleaner as well as another <p></p> tag at the start of the body to make the HTML display a bit fancier. 

 

Example two

In this example, we are going to use both the item and index as parameters. Suppose we have an array with a long list of fruits and we need to determine the index of say “pineapple”.

We can determine this by concatenating both the items from the array and their respective indices in the same line. The out of this code displays an HTML page with apple, cherry and pineapple taking index zero, one and two respectively. If we add a new type of fruit as the fourth entry in the array it is going to assume index three. As illustrated in the code below.

 

Example Three

We are going to explore how to use the third parameter together with the first two to perform an in-place modification of an array. However, note that we will use the exact same syntax used in the previous examples except for the new array of four numbers: [56, 68, 3, 5] that will be named “numbers”. Since the new function name is “add_two ”, we should change it both in the function definition and in the numbers.forEach(add_two) method. Furthermore, we should include the new parameter “array” alongside “item” and “index”.

Inside the body of the function, we are going to perform an iteration such that  2 is added to each element every time it is returned. We intend to display the new array of numbers after the iteration, to achieve this we will use “document.GetElementById” together with its property innerHTML. This will output a new array of numbers with an increment of 2 as

Shown in the code below.

 

 

In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

Would you like to learn how to code, online? Come and try our first 25 lessons for free at the CodeBerry Programming School.

Learn to code and change your career!

100% ONLINE

IDEAL FOR BEGINNERS

SUPPORTIVE COMMUNITY

SELF-PACED LEARNING

Not sure if programming is for you? With CodeBerry you’ll like it.