JavaScript Array Iteration

Walk every item

Iteration means visiting each value in order. You can do that with a for loop and an index. Array methods take a function instead: JavaScript calls that function once per item, with the item as the first argument.

The function you pass in is a callback. Write it with the function keyword. Later chapters cover the short arrow form. Both work here.

forEach runs a function

list.forEach(callback) visits every item. The callback can log, add to a total, or write to the page. forEach itself returns undefined. Do not assign its result to a new list — there is no new list.

const names = ["Ada", "Grace", "Linus"];
const lines = [];

names.forEach(function (name) {
  console.log(name);
  lines.push(name);
});

console.log(names.forEach(function () {}));
document.body.textContent = lines.join(", ");

map returns a new array

list.map(callback) builds a new array from the values your callback returns. The original list is not mutated. Forget return and every slot in the new array isundefined.

const prices = [4, 10, 7];
const doubled = prices.map(function (n) {
  return n * 2;
});

console.log(prices);
console.log(doubled);

document.body.textContent =
  "original " + prices.join(", ") + " / doubled " + doubled.join(", ");

filter keeps some items

list.filter(callback) returns a new array of the items for which the callback returned a truthy value. The original is unchanged. Use it to drop zeros, hide completed tasks, or keep scores at or above a cutoff.

const scores = [88, 41, 95, 70];
const passed = scores.filter(function (n) {
  return n >= 50;
});

console.log(passed);
console.log(scores);

document.body.textContent = "passed: " + passed.join(", ");

find returns one item

list.find(callback) returns the first item that matches, or undefined if none match. It does not return an array. findIndex returns the index, or -1.

Stop there when you need one record. Filtering the whole list and then taking index 0 still walks every item; find can stop early.

const tasks = ["draft", "review", "ship"];
const hit = tasks.find(function (word) {
  return word === "review";
});
const missing = tasks.find(function (word) {
  return word === "archive";
});

console.log(hit);
console.log(missing);

document.body.textContent = String(hit) + " / " + String(missing);

Pick the method that matches the job

A classic for loop is still the right tool when you need the index, an earlybreak, or a running total you want to write by hand. The next flow chapters cover that loop.

What to remember

• forEach runs a function. It does not return a list.
• map returns a new array. Return a value from the callback.
• filter keeps items whose callback is truthy.
• find returns the first match, not an array.

Next: dates — the clock on the machine, year, month, and a stamp you format yourself.