forEach accepts a callback function and, optionally, a value to use as this when calling that callback (not used above). The callback is called for each element in the array, in order, skipping non-existent elements in sparse arrays. Although I only used one parameter above, the callback is called with three arguments: The element for that iteration, the index of that element, and a reference to the array you're iterating over (in case your function doesn't already have it handy).

Like for-of, forEach has the advantage that you don't have to declare indexing and value variables in the containing scope; in this case, they're supplied as arguments to the iteration function, and so nicely scoped to just that iteration.

Unlike for-of, forEach has the disadvantage that it doesn't understand async functions and await. If you use an async function as the callback, forEach does not wait for that function's promise to settle before continuing. Here's the async example from for-of using forEach instead — notice how there's an initial delay, but then all the text appears right away instead of waiting:

forEach is the "loop through them all" function, but ES5 defined several other useful "work your way through the array and do things" functions, including:

• every (spec | MDN) - stops looping the first time the callback returns a falsy value
• some (spec | MDN) - stops looping the first time the callback returns a truthy value
• filter (spec | MDN) - creates a new array including elements where the callback returns a truthy value, omitting the ones where it doesn't
• map (spec | MDN) - creates a new array from the values returned by the callback
• reduce (spec | MDN) - builds up a value by repeatedly calling the callback, passing in previous values; see the spec for the details
• reduceRight (spec | MDN) - like reduce, but works in descending rather than ascending order

As with forEach, if you use an async function as your callback, none of those waits for the function's promise to settle. That means:

• Using an async function callback is never appropriate with every, some, and filter since they will treat the returned promise as though it were a truthy value; they don't wait for the promise to settle and then use the fulfillment value.
• Using an async function callback is often appropriate with map, if the goal is to turn an array of something into an array of promises, perhaps for passing to one of the promise combinator functions (Promise.all, Promise.race, promise.allSettled, or Promise.any).
• Using an async function callback is rarely appropriate with reduce or reduceRight, because (again) the callback will always return a promise. But there is an idiom of building a chain of promises from an array that uses reduce (const promise = array.reduce((p, element) => p.then(/*...something using `element`...*/));), but usually in those cases a for-of or for loop in an async function will be clearer and easier to debug.

3. Use a simple for loop

Sometimes the old ways are the best:

const a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    const element = a[index];
    console.log(element);
}

If the length of the array won't change during the loop, and it's in highly performance-sensitive code, a slightly more complicated version grabbing the length up front might be a tiny bit faster:

And/or counting backward:

const a = ["a", "b", "c"];
for (let index = a.length - 1; index >= 0; --index) {
    const element = a[index];
    console.log(element);
}

But with modern JavaScript engines, it's rare you need to eke out that last bit of juice.

Before ES2015, the loop variable had to exist in the containing scope, because var only has function-level scope, not block-level scope. But as you saw in the examples above, you can use let within the for to scope the variables to just the loop. And when you do that, the index variable is recreated for each loop iteration, meaning closures created in the loop body keep a reference to the index for that specific iteration, which solves the old "closures in loops" problem:

In the above, you get "Index is: 0" if you click the first and "Index is: 4" if you click the last. This does not work if you use var instead of let (you'd always see "Index is: 5").

Like for-of, for loops work well in async functions. Here's the earlier example using a for loop:

function delay(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms);
    });
}

async function showSlowly(messages) {
    for (let i = 0; i < messages.length; ++i) {
        const message = messages[i];
        await delay(400);
        console.log(message);
    }
}

showSlowly([
    "So", "long", "and", "thanks", "for", "all", "the", "fish!"
]);
// `.catch` omitted because we know it never rejects

4. Use for-in correctly

for-in isn't for looping through arrays, it's for looping through the names of an object's properties. It does often seem to work for looping through arrays as a by-product of the fact that arrays are objects, but it doesn't just loop through the array indexes, it loops through all enumerable properties of the object (including inherited ones). (It also used to be that the order wasn't specified; it is now [details in this other answer], but even though the order is specified now, the rules are complex, there are exceptions, and relying on the order is not best practice.)

The only real use cases for for-in on an array are:

• It's a sparse array with massive gaps in it, or
• You're using non-element properties on the array object and you want to include them in the loop

Looking only at that first example: You can use for-in to visit those sparse array elements if you use appropriate safeguards:

Note the three checks:

1. That the object has its own property by that name (not one it inherits from its prototype; this check is also often written as a.hasOwnProperty(name) but ES2022 adds Object.hasOwn which can be more reliable), and

2. That the name is all decimal digits (e.g., normal string form, not scientific notation), and

3. That the name's value when coerced to a number is <= 2^32 - 2 (which is 4,294,967,294). Where does that number come from? It's part of the definition of an array index in the specification. Other numbers (non-integers, negative numbers, numbers greater than 2^32 - 2) are not array indexes. The reason it's 2^32 - 2 is that that makes the greatest index value one lower than 2^32 - 1, which is the maximum value an array's length can have. (E.g., an array's length fits in a 32-bit unsigned integer.)

...although with that said, most code only does the hasOwnProperty check.

You wouldn't do that in inline code, of course. You'd write a utility function. Perhaps:

// Utility function for antiquated environments without `forEach`
const hasOwn = Object.prototype.hasOwnProperty.call.bind(Object.prototype.hasOwnProperty);
const rexNum = /^0$|^[1-9]\d*$/;
function sparseEach(array, callback, thisArg) {
    for (const name in array) {
        const index = +name;
        if (hasOwn(a, name) &&
            rexNum.test(name) &&
            index <= 4294967294
           ) {
            callback.call(thisArg, array[name], index, array);
        }
    }
}

const a = [];
a[5] = "five";
a[10] = "ten";
a[100000] = "one hundred thousand";
a.b = "bee";

sparseEach(a, (value, index) => {
    console.log("Value at " + index + " is " + value);
});
Like for, for-in works well in asynchronous functions if the work within it needs to be done in series.

function delay(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms);
    });
}

