Iterating arrays & array-likes

Choose the right way to walk a list

Arrays are ordered lists, but not every “walk through the list” job is the same. Sometimes you need the index. Sometimes you need to stop as soon as you find a problem. Sometimes you want to do one side effect for every item and never produce a new array. This lesson helps you choose the right tool and recognize things that look array-ish but are not real arrays.

The curriculum summary says it neatly: choose the right loop, and turn array-likes into real arrays. We will connect what you already know from Loops: while & for, for…of & for…in, Default & rest parameters, and Symbols. The formal iteration protocols come later; here we use the pieces you can apply today.

Keep that mental model in mind as we compare the same task with three loops, then use iterator helpers, convert array-likes, borrow array methods carefully, and inspect real browser NodeLists.

Our task is deliberately small: sum scores until a negative number appears, skipping zeroes. The data is [3, 0, 4, -2, 5]. A correct “until negative” version returns 7, because the 5 after -2 should never be counted.

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

The lesson is not that one loop is always better. It is that each loop makes a different promise:

• for gives you the counter. Use it when the index is the main story, you need to move in a custom pattern, or you need full control.
• for...of gives you values. Use it when you want clear value-by-value code and may still need break or continue.
• forEach calls a callback for each existing item. Use it for side effects you truly want to run for every item; do not use it when you need early exit.

Notice the fourth row: for...in is included because it is easy to confuse with for...of. On arrays it walks enumerable property keys as strings, including custom keys. Keep it for ordinary object properties; for arrays, choose one of the first three.

Arrays have three small iterator helpers. keys() produces indexes, values() produces values, and entries() produces pairs: [index, value]. They do not produce arrays immediately; they produce iterator objects. If you want to see all results at once, convert them with spread syntax or 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 already saw entries() with destructuring in the for…of lesson. The pattern is worth keeping:

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

That loop reads like a sentence: “for each index-and-name pair of the names entries.” You avoid manually writing names[index], and your loop still supports break if a later condition needs it.

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

Sparse arrays are uncommon in everyday UI code, but this edge case explains a lot of surprising output. for...of uses array iteration and visits the missing slot as undefined. Most array callback methods, including forEach, skip holes.

An array-like is an object with numbered slots and a length. It looks like a row of lockers, but it does not automatically have the array toolbelt. A plain object such as { 0: "a", 1: "b", length: 2 } is array-like; Array.isArray still says 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 works with array-likes and iterables. Strings are both: they have indexed characters and a length, and they also work with for...of. A Set is iterable but not array-like, because it has no numeric slots and no array-style length.

Sometimes you do not need to keep the converted array. You only need one array method to read the indexed slots. JavaScript lets you borrow a method from Array.prototype and run it with a different receiver: Array.prototype.map.call(row, fn). In one sentence, call invokes a function while choosing what this means inside it; the later call, apply & bind lesson goes deeper.

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", "-"));

Borrowing is useful in tiny adapters and older code, but conversion is usually clearer for learners and teams: Array.from(row).map(fn). Use borrowing when you specifically want “run this array method once on this array-like value.” Use conversion when you will keep using array methods or pass the result around.

Two array-likes show up in real code: arguments inside a regular function and NodeList from browser DOM methods such as querySelectorAll. You met arguments in Default & rest parameters. Today, prefer rest parameters when you control the function; they create a real array immediately.

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

In modern engines, spreading arguments works, so [...arguments] makes an array. Still, Array.isArray(arguments) is false, and arguments.map is missing. Rest parameters are cleaner: function list(...values) { ... } gives you a real values array.

A NodeList appears when browser code asks the DOM for a group of nodes. The DOM itself is taught later in Walking & searching the DOM, but the shape matters now: querySelectorAll returns 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 modern browsers, NodeList has forEach but not map. That is why production code often says Array.from(document.querySelectorAll("button")) before mapping, filtering, or sorting nodes.

Where you will use this

Iteration choices show up anywhere you process UI data. Use for...of to validate fields until the first error, because you can break or return from the surrounding function. Use entries() when an error message needs “item 3” as well as the value. Use Array.from when browser APIs hand you an array-like collection.

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;
  }
}

This is the comfortable middle ground: readable values, an index when you need it, and early exit when continuing would be noisy.

Common misconceptions

• “return stops forEach.” It stops only the current callback call. The outer forEach keeps scheduling the remaining items.
• “Array-like means Array.” Array-like means numbered slots plus length. Array.isArray can still be false.
• “NodeList has all array methods because it has forEach.” In most browsers it has forEach, but methods such as map, filter, and reduce live on real arrays.
• “for...in is the index loop for arrays.” It is a property-key loop. It can see non-index enumerable properties and returns keys as strings.
• “Holes behave like explicit undefined values everywhere.” for...of visits holes as undefined, while forEach skips them.
• “Borrowing is always better than converting.” Borrowing is compact but advanced. Array.from is often clearer, especially before several array operations.

Key takeaways

• Use for when index control matters most.
• Use for...of for readable value loops that can still break or continue.
• Use forEach for side effects on every existing item, not for early exit or producing a new array.
• keys(), values(), and entries() return iterators; spread or Array.from reveals all their values.
• Array-likes have numbered slots and length. Convert with Array.from when you want the full array toolbelt.

Iteration is choosing the right way to visit items; array-like handling is choosing whether to convert first or borrow one method carefully.

Up next: Destructuring arrays & objects.