Iterating arrays & array-likes

Pick the right way to go through a list

An array is a list of items in order. Going through the items one by one is called iterating. You do it all the time, but not always for the same reason:

• Sometimes you need each item's position, its index.
• Sometimes you need to stop as soon as you find a problem.
• Sometimes you want to do one thing with every item, like print it.

JavaScript has a different loop for each of these jobs. This lesson shows you which one to pick. It also shows you values that look like arrays but are not real arrays, and how to turn them into real ones.

It builds on these earlier lessons: Loops: while & for, for…of & for…in, Default & rest parameters, and Symbols. The exact rules for how loops get their values come in a later lesson. Here you use the parts you need today.

Here is the plan for the lesson:

1. Do the same job with three different loops.
2. Use three small helpers that give you indexes, values, or both.
3. Turn array-like values into real arrays.
4. Borrow an array method for one call.
5. Look at a real NodeList on this page.

The job is small: add up the scores until a negative number appears, and skip any zero. The scores are [3, 0, 4, -2, 5]. The right answer is 7. That's 3 + 4. The 5 comes after -2, so it should never be added.

Two keywords control a loop from the inside:

• continue skips the rest of this turn and goes to the next item.
• break ends the whole loop.

forEach is an array method. You give it a function, and it calls that function once for each item. A function you hand to another function like this is called a callback. Inside a callback, return ends only that one call.

1const scores = [3, 0, 4, -2, 5];Run2let total = 0;3for (let index = 0; index < scores.length; index += 1) {4  const score = scores[index];5  if (score === 0) continue;6  if (score < 0) break;7  total += score;8}9console.log(total);

No loop is always the best. Each one gives you something different:

• for gives you a counter, which is the index. Use it when the index matters most, when you want to skip or go backward, or when you want full control.
• for...of gives you each value. Use it when you care about the values and may need break or continue.
• forEach calls your callback for each item. Use it when you want to do something with every item, such as printing it. Don't use it when you may need to stop early.

The table compares the loops. Read each row as: "if I use this loop, can it stop, does it give me the index, and what is it good for?" A hole, in the fourth column, is an empty slot in an array. You'll meet holes in the next section.

The last row is for...in. It is easy to mix up with for...of, so it is here as a warning. On an array, for...in gives you the property names as text, like "0" and "1". It also gives you any extra properties you added to the array. Use for...in for objects. For arrays, use one of the first three.

forEach has the same problem with work that finishes later. Code that finishes later is called async. An async function gives back a promise: an object that says "the result will be ready later". forEach doesn't wait for those promises. It finishes straight away and gives back undefined.

const orders = ["tea", "toast"];
orders.forEach(async (order) => {
  await Promise.resolve();
  console.log("done " + order);
});
console.log("forEach returned");

Line 6 prints forEach returned first. Only after that does each callback continue past await Promise.resolve() on line 3. Then line 4 prints done tea and done toast.

If the order matters, use for...of with await inside it. If the order doesn't matter, collect the promises in an array and wait for all of them together.

Changing the array while you loop over it is another trap. When you remove an item, every item after it moves one place to the left. But the for loop still moves its index one place to the right. So it can jump over an item.

const cart = ["tea", "milk", "milk", "bread"];
for (let index = 0; index < cart.length; index += 1) {
  if (cart[index] === "milk") cart.splice(index, 1);
}
console.log(cart.join(","));

splice(index, 1) removes one item at index. Line 3 removes the first milk at index 1. The second milk moves into index 1. Then the loop moves on to index 2, so it never checks the second milk. Line 5 prints tea,milk,bread.

If you want to remove items, the later map, filter & reduce lesson shows a clearer way: filter builds a new array and leaves the old one alone.

Arrays have three small helper methods:

• keys() gives the indexes.
• values() gives the items.
• entries() gives pairs: [index, value].

They don't give you an array. Each one gives you an iterator: an object that hands out one result at a time to a loop. To see all the results at once, copy them into an array. You can spread them with ... inside [ ], or use Array.from.

1const queue = ["Ada", "Ben", "Cy"];Run2console.log([...queue.keys()].join(","));3console.log([...queue.values()].join("|"));4for (const [index, name] of queue.entries()) {5  console.log(index + ":" + name);6}

You saw entries() in the for…of lesson. This pattern is worth keeping:

const names = ["Ada", "Ben"];
for (const [index, name] of names.entries()) {
  console.log(index, name);
}

Line 2 gets one pair at a time. The [index, name] part splits each pair into two variables. This is called destructuring. Line 3 prints 0 Ada, then 1 Ben. You don't have to write names[index], and you can still use break if you need it.

Now an unusual case. An array can have an empty slot, called a hole. In ["hat", , "coat"], the two commas with nothing between them leave index 1 empty. An array with holes is called a sparse array.

1const lockers = ["hat", , "coat"];Run2for (const item of lockers) {3  console.log(item);4}5lockers.forEach((item) => {6  console.log(item);7});

You won't see holes often, but they explain some strange output. for...of visits every position. At the hole it gets undefined. Most array methods that take a callback, like forEach, skip holes. Their callback never runs for that slot.