async function showSlowly(messages) {
    for (const name in messages) {
        if (messages.hasOwnProperty(name)) { // Almost always this is the only check people do
            const message = messages[name];
            await delay(400);
            console.log(message);
        }
    }
}

showSlowly([
    "So", "long", "and", "thanks", "for", "all", "the", "fish!"
]);
// `.catch` omitted because we know it never rejects

5. Use an iterator explicitly (ES2015+)

for-of uses an iterator implicitly, doing all the scut work for you. Sometimes, you might want to use an iterator explicitly. It looks like this:

const divs = document.querySelectorAll("div");
for (const div of divs) {
    div.textContent = Math.random();
}

<div>zero</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>

1. Use forEach and related (ES5+)

   The various functions on Array.prototype are "intentionally generic" and can be used on array-like objects via Function#call (spec | MDN) or Function#apply (spec | MDN). (If you have to deal with IE8 or earlier [ouch], see the "Caveat for host-provided objects" at the end of this answer, but it's not an issue with vaguely-modern browsers.)

   Suppose you wanted to use forEach on a Node's childNodes collection (which, being an HTMLCollection, doesn't have forEach natively). You'd do this:

   Array.prototype.forEach.call(node.childNodes, (child) => {
       // Do something with `child`
   });
   

   (Note, though, that you could just use for-of on node.childNodes.)

   If you're going to do that a lot, you might want to grab a copy of the function reference into a variable for reuse, e.g.:

   // (This is all presumably in a module or some scoping function)
   const forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
   
   // Then later...
   forEach(node.childNodes, (child) => {
       // Do something with `child`
   });
   

2. Use a simple for loop

   Perhaps obviously, a simple for loop works for array-like objects.

3. Use an iterator explicitly (ES2015+)

   See #1.

You may be able to get away with for-in (with safeguards), but with all of these more appropriate options, there's no reason to try.

Create a true array

Other times, you may want to convert an array-like object into a true array. Doing that is surprisingly easy:

1. Use Array.from

   Array.from (spec) | (MDN) (ES2015+, but easily polyfilled) creates an array from an array-like object, optionally passing the entries through a mapping function first. So:

   const divs = Array.from(document.querySelectorAll("div"));
   

   ...takes the NodeList from querySelectorAll and makes an array from it.

   The mapping function is handy if you were going to map the contents in some way. For instance, if you wanted to get an array of the tag names of the elements with a given class:

   // Typical use (with an arrow function):
   const divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
   
   // Traditional function (since `Array.from` can be polyfilled):
   var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
       return element.tagName;
   });
   

2. Use spread syntax (...)

   It's also possible to use ES2015's spread syntax. Like for-of, this uses the iterator provided by the object (see #1 in the previous section):

   const trueArray = [...iterableObject];
   

   So for instance, if we want to convert a NodeList into a true array, with spread syntax this becomes quite succinct:

   const divs = [...document.querySelectorAll("div")];
   

3. Use the slice method of arrays

   We can use the slice method of arrays, which like the other methods mentioned above is "intentionally generic" and so can be used with array-like objects, like this:

   const trueArray = Array.prototype.slice.call(arrayLikeObject);
   

   So for instance, if we want to convert a NodeList into a true array, we could do this:

   const divs = Array.prototype.slice.call(document.querySelectorAll("div"));
   

   (If you still have to handle IE8 [ouch], will fail; IE8 didn't let you use host-provided objects as this like that.)

Caveat for host-provided objects

If you use Array.prototype functions with host-provided array-like objects (for example, DOM collections and such provided by the browser rather than the JavaScript engine), obsolete browsers like IE8 didn't necessarily handle that way, so if you have to support them, be sure to test in your target environments. But it's not an issue with vaguely-modern browsers. (For non-browser environments, naturally it'll depend on the environment.)