There are various approaches to loop through every element in an array, such as the for()
loop statement. JavaScript forEach() is one of the best ways which is used to perform a certain predefined function on each and every element of the array.
Now in this article, letβs understand firmly what forEach()
is about with some straightforward and clean examples. If you are studying Web Development you will come across arrays pretty early on. Once you come to that point, you will need to learn and understand the JavaScript forEach loop.

π₯ Learn JavaScript Programming β Beginner Friendly!
π¨ JavaScript Basics
π JavaScript alert()
πΒ Difference between Let and Const
πΈ JavaScript Arrays
πΒ JavaScript Array Filter
πΒ JavaScript Array Find
π JavaScript forEach (Arrays)
πΒ JavaScript Slice (Arrays)
πΒ JavaScript Spread Operator
πΈ JavaScript Strings
πΒ JavaScript Slice(Strings)
πΒ JavaScript Includes
π Web Development with JavaScript
πΒ Store User Input in a variable with JS
βοΈ JavaScript Specifics
πΒ Sorting Numbers in JS
π JavaScript Fetch API
π toLocaleDateString in JavaScript
Table of Contents
- What Is Javascript forEach()?
- Why do you need the forEach Loop in JavaScript?
- The forEach Loop in JavaScript explained
- Parameters of JavaScript forEach()
- for() loop vs. forEach() loop
- More Examples using the forEach() Loop
- Conclusion
What Is Javascript forEach()?
The for()
loop is a classic method of looping that iterates across an array for a predefined number of times.
However, in the case of forEach()
, the loop statement iterates and passes a callback function to every element of the given array.
For a more precise understanding, letβs look at the syntax below:
Syntax:
array.forEach(function(currentValue, index, arr), thisValue)
Code language: JavaScript (javascript)
Here,
- function() β refers to the callback function that will be performed on each and every element of the array.
- currentValue β refers to the value of the current array element.
- index β refers to the index value of the current element.
- arr β refers to the array of the current elements.
- thisValue β refers to the value passed to the function.
Return Value
The return value of forEach()
method is always undefined.
Why do you need the forEach Loop in JavaScript?
There are two ways to loop through an array. You can loop through an array with a simple for loop:
const testArray = ["Item 1", "Item 2", "Item 3"]
for(let i = 0; i < todos.length; i++) {
console.log(todos[i])
}
Code language: JavaScript (javascript)
Output:
Code language: Bash (bash)Item 1 Item 2 Item 3
This is quite a bit of code that we can shorten using a forEach loop:
const testArray = ["Item 1", "Item 2", "Item 3"];
testArray.forEach(function(item) {
console.log(item);
});
Code language: JavaScript (javascript)
Which will return the same as above.
As you can see, the code for the forEach loop is much easier to read than the code for the for loop. But letβs break it down.
The forEach Loop in JavaScript explained
through an Array and return certain values. forEach can only be used on Arrays, Sets, and Maps. The forEach loop takes a so-called Callback Function, in our case this function is called item. This Callback function runs once for every element in the array in ascending order. But you can call this Callback function whatever you want, let me demonstrate it.
const testArray = ["Item 1", "Item 2", "Item 3"];
testArray.forEach(function(hotDog) {
console.log(hotDog);
});
Code language: JavaScript (javascript)
We changed the item Callback function to hotDog, the output stays the same:
Code language: Bash (bash)Item 1 Item 2 Item 3
Parameters of JavaScript forEach()