An array-like value has numbered slots and a length. It looks like an array, but it doesn't get array methods. For example, { 0: "a", 1: "b", length: 2 } is a plain object that is array-like. Array.isArray checks for a real array, and for this object it gives false.

1const row = { 0: "a", 1: "b", length: 2 };Run2console.log(Array.isArray(row));3try {4  row.map((letter) => letter.toUpperCase());5} catch (error) {6  console.log(error.name);7}8const real = Array.from(row);9console.log(real.map((letter) => letter.toUpperCase()).join(""));10console.log(Array.prototype.map.call(row, (letter) => letter + "!").join("|"));11console.log(Array.prototype.join.call("abc", "-"));

Array.from accepts two kinds of values:

• Array-like values, with numbered slots and a length.
• Iterable values: values that for...of can loop over.

A string is both. It has numbered characters and a length, and for...of works on it. A Set is iterable but not array-like. It has no numbered slots and no length.

Sometimes you need just one array method, one time. You don't need to keep a new array. Then you can borrow the method. All array methods live on Array.prototype, the shared object every array gets its methods from.

You borrow a method with .call(). It runs a function and lets you choose what this is inside it. So Array.prototype.map.call(row, fn) runs map with row as this. map then reads the slots of row. The later call, apply & bind lesson explains .call() in full.

const row = { 0: "a", 1: "b", length: 2 };
const excited = Array.prototype.map.call(row, (letter) => letter + "!");
console.log(excited.join("|"));

console.log(Array.prototype.join.call("abc", "-"));

Line 2 borrows map and adds ! to each letter. Line 3 prints a!|b!. Line 5 borrows join for the string "abc" and prints a-b-c.

Borrowing works, but copying first is usually easier to read: Array.from(row).map(fn). Here is how to choose:

• Borrow when you need one array method once, for one array-like value.
• Copy with Array.from when you will use several array methods or pass the array on.

Two array-like values show up often in real code:

• arguments, which holds the values passed into a regular function.
• A NodeList, which the browser gives back from methods such as querySelectorAll.

You met arguments in Default & rest parameters. When you write the function yourself, use a rest parameter instead. It gives you a real array straight away.

function list() {
  console.log(Array.isArray(arguments));
  console.log([...arguments].join("|"));
  console.log(Array.from(arguments).map((value) => value * 2).join(","));
}
list(2, 4, 6);

Line 2 prints false: arguments is not a real array, so it has no map. Line 3 spreads it into a new array with [...arguments], which works in today's browsers. Line 4 copies it with Array.from and then uses map. A rest parameter is simpler: function list(...values) { ... } gives you a real array called values.

A web page is made of parts, such as headings, buttons, and sections. The browser lets your code reach these parts through the DOM, short for Document Object Model. A later lesson, Walking & searching the DOM, covers it in full. For now, one fact matters: querySelectorAll gives back a NodeList, not an array.

const sections = document.querySelectorAll("section");
console.log(sections.length);
console.log(typeof sections.forEach);
console.log(typeof sections.map);
const headings = Array.from(sections, (section) => section.id);
console.log(headings.join(", "));

1const sections = document.querySelectorAll("section");2console.log(sections.length);3console.log(typeof sections.forEach);4console.log(typeof sections.map);5const headings = Array.from(sections, (section) => section.id);6console.log(headings.join(", "));

In most browsers today, a NodeList has forEach but not map. That's why real code often copies it first: Array.from(document.querySelectorAll("button")). After that, you can use map, filter, or sort.

Where you will use this

You pick a loop every time you work with a list of data in an app. Some common cases:

• Checking form fields until the first error: use for...of, because it can stop with break.
• Showing which field has the error: use entries(), so you have the index as well as the value.
• Working with a list the browser gives you: use Array.from to get a real array.

const fields = ["name", "email", "password"];
const values = ["Ada", "", "secret"];

for (const [index, value] of values.entries()) {
  if (value === "") {
    console.log(fields[index] + " is required");
    break;
  }
}

Line 4 goes through the values with their indexes. Line 5 checks for an empty value. The email is empty, so line 6 uses its index to print email is required. Line 7 stops the loop, so you see only the first error.

Common mistakes

• "return stops forEach." It ends only the current callback call. forEach still calls the callback for the rest of the items.
• "Array-like means array." Array-like only means numbered slots and a length. Array.isArray can still give false.
• "A NodeList has every array method because it has forEach." Most browsers give it forEach. Methods such as map, filter, and reduce are only on real arrays.
• "for...in is the index loop for arrays." It loops over property names. It gives them as text, and it also shows extra properties you added.
• "A hole is the same as an undefined value." for...of visits a hole and gets undefined. forEach skips it.
• "Borrowing is always better than copying." Borrowing is short but harder to read. Array.from is often clearer, especially before you use several array methods.

Key takeaways

• Use for when you need control over the index.
• Use for...of to go through values in a way that is easy to read. It can still break or continue.
• Use forEach to do something with every item. It can't stop early, and it doesn't build a new array.
• keys(), values(), and entries() give iterators. Spread them or use Array.from to see all the results.
• Array-like values have numbered slots and a length. Copy them with Array.from when you want array methods.

Iterating means picking the right way to visit each item. For an array-like value, either copy it into a real array or borrow one method.

Up next: Destructuring arrays & objects.