Blog / Javascript

How to get the index in a forEach loop in JavaScript

How to get the index in a forEach loop in JavaScript

In this post find out about how to get the index in a forEach loop in JavaScript along with examples, arrow functions and more.

Will MaygerWill Mayger
August 27, 2021
Article

In this post we will be covering how to get the index in a forEach loop in JavaScript with as little technical jargon as possible so you will have everything you need right here without having to look any further!

In JavaScript we now have many ways to be able to loop/iterate through an array of items, such as for loops, while loops, for of loops, forEach, map and so on.

But, some of these methods make it a little harder to find the index when compared to a standard for loop.

This post will cover how to get the JavaScript forEach index whenever you use it.

Let’s get started.

How to get the index in a forEach loop in JavaScript

When you use the Array.prototype.forEach method you need to pass in a callback, your callback should then accept a set of arguments so you can deal with each array item however you need. The second argument passed into the callback you provide to the forEach method will be the current index the forEach loop is at, which is how you can get the index in a forEach loop.

The first argument of an Array.prototype.forEach loop will be the actual array item, the second argument will be the index, and the third argument will be the full array.

So to answer the question of how to get the index in a forEach loop in JavaScript, it is simply a case of accepting that second index argument in the callback function that gets passed into the forEach loop.

To visualize this let’s look at a JavaScript forEach index example:

const myArray = ["a", "b", "c", "d"]
myArray.forEach((arrayItem, index, fullArray) => {
  console.log("The current array item is: ", arrayItem), "a", "b", "c", "d"
  console.log("The current index is: ", index) // 0, 1, 2, 3
  console.log("The full array is: ", fullArray) // ["a", "b", "c", "d"]
})
javascript foreach index example

As you can see from this example of how to get the index in a forEach loop in JavaScript, we need to provide a callback function that accepts the index argument and then we can use it however we need.

The callback I have used for the forEach in this example is a simple arrow function which works really well with forEach loops because it means we don’t have to create a named function to pass in.

Using an arrow function in the forEach loop will save us time and save space in the code.

Breaking a forEach loop in JavaScript

If you need to break or stop a forEach loop, then it is probably the wrong method to be using because there is no way to stop it.

Instead a for loop might be better suited in comparison to a forEach loop, or if you need to use a method then you could use Array.prototype.some which will let you break out of the loop by returning true in your callback method.

Summary

There we have how to get the index in a forEach loop in JavaScript, if you want more like this be sure to check out some of my other posts!

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Become an expert in ReactJS, TypeScript, and JavaScript.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.

Good things are coming, don't miss out!

Good things are coming, don't miss out!

Follow me on Twitter to stay up to date and learn frontend, React, JavaScript, and TypeScript tips and tricks!

Are you a novice, intermediate or expert react engineer?

Find out here by taking my fun, interactive, quick quiz which takes approximately 1 - 3 minutes. How well will you will do?

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app