1. Callback
The callback function and currentValue parameters are the required parameters of the forEach()
statement. The callback is the function that performs the required action on each array element during the iteration.
A callback function called myFunction is used in this example to show how the forEach()
method iterates over elements in an array and runs a specified function on each one.
let colleagues = ['Rita', 'Sarah', 'Adam'];
// using forEach
colleagues.forEach(myFunction);
function myFunction(item) {
console.log(item);
}
Code language: JavaScript (javascript)
Output:
Code language: Bash (bash)Rita Sarah Adam
2. thisArg
The thisArg
or thisValue
is a value to use as βthisβ when executing the callback.
Here, the thisArg parameter passes the βthisβ value whenever the callback function is invoked.
function Counter() {
this.sum = 0
this.count = 0
}
Counter.prototype.add = function(array) {
array.forEach(function countEntry(entry) {
this.sum += entry;
++this.count;
}, this);
};
const obj = new Counter();
obj.add([8, 7, 12]);
console.log(obj.count);
console.log(obj.sum);
Code language: JavaScript (javascript)
Output
Code language: Bash (bash)3 27
3. Index
The index
parameter refers to the index value of the elements present in the given array.
The following example uses the index argument to print both the index numbers and the values of the respective positions.
const students = ['Tia', 'Mary', 'Isabel', 'Jack', 'Abel'];
students.forEach((number, index) => {
console.log('Index: ' + index + ' Value: ' + number);
});
Code language: JavaScript (javascript)
Output
Code language: Bash (bash)Index: 0 Value: Tia Index: 1 Value: Mary Index: 2 Value: Isabel Index: 3 Value: Jack Index: 4 Value: Abel
4. Arr
The arr
or array
parameter refers to the current array on which the forEach() method will be performed on.
In the following example, we will be printing the whole array as the number of elements present in the array.
const students = ['Tia', 'Mary', 'Isabel', 'Jack', 'Abel'];
students.forEach((number, index, array) => {
console.log(array);
});
Code language: JavaScript (javascript)
Output
Code language: JSON / JSON with Comments (json)[ 'Tia', 'Mary', 'Isabel', 'Jack', 'Abel' ] [ 'Tia', 'Mary', 'Isabel', 'Jack', 'Abel' ] [ 'Tia', 'Mary', 'Isabel', 'Jack', 'Abel' ] [ 'Tia', 'Mary', 'Isabel', 'Jack', 'Abel' ] [ 'Tia', 'Mary', 'Isabel', 'Jack', 'Abel' ]
for() loop vs. forEach() loop
Though for()
and forEach()
are quite similar as they are used to execute a set of statements multiple times, their functionalities differ.
for() loop is:
- One of the most prevalent iteration methods allows code to be executed several times.
- Faster when it comes to executing statements.
- Harder to read and write.
- General-purpose loop.
forEach() loop is:
- One of the newest loop statements that iterate the elements belonging to an array.
- Quite slower in terms of traversing and executing statements.
- Easier to read and write compared to
for()
loop. - Used only in arrays
More Examples using the forEach() Loop
1. Using forEach() Loop to Update Array Elements
We already know that the forEach()
loop is used to iterate over an array and perform specific functions on them. With that concept in mind, we will be using it to update the content of the array in the following example.
let students = ['Amara', 'Lydia', 'Phil'];
// using forEach
students.forEach(myFunction);
function myFunction(item, index, arr) {
// adding strings to the array elements
arr[index] = 'Hello ' + item;
}
console.log(students);
Code language: JavaScript (javascript)
Output
[ 'Hello Amara', 'Hello Lydia', 'Hello Phil' ]
Code language: Bash (bash)
2. Using forEach() Loop to Copy a Given Array
The forEach()
loop is used to construct a new array from the elements of another array in this example. The twist is that we wonβt make an exact clone of the previous array; instead, weβll use forEach()
to execute operations on the other array elements before pushing it to the new copy.
function func() {
// Original array
const items = [38, 27, 12];
const copy = [];
items.forEach(function (item) {
copy.push(item + item+2);
});
console.log(copy);
}
func();
Code language: JavaScript (javascript)
Output
Code language: Bash (bash)[ 78, 56, 26 ]
Conclusion
Weβve gone over detailed explanations of the JavaScript forEach() loop as well as multiple comprehensive coding examples in this article. With the knowledge learned today, try out the given examples to get a grip on this new concept.
There are, of course, many more things you can do with forEach, but this should cover the basics and give you a solid foundation on the JavaScript forEach method. I highly recommend checking out MDN and play around with the forEach loop in JavaScript to get a better understanding of it.