JavaScript ForEach Array : Using the ForEach Method to Navigate through Arrays

JavaScript is currently one of the most popular programming language in the world. It’s used on millions of websites and, though it was introduced fairly recently, it has already become indispensable – a modern-day website is incomplete without it. JavaScript makes your webpage interactive. It lets a client’s browser send and receive data with a web server without interrupting the client’s view. In other words, JavaScript lets you make changes to a web page without having to continuously refresh it. This saves a lot of time for the client and reduces the data usage for you as well as the client.

JavaScript is mainly used to create interactive forms, polls and quizzes. Most social networking websites as well as email services use JavaScript to provide instant notifications. JavaScript is a versatile and powerful language, so there are many things you can do with it. It is often mistakenly thought to be a part of Java, but the two languages are completely different. The coding is similar though (intentionally) and you’ll find it easier to learn JavaScript if you know Java already (or even C++). It’s really not a hard language to learn, overall. We have created several tutorials for beginners to help them learn JavaScript. You can take a look at them to get started with the basics, if you’re interested. You can also sign up for our Java introductory course to learn the language in a step-wise manner.

In this tutorial, we’re going to go over the basics of Arrays and how you can use the ForEach method to execute a function for each element present in your array.

Arrays in JavaScript

You use an array variable when you need several data elements in one place, or one container. For example, let’s say you had three different variables with three different data elements, as follows:

var color1 = “Blue”;
var color2 = “Green”;
var color3 = “Yellow”;

Instead of using three different variables to store the three data elements, you can just use a single array container, like this:

var colors = [“Blue”, Green”, “Yellow”];

The array variable “colors” now has three elements. Each element is assigned a separate index, which lets JavaScript store them separately and retrieve a unique element when you ask it to. The first element of the array is assigned the index 0, the second 1 and so on. In our array “colors”, the element Blue has an index of 0, while the element yellow has an index of 2.

The forEach () Method in JavaScript

Now that you’re familiar with the basics of an array in JavaScript, let’s take a look at the forEach () method. This method is a little complicated, and you need to be familiar with the way functions work in JavaScript to understand it. You can take a look at our JavaScript tutorials to learn more about the language. This JavaScript course shows you how to create and use your own arrays.

The forEach () method performs a task for every element present in your array. If you had three elements in your array, it would perform three tasks. The syntax for the forEach () method is as follows:

array_name.forEach (call_back_fn);

Here, the call_back_fn is the function that contains the code for the task you want to perform. The call_back_fn should be written in your program separately. You can include the call_back_fn in an object too, if you want. If you do that, the name of the object will have to be mentioned in the syntax of the forEach () method:

name_of_array.forEach(call_back_fn[ , thisObj];

Now, the call_back_fn will need to follow a specific format as well. The syntax for the call_back_fn is as follows:

function call_back_fn (value_of_element, index_of_element, name_of_array);

In a working program, you need to declare an array, then write the code for the call_back_fn and then finally use the forEach method. We’ll give you a simple example to demonstrate how the method works:

Example of the forEach () Method

In this program, we’re first going to create a callback function. Then, we’re going to specify the task the callback function is going to perform. Then, we create a simple array with three elements, as we want the task performed three times. And, finally, we are going to link both to the forEach () method:

//First, we create the callback function
function PrintThis (value, index, arr)
{
document.write (“The element name is “ + value);
document.write (“and it has the index “ + index);
document.write (“<br />”);
}

Creating a simple Array with three elements
var colors= [‘Blue’, ‘Green’, ‘Yellow’];
//Using the forEach element to traverse the Array and execute the callback function
examplearray.forEach (PrintThis);

Output:

The element name is Blue and the index of the element is 0
The element name is Green and the index of the element is 1
The element name is Yellow and the index of the element is 2

The program should be pretty self-explanatory. The callback function we created was named “PrintThis”. In this function, we wrote the code to print out the value of the element of the array JavaScript was currently traversing as well as its index and then we defined the forEach method. The forEach method traversed the array “colors” three times. The first time, it printed out the element “Blue” with the index of 0. The second time, it printed out the element Green and the index as 1. And, finally, it printed out the element “Yellow” and the index of 2. You can learn how to write your own programs in JavaScript, with this course. 

This was a very basic example with a very basic function being called. Generally, the forEach method is used when complex tasks have been performed in an application or on a webpage (if an array is being used). The forEach method is very similar to the for each loops we see in other languages like C++ or Java – if you’re familiar with these languages, you should be familiar with the various applications of a for each loop. For more useful information about JavaScript, take a look at our tutorials. Once you’re ready to move on to the next level, you can take this advanced JavaScript course to learn more in depth techniques.