How can I iterate through an array with its index and value?
Quick answer
Use a for loop when you want to access each value through an index variable, or use forEach() with callback parameters (value, index). Both can print the same index-value pairs. In forEach(), the value comes first and the numeric index second; in a for loop, you use the index to read the value from the array. [S1]
The question, the details, the next step.
How can I print each array item together with its index in JavaScript?
Here are two ways to do that. Both examples use the same array and print the same pairs:
const items = ["apple", "pear", "plum"];
for (let index = 0; index < items.length; index++) {
const value = items[index];
console.log(index, value);
}const items = ["apple", "pear", "plum"];
items.forEach((value, index) => {
console.log(index, value);
});The output in either case is 0 apple, 1 pear, and 2 plum. In the first example, index is the loop’s position variable and items[index] retrieves the corresponding value. In the callback, forEach() supplies the current value first and its numeric index second. [S1]
I expected the callback’s first parameter to be the index. How do I keep the order straight?
For forEach(), remember value first, index second. You choose the parameter names, but their positions in the callback arguments matter. For example, (fruit, position) receives the current array element in fruit and its numeric index in position. Naming parameters after what they represent can make the order easier to read. Reversing the names does not change the argument order: the first parameter still receives the value, and the second still receives the index. [S1]
Which version should I choose if I only need to visit and print everything?
Either is suitable for a straightforward visit. Choose forEach() if a callback reads naturally for this task; choose the index-based for loop if you prefer to see the index advance and use it directly to access the array. Both examples perform iteration rather than building a changed array.
One difference to keep in mind: forEach() discards the callback’s return value, so returning a value from that callback does not collect results into a new array. It also cannot be stopped early with break. If you need to stop after a particular item, use a different loop structure rather than expecting forEach() to break. [S1]
What should I check if some indexes seem to be skipped?
Check whether the array has an actual value at each position. forEach() calls its callback for populated indexes, in ascending order; it does not call it for sparse-array holes. [S1] For example, an array with a missing slot may not produce a callback for that position.
For the ordinary three-item array above, you should see indexes 0, 1, and 2. If your output differs, compare the array’s contents and the exact loop or callback you are running. These examples show iteration only; they do not fill missing positions or transform the array.
A practical checklist
Use
for (let index = 0; index < items.length; index++)when you want an explicit index variable.Use
items[index]in an index-based loop to read the value at that position.For
forEach(), write callback parameters in the order(value, index).Log both values together, such as
console.log(index, value), to check the pairs.If a
forEach()callback appears to skip a position, check whether that array index is a sparse hole.
A few more useful answers
Can I name the `forEach()` callback parameters `index` and `value`?
You can choose those names, but the first parameter still receives the value and the second receives the index. To avoid confusion, use names in the order (value, index).
Does returning a value from `forEach()` create a new array?
No. forEach() discards the callback’s return value and returns undefined; it is intended for iteration, not collecting transformed results. [S1]
Can I stop a `forEach()` loop with `break`?
No. The reference notes that forEach() cannot be exited early with break. [S1]
Sources
References used for this guide.
- [S1] Array.prototype.forEach() — JavaScript reference learn.microsoft.com · Checked