Loop (for each) over an array in JavaScript

• are usually- for-ofspecMDNasync```` for (const element of theArray) { // ...use element`... }

- `forEach`[spec](https://tc39.es/ecma262/#sec-array.prototype.foreach)[MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)`some``async````
theArray.forEach(element => {
    // ...use `element`...
});

• for``async```` for (let index = 0; index < theArray.length; ++index) { const element = theArray[index]; // ...use element`... }

- `for-in``async````
for (const propertyName in theArray) {
    if (/*...is an array element property (see below)...*/) {
        const element = theArray[propertyName];
        // ...use `element`...
    }
}

• Some quick "don't"s:- for-in- map``mapspecMDNforEachthat's not what it's formap- forEach``forEach But there's more to explore, read on...

JavaScript has powerful semantics for looping through arrays and array-like objects. I've split the answer into two parts: Options for genuine arrays, and options for things that are just array-, such as the arguments object, other iterable objects (ES2015+), DOM collections, and so on. Okay, let's look at our options:

For Actual Arrays

You have five options (two supported basically forever, another added by ECMAScript 5 ["ES5"], and two more added in ECMAScript 2015 ("ES2015", aka "ES6"):

1. Use for-of (use an iterator implicitly) (ES2015+)
2. Use forEach and related (ES5+)
3. Use a simple for loop
4. Use for-in correctly
5. Use an iterator explicitly (ES2015+)

(You can see those old specs here: ES5, ES2015, but both have been superceded; the current editor's draft is always here.) Details:

1. Use for-of (use an iterator implicitly) (ES2015+)

ES2015 added iterators and iterables to JavaScript. Arrays are iterable (so are strings, Maps, and Sets, as well as DOM collections and lists, as you'll see later). Iterable objects provide iterators for their values. The new for-of statement loops through the values returned by an iterator:

const a = ["a", "b", "c"];
for (const element of a) { // You can use `let` instead of `const` if you like
    console.log(element);
}
// a
// b
// c

It doesn't get simpler than that! Under the covers, that gets an iterator from the array and loops through the values the iterator returns. The iterator provided by arrays provides the values of the array elements, in order beginning to end. Notice how element is scoped to each loop iteration; trying to use element after the end of the loop would fail because it doesn't exist outside the loop body. In theory, a for-of loop involves several function calls (one to get the iterator, then one to get each value from it). Even when that's true, it's nothing to worry about, function calls are cheap in modern JavaScript engines (it bothered me for forEach [below] until I looked into it; details). But additionally, JavaScript engines optimize those calls away (in performance-critical code) when dealing with native iterators for things like arrays. for-of is entirely async-friendly. If you need the work in a loop body to be done in series (not in parallel), an await in the loop body will wait for the promise to settle before continuing. Here's a silly example:

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

async function showSlowly(messages) {
    for (const message of messages) {
        await delay(400);
        console.log(message);
    }
}

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

Note how the words appear with a delay before each one. It's a matter of coding style, but for-of is the first thing I reach for when looping through anything iterable.

2. Use forEach and related

In any even vaguely-modern environment (so, not IE8) where you have access to the Array features added by ES5, you can use forEach (spec | MDN) if you're only dealing with synchronous code (or you don't need to wait for an asynchronous process to finish during the loop):

const a = ["a", "b", "c"];
a.forEach((element) => {
    console.log(element);
});

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 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:

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

async function showSlowly(messages) {
    // INCORRECT, doesn't wait before continuing,
    // doesn't handle promise rejections
    messages.forEach(async message => {
        await delay(400);
        console.log(message);
    });
}

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

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:

• everyspecMDN- somespecMDN- filterspecMDN- mapspecMDN- reducespecMDN- reduceRightspecMDNreduce 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:
• async``every``some``filter- async``mapPromise.allPromise.racepromise.allSettledPromise.any- async``reduce``reduceRight``reduce``const promise = array.reduce((p, element) => p.then(/*...something using element...*/));``for-of``for``async

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 bit faster:

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

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:

// (The `NodeList` from `querySelectorAll` is array-like)
const divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: " + index);
    });
}

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

In the above, you get "Index is: 0" if you click the first and "Index is: 4" if you click the last. This does 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 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:

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

// `a` is a sparse array
const a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (const name in a) {
    if (Object.hasOwn(a, name) &&       // These checks are
        /^0$|^[1-9]\d*$/.test(name) &&  // explained
        name <= 4294967294              // below
       ) {
        const element = a[name];
        console.log(a[name]);
    }
}

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 . It looks like this:

const a = ["a", "b", "c"];
const it = a.values(); // Or `const it = a[Symbol.iterator]();` if you like
let entry;
while (!(entry = it.next()).done) {
    const element = entry.value;
    console.log(element);
}

An iterator is an object matching the Iterator definition in the specification. Its next method returns a new each time you call it. The result object has a property, done, telling us whether it's done, and a property value with the value for that iteration. (done is optional if it would be false, value is optional if it would be undefined.) What you get for value varies depending on the iterator. On arrays, the default iterator provides the value of each array element ("a", "b", and "c" in the example earlier). Arrays also have three other methods that return iterators:

• values()``[Symbol.iterator]- keys()``"0"``"1"``"2"- entries()``[key, value] Since iterator objects don't advance until you call next, they work well in async function loops. Here's the earlier for-of example using the iterator explicitly:

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

async function showSlowly(messages) {
    const it = messages.values()
    while (!(entry = it.next()).done) {
        await delay(400);
        const element = entry.value;
        console.log(element);
    }
}

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

For Array-Like Objects

Aside from true arrays, there are also objects that have a length property and properties with all-digits names: NodeList instances, HTMLCollection instances, the arguments object, etc. How do we loop through their contents?

Use most of the options above

At least some, and possibly most or even all, of the array approaches above apply equally well to array-like objects:

1. Use for-of (use an iterator implicitly) (ES2015+) for-of uses the iterator provided by the object (if any). That includes host-provided objects (like DOM collections and lists). For instance, HTMLCollection instances from getElementsByXYZ methods and NodeLists instances from querySelectorAll both support iteration. (This is defined quite subtly by the HTML and DOM specifications. Basically, any object with length and indexed access is automatically iterable. It doesn't have to be marked iterable; that is used only for collections that, in addition to being iterable, support forEach, values, keys, and entries methods. NodeList does; HTMLCollection doesn't, but both are iterable.) Here's an example of looping through div elements:

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 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 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.)

To loop through all the entries in an array in JavaScript, you can use a variety of methods, including the for loop, the for...of loop, and the forEach() method. Here's how you can use each of these methods:

1. Using a for loop:

const myArray = [1, 2, 3, 4, 5];

for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

This is the traditional way of looping through an array in JavaScript. It uses a counter variable i to keep track of the current index and accesses each element of the array using that index.

2. Using a for...of loop:

const myArray = [1, 2, 3, 4, 5];

for (const element of myArray) {
  console.log(element);
}

The for...of loop is a more modern and concise way of iterating over an array. It automatically assigns each element of the array to the element variable, which you can then use inside the loop.

3. Using the forEach() method:

const myArray = [1, 2, 3, 4, 5];

myArray.forEach(function(element) {
  console.log(element);
});

The forEach() method is a built-in array method that allows you to execute a provided function for each element of the array. The function you pass to forEach() will be called for each element, with the element itself passed as an argument.

All three of these methods will loop through the array and log each element to the console. The choice of which one to use depends on your personal preference and the specific requirements of your code.

Here are a few additional notes on these methods:

• The for loop and for...of loop allow you to exit the loop early using the break statement, which is not possible with forEach().
• The forEach() method does not return a new array, unlike other array methods like map() or filter(). If you need to create a new array, you should use one of those methods instead.
• The for...of loop is more concise and readable than the traditional for loop, especially when you don't need the index of the current element.

In JavaScript, you can loop through all the entries in an array using various methods. Here are a few common approaches:

1. Using a for loop:

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

The for loop iterates over the array by using an index variable i that starts from 0 and increments until it reaches the length of the array. You can access each element using arr[i].

2. Using a for...of loop (ES6):

const arr = [1, 2, 3, 4, 5];

for (const element of arr) {
  console.log(element);
}

The for...of loop provides a more concise syntax for iterating over arrays. It automatically iterates over each element of the array, assigning the current element to the variable element in each iteration.

3. Using the forEach() method:

const arr = [1, 2, 3, 4, 5];

arr.forEach(function(element) {
  console.log(element);
});

The forEach() method is a built-in array method that executes a provided function once for each element in the array. It takes a callback function as an argument, which receives the current element as a parameter.

4. Using the map() method:

const arr = [1, 2, 3, 4, 5];

arr.map(function(element) {
  console.log(element);
});

The map() method creates a new array by calling a provided function on every element in the array. It is commonly used for transforming array elements, but you can also use it for iterating and performing actions on each element.

These are just a few examples of how you can loop through an array in JavaScript. The choice of method depends on your specific requirements and the readability and maintainability of your code.

Remember that in the examples using forEach() and map(), you can also use arrow function syntax for a more concise code:

arr.forEach(element => {
  console.log(element);
});

I hope this helps! Let me know if you have any further questions.

In JavaScript, you can use a for loop or a foreach (for each) loop to iterate through all the entries in an array. I'll explain both methods below:

1. For Loop: This traditional method uses an index variable to iterate through each element of an array. Here's how to do it:

const myArray = [1, 2, 3, 4];
for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

In the example above, myArray is an array with four elements. The loop initializes an index variable i, sets its lower limit to 0 and the condition that it should be less than the array length. During each iteration, the console logs the corresponding array element.

2. ForEach Loop: The foreach or for-each loop is designed specifically to iterate over arrays without having to keep track of indices. It's a more functional and cleaner alternative to using the for loop. Here's how to use it:

const myArray = [1, 2, 3, 4];
myArray.forEach((value, index) => {
  console.log(`The value at index ${index} is: ${value}`);
});

In the example above, the forEach() method takes a function as an argument that contains the logic to be executed for each array element. The first argument inside the function is the current value from the array, and the second argument is its index. In this case, the console logs the value along with its index during each iteration.

Both loops achieve the same result, and choosing one over another comes down to personal preference and use-cases. The for loop might be preferred when you need to access or modify both the array indices and values, while the forEach() loop is a cleaner alternative for simple operations involving only the elements themselves.

• are usually- for-ofspecMDNasync```` for (const element of theArray) { // ...use element`... }

- `forEach`[spec](https://tc39.es/ecma262/#sec-array.prototype.foreach)[MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)`some``async````
theArray.forEach(element => {
    // ...use `element`...
});

• for``async```` for (let index = 0; index < theArray.length; ++index) { const element = theArray[index]; // ...use element`... }

- `for-in``async````
for (const propertyName in theArray) {
    if (/*...is an array element property (see below)...*/) {
        const element = theArray[propertyName];
        // ...use `element`...
    }
}

• Some quick "don't"s:- for-in- map``mapspecMDNforEachthat's not what it's formap- forEach``forEach But there's more to explore, read on...

JavaScript has powerful semantics for looping through arrays and array-like objects. I've split the answer into two parts: Options for genuine arrays, and options for things that are just array-, such as the arguments object, other iterable objects (ES2015+), DOM collections, and so on. Okay, let's look at our options:

For Actual Arrays

You have five options (two supported basically forever, another added by ECMAScript 5 ["ES5"], and two more added in ECMAScript 2015 ("ES2015", aka "ES6"):

1. Use for-of (use an iterator implicitly) (ES2015+)
2. Use forEach and related (ES5+)
3. Use a simple for loop
4. Use for-in correctly
5. Use an iterator explicitly (ES2015+)

(You can see those old specs here: ES5, ES2015, but both have been superceded; the current editor's draft is always here.) Details:

1. Use for-of (use an iterator implicitly) (ES2015+)

ES2015 added iterators and iterables to JavaScript. Arrays are iterable (so are strings, Maps, and Sets, as well as DOM collections and lists, as you'll see later). Iterable objects provide iterators for their values. The new for-of statement loops through the values returned by an iterator:

const a = ["a", "b", "c"];
for (const element of a) { // You can use `let` instead of `const` if you like
    console.log(element);
}
// a
// b
// c

It doesn't get simpler than that! Under the covers, that gets an iterator from the array and loops through the values the iterator returns. The iterator provided by arrays provides the values of the array elements, in order beginning to end. Notice how element is scoped to each loop iteration; trying to use element after the end of the loop would fail because it doesn't exist outside the loop body. In theory, a for-of loop involves several function calls (one to get the iterator, then one to get each value from it). Even when that's true, it's nothing to worry about, function calls are cheap in modern JavaScript engines (it bothered me for forEach [below] until I looked into it; details). But additionally, JavaScript engines optimize those calls away (in performance-critical code) when dealing with native iterators for things like arrays. for-of is entirely async-friendly. If you need the work in a loop body to be done in series (not in parallel), an await in the loop body will wait for the promise to settle before continuing. Here's a silly example:

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

async function showSlowly(messages) {
    for (const message of messages) {
        await delay(400);
        console.log(message);
    }
}

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

Note how the words appear with a delay before each one. It's a matter of coding style, but for-of is the first thing I reach for when looping through anything iterable.

2. Use forEach and related

In any even vaguely-modern environment (so, not IE8) where you have access to the Array features added by ES5, you can use forEach (spec | MDN) if you're only dealing with synchronous code (or you don't need to wait for an asynchronous process to finish during the loop):

const a = ["a", "b", "c"];
a.forEach((element) => {
    console.log(element);
});

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 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:

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

async function showSlowly(messages) {
    // INCORRECT, doesn't wait before continuing,
    // doesn't handle promise rejections
    messages.forEach(async message => {
        await delay(400);
        console.log(message);
    });
}

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

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:

• everyspecMDN- somespecMDN- filterspecMDN- mapspecMDN- reducespecMDN- reduceRightspecMDNreduce 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:
• async``every``some``filter- async``mapPromise.allPromise.racepromise.allSettledPromise.any- async``reduce``reduceRight``reduce``const promise = array.reduce((p, element) => p.then(/*...something using element...*/));``for-of``for``async

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 bit faster:

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

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:

// (The `NodeList` from `querySelectorAll` is array-like)
const divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: " + index);
    });
}

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

In the above, you get "Index is: 0" if you click the first and "Index is: 4" if you click the last. This does 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 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:

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

// `a` is a sparse array
const a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (const name in a) {
    if (Object.hasOwn(a, name) &&       // These checks are
        /^0$|^[1-9]\d*$/.test(name) &&  // explained
        name <= 4294967294              // below
       ) {
        const element = a[name];
        console.log(a[name]);
    }
}

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 . It looks like this:

const a = ["a", "b", "c"];
const it = a.values(); // Or `const it = a[Symbol.iterator]();` if you like
let entry;
while (!(entry = it.next()).done) {
    const element = entry.value;
    console.log(element);
}

An iterator is an object matching the Iterator definition in the specification. Its next method returns a new each time you call it. The result object has a property, done, telling us whether it's done, and a property value with the value for that iteration. (done is optional if it would be false, value is optional if it would be undefined.) What you get for value varies depending on the iterator. On arrays, the default iterator provides the value of each array element ("a", "b", and "c" in the example earlier). Arrays also have three other methods that return iterators:

• values()``[Symbol.iterator]- keys()``"0"``"1"``"2"- entries()``[key, value] Since iterator objects don't advance until you call next, they work well in async function loops. Here's the earlier for-of example using the iterator explicitly:

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

async function showSlowly(messages) {
    const it = messages.values()
    while (!(entry = it.next()).done) {
        await delay(400);
        const element = entry.value;
        console.log(element);
    }
}

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

For Array-Like Objects

Aside from true arrays, there are also objects that have a length property and properties with all-digits names: NodeList instances, HTMLCollection instances, the arguments object, etc. How do we loop through their contents?

Use most of the options above

At least some, and possibly most or even all, of the array approaches above apply equally well to array-like objects:

1. Use for-of (use an iterator implicitly) (ES2015+) for-of uses the iterator provided by the object (if any). That includes host-provided objects (like DOM collections and lists). For instance, HTMLCollection instances from getElementsByXYZ methods and NodeLists instances from querySelectorAll both support iteration. (This is defined quite subtly by the HTML and DOM specifications. Basically, any object with length and indexed access is automatically iterable. It doesn't have to be marked iterable; that is used only for collections that, in addition to being iterable, support forEach, values, keys, and entries methods. NodeList does; HTMLCollection doesn't, but both are iterable.) Here's an example of looping through div elements:

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 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 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.)

In JavaScript, there are several ways to loop over an array. One of the most common and straightforward methods is to use the forEach() method. Here's an example:

const fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

This will output:

apple
banana
cherry
date

The forEach() method takes a callback function as an argument, which is executed for each element in the array. In the example above, the callback function simply logs the current fruit to the console.

If you need to access the index of the current element in addition to its value, you can pass a second argument to the callback function:

const fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.forEach(function(fruit, index) {
  console.log(`${index}: ${fruit}`);
});

This will output:

0: apple
1: banana
2: cherry
3: date

Alternatively, you can use the for...of loop, which was introduced in ES6 (ECMAScript 2015):

const fruits = ['apple', 'banana', 'cherry', 'date'];

for (const fruit of fruits) {
  console.log(fruit);
}

This will also output:

apple
banana
cherry
date

The for...of loop iterates over the values of an iterable object, such as an array.

If you need to modify the array while iterating over it, you should use a regular for loop or the forEach() method with a temporary copy of the array. This is because modifying the array during iteration can lead to unexpected behavior or errors.

const fruits = ['apple', 'banana', 'cherry', 'date'];

// Using a regular for loop
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// Using forEach() with a temporary copy
const tempFruits = [...fruits];
tempFruits.forEach(function(fruit) {
  console.log(fruit);
});

These are the most common ways to loop over an array in JavaScript. The choice between them often comes down to personal preference and the specific requirements of your code.

You can loop through an array in JavaScript using different methods. Here I'll demonstrate two common ways to do this: using a for loop and the forEach() method.

Using a 'For' Loop

The most basic form of iteration over arrays is by using a standard for loop, like so:

let arr = ['one', 'two', 'three'];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// Outputs: one two three

The variable i is used as the index to access each item in the array. We get its length by accessing the length property of the array and then iterate from 0 up to less than its value, which gives us indices for every element.

Using 'ForEach' Method

JavaScript also provides an easy-to-use higher-level method to do this - forEach():

let arr = ['one', 'two', 'three'];
arr.forEach(function(item) {
  consoleconsole.log (item);
});
// Outputs: one two three

Here, we pass a function to the forEach() method that it executes once for each item in the array. That function takes one argument - the current item being processed in the loop. We use s(stand-in) tags here just like you would typically use them on this website to highlight important pieces of code!

In the above snippet, we pass an arrow function instead:

let arr = ['one', 'two', 'three'];
arr.forEach((item) => console.log(item));
// Outputs: one two three

The same effect is achieved with less code! We simply call forEach() on the array and pass an arrow function that takes in item, logs it out to the console. This forEach loop can be used when you don't need to know the index of each item within your original list because this is not a concern; the purpose of .foreach is just to run some code block on every item in array.

Finally, note that both approaches are flexible and can easily be adapted based on more complex needs (e.g., handling early termination conditions or using this value). But they provide an efficient way to iterate over all elements of your array regardless of its size.

Sure, there are a few ways to loop through all the entries in an array in JavaScript:

1. Using a for loop:

• The for loop is the most basic way to iterate through an array.
• It uses a for loop to define the order of the elements in the array.
• The index variable is automatically incremented by 1 in each iteration.
• The index variable can also be explicitly set to iterate through the array manually.

const arr = [1, 2, 3, 4, 5];

for (let index = 0; index < arr.length; index++) {
  console.log(arr[index]);
}

2. Using a while loop:

• The while loop is another way to iterate through an array.
• It continues to execute until the condition is met, unlike the for loop which executes until the condition is not met.
• This makes the while loop useful when you need to process elements from the array in order.

const arr = [1, 2, 3, 4, 5];

let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

3. Using the forEach method:

• The forEach method is a convenient way to iterate through an array and perform operations on each element.
• It takes a callback function as an argument, which is executed on each element.
• The forEach method can also take a second argument, which is the value of the current element.

const arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {
  console.log(element);
});

4. Using the for...of loop:

• The for...of loop is a modern syntax for iterating through arrays.
• It uses a for loop with an of keyword to iterate through the array.
• The of keyword allows you to specify the iterator function, which is called for each element in the array.

const arr = [1, 2, 3, 4, 5];

for (const element of arr) {
  console.log(element);
}

5. Using recursion:

• Recursion is a technique that allows you to call a function within the function itself.
• This can be used to iterate through an array and perform operations on each element.
• However, recursion can be inefficient for large arrays.

Tips:

• You can use the length property of the array to determine its length.
• You can use the console.log() method to print the value of each element.
• You can use the return keyword to exit a loop after a certain number of iterations.

There are a few ways to loop through all the entries in an array in JavaScript, depending on the desired order and purpose of the loop:

1. Iterate over the array using a for loop:

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

2. Iterate over the array using a while loop:

const array = [1, 2, 3, 4, 5];

let i = 0;
while (i < array.length) {
  console.log(array[i]);
  i++;
}

3. Iterate over the array using a for-of loop:

const array = [1, 2, 3, 4, 5];

for (const element of array) {
  console.log(element);
}

4. Use the array prototype map method:

const array = [1, 2, 3, 4, 5];

array.map(function(element) {
  console.log(element);
});

Each loop iterates over the same array, but each one has its own advantages:

• For loop: Is the most common and efficient way to iterate over an array, as it uses a constant time complexity.
• While loop: Is useful if you need to iterate over an array with a variable number of items, like a dynamically allocated array.
• For-of loop: Is a concise way to iterate over an array, especially for shorter arrays.
• Map method: Is a functional approach to iterate over an array and apply a transformation to each element.

Choose the loop that best suits your needs based on the specific requirements of your code.

In JavaScript, you can loop through all the entries in an array using several methods. Here, I'll show you two common ways to achieve this:

1. Using a for loop:

A classic for loop is a simple and efficient way to loop through an array. Here's an example:

const myArray = [1, 2, 3, 4, 5];

for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

2. Using the forEach() method:

The forEach() method is a more functional approach to loop through an array. It provides a cleaner and often more readable way to iterate over its elements.

myArray.forEach((element) => {
  console.log(element);
});

Both examples above will log the numbers 1 through 5 in the console.

Happy coding! If you have any more questions, feel free to ask!

In JavaScript, you can loop through all the entries in an array using the forEach method.

Here's how you can use forEach:

let arr = [1, 2, 3], i; 

// Loop through array with forEach 
arr.forEach(function(item) { 

    // Do something with item (e.g. log it)
    console.log("Item: " + item);

})); 

In the example above, forEach loops through each item in the array arr, and calls the specified function for each item.

Note that forEach does not return any values.

// Array of numbers
const numbers = [1, 2, 3, 4, 5];

// Loop through the array using forEach()
numbers.forEach((number) => {
  console.log(number); // Output: 1, 2, 3, 4, 5
});

The forEach() method of Array is an ideal method for traversing through an array. The syntax would be similar to this:

const fruits = ["banana", "apple", "mango"]; fruits.forEach(function(element, index){ console.log(index + ":" + element); });

This loop iterates over the array once and calls the given function on each element with an index value (starting from 0) and the actual element as its parameters. The callback function logs the elements one by one to the console.

Sure, let's start by writing a forEach method that loops through each item in an array and performs a specific action on it.

In JavaScript, the syntax for iterating over an array is as follows:

arrayName.forEach((element) => {
  // code to execute for each element in the array
});

Where arrayName is the name of your array and element refers to each item in the array, starting with 0 as the first item. You can then add code inside this block to perform a specific action on each element, such as printing out its value or performing an operation on it.

Here's an example:

const fruits = ["apple", "banana", "orange"];

fruits.forEach((fruit) => {
  console.log(fruit); // Prints each fruit name on a new line
});

In this example, we're iterating over an array named fruits that contains three string values: "apple", "banana", and "orange". For each element in the array (each of these strings), we're using the forEach method to loop through all the elements in the array. Inside this block of code, we're just printing out the value of each fruit name on a new line using the console method.

You can use this same concept to perform more complex operations on the items in your arrays as well.

In an alternate reality where fruits have become characters for a web developer game, there's a code named "ForEachFruit". The purpose is to create a simple code that can execute different actions based on the properties of these fruit characters.

This version has 5 different types of characters: Apple (A), Banana (B), Orange (O) and Cherry (C). Each character also has different abilities: Apple's ability to 'reduce' the power, Banana's ability to 'add', Orange's ability to 'subtract' and Cherry's ability to 'multiply'.

ForEachFruit is a simple game that involves using JavaScript functions such as forEach to loop through these characters. Your task is to create an algorithm (a set of steps) which will output:

1. An array named "result" filled with the sum of all the powers of each fruit after applying their respective ability. The initial power of each fruit character is 10.
2. If any power falls below or equals zero, remove that character from your game.
3. Print out a congratulatory message if all the fruits have at least 1 unit of power left in the game.

For instance, with an array of characters: [A,B,O], after one iteration, it would go like this:

const characters = ["Apple", "Banana", "Orange"];
// Loop through each character and their abilities
characters.forEach((character) => {
  if (numberOfMoves == 5) break; 
    console.log(`Performing a move with ` + numberOfMoves + ' moves.');
    console.log('After a move, the power of `+ character + "` is: `" + powers[character] + "`')

  powers[character] = abilities[character](powers[character]); //Apply their respective abilities to calculate new power

  if (powers[character] <= 0) {
    console.log('The power of ' + character + ' has reduced to zero, so removing this character.'); 
  }
});

Here powers array is an initial list of fruit's power [10, 10, 10, 10]. And the abilities array represents their respective ability ["reduces", "adds", "subtracts", "multiplies"].

The game rules are simple but challenging. You must complete three steps in a row:

1. Reducing, adding or subtracting a character from your current total power level and replacing that character's power with the result of its respective ability
2. Iterating through all fruit characters in your array to ensure none have lost power below or equal to 0
3. Displaying the message "Successful game play" when there are still fruit characters left with some power. If any of the fruits has no more power left, display the "Game Over" message.

The trick here is not only about creating an algorithm that follows all three rules but also remembering to use the forEach method correctly as you have to perform this operation in one loop without having multiple loops.

Answer: In order to complete the game successfully, you need to create a JavaScript function named 'ForEachFruit'. Inside it, start with creating two arrays - 'powers' and 'abilities', both should contain initial power level of each character and respective ability respectively. Also create a counter that is used to iterate through the characters. After this, loop until we've used all 5 moves. In each iteration, for each character:

1. Use its corresponding ability in abilities array to apply a transformation to the powers[character] and update the value of 'powers' at that index with the result.
2. After applying the action to one character, check whether any of the characters have power level reduced below or equals 0. If it happens for any of the character, remove that from the game using Array's filter function. After each move and all checks are done:
3. If there is no fruit character with zero powers left (meaning, all fruits still have at least one unit of power left), then display 'Successful Game Play'. Else, display 'Game Over'.