JavaScript ForEach : How to Traverse Through an Array

JavaScript is the language that allows web pages to be interactive. Though it is a comparatively new technology, it is found today on millions of web pages and servers. The use of JavaScript makes it possible to update web pages without the need to refresh them. JavaScript also reduces the load on a server. If you’re new to programming, you might think that learning Java is an essential prerequisite to learning JavaScript, that’s not the case. While it’s true that the languages have similar names and similar syntax (intentionally), they are two different languages entirely. You can run each language independently of the other. In fact, you don’t even need to be intimately familiar with JavaScript to develop web apps with it or use it on your website. As long as you have some basic knowledge of the language, you can use pre-written plugins that are widely available on the internet to get the job done. We can help you learn the basics of the language – you can take this course to get started with JavaScript or go through our tutorials to get started.

In this tutorial, we’re going to take a look at the ForEach method in JavaScript. While we have written this tutorial for beginners, you do need to have a little knowledge of JavaScript to understand it.

The forEach Method in JavaScript

If you’ve studied languages like C++ or Java before, the forEach method or the for each loop should be familiar to you. For each loops are generally used to perform a certain task for every item present in a collection. The forEach method (or loop) in JavaScript is no different.

The forEach method is used to perform a task once for every element present in an array. The syntax of the method is as follows:

name_of_array.forEach(call_back_fn[ , thisObj];

The name_of_array parameter is the name of the array object the forEach method will traverse. You have to specify a valid array for the forEach method to work. The call_back_fn parameter will refer to a prewritten function which gets executed, which we will explain later. The call_back_fn is also a required parameter. The final parameter is the thisObj parameter. This is an optional parameter. If the call_back_fn has been defined inside an object, the this parameter is used to refer to the name of the object. If the this keyword is omitted, an undefined value is used.

The call_back_fn Parameter (a Callback Function)

The call_back_fn has to be written in the program before it can be called (or, in other words, executed). The forEach method will execute the call_back_fn once for every object present in the array. It will have the following syntax:

function call_back_fn (value_of_element, index_of_element, name_of_array);

The value_of_element parameter is used to refer to the value of an element in the array. Similarly, the index_of_element will point to the index of the element in the array. And finally, the name_of_array refers to the array object that contains the element(s).

Every element in array has a unique index value. The first element in an array has an index of 0, the second element an index of 1 and so on. The forEach method will traverse the array and find elements based on their index value. This is done in the ascending order – that is, the element with an index of 0 will be traversed first.

The call_back_fn can also be defined within an object. In this case, the thisObj parameter will have to be specified for the forEach method to work. You can learn more about callback functions in JavaScript with this course.

The forEach method may seem to be complicated at first, but you’ll understand it better with the help of an example. You do need to be familiar with the basics of programming like arrays, however, to get a good grasp on how it works. To learn more about arrays, take a look at our tutorials about JavaScript array functions. You can also take this course to see how arrays are used in real JavaScript programs.

Example of the forEach Method

Let’s write a simple program to create a callback function and then use the forEach method to traverse it and print out a result:

//The callback function (call_back_fn parameter)
function PrintThis (value, index, arr)
{
document.write (“The value of the element is “ + value);
document.write (“and the index of the element is “ + index);
document.write (“<br />”);
}
//Forming an Array (name_of_array parameter)
var examplearray = [‘x’, ‘y’, ‘z’];
//Using the forEach method
examplearray.forEach (PrintThis);

Output:

The value of the element is x and the index of the element is 0<
The value of the element is y and the index of the element is 1
The value of the element is z and the index of the element is 2

The program is fairly basic and easy to understand. First, we created a callback function that we would call later with the forEach method. In the callback function, we wrote code to print the value of the element of the array as well as the index of the array. After that, we created an array with three elements: x, y and z. Finally, we used the forEach method to call the callback function and linked it to the array with the three elements.

Because there were three elements in the array “examplearray”, the callback function was called three times. The first time, the first element of the array (which was “x”) was taken and its value and index printed. The second time the forEach method traversed the array, the second element was taken and its value and index printed. The forEach method stopped executing functions when it ran out of elements. If we had specified two elements in the array, it would have been executed just twice.

We recommend that you write your own function and call it with the forEach method. You can try putting it in an object and then pointing to the object with the “this” keyword. To learn about other loop structures in JavaScript, take a look at our tutorials or sign up for our advanced JavaScript course.