Keep and transform a collection with arrays

One idea at a time

Use an array when several values belong in an ordered collection, such as a list of topics. Square brackets create an array literal and commas separate items. Access an item with its index in square brackets. An index is a position, not the item itself, and the first position is zero rather than one.

An array method is a function reached through the array, such as topics.push(...). Mutate means change the existing value in place. Some methods mutate the existing array; others return a new array. This difference matters when other variables share the same array. Start by reading and adding items, then compare the transformation methods in the second interactive example.

What to remember first

Walk through an example

const topics = ["HTML", "CSS"];
topics.push("JavaScript");
console.log(topics[0]);
console.log(topics.length);
for (const topic of topics) {
  console.log(topic);
}

topics begins with two strings. push adds JavaScript to the same array, which is allowed even though topics uses const. Index zero gives HTML, length becomes three, and for...of logs each value in order. The loop introduces a local topic binding for the current item.

See it happen: try a small change

const topics = ["HTML", "CSS"];
topics.push("JavaScript");
console.log(topics);
console.log(topics.length);

Look a little closer

map receives a callback and creates a new array of its returned values. filter receives a callback whose truthy result keeps the item. reduce calls your function with an accumulator (the running result) and the current item. In minutes.reduce((total, value) => total + value, 0), total begins at 0; the returned sum becomes total for the next item. Supplying that initial value makes even an empty array predictable. For a sum, begin at zero. A missing return in a map callback creates undefined entries.

A new array is not automatically a deep copy of the objects it contains. If an item is an object, copying its reference leaves that object shared. Keep callbacks free of unexpected mutations when you want an independent transformation. The advanced objects lesson will show which levels must be copied before a nested update.

Try three different transformations

const minutes = [10, 20, 30];
console.log(minutes.map((value) => value + 5));
console.log(minutes);

Try it in your own project

Run the topic-list task first. In a separate script, store [10, 20, 30] and calculate map, filter, and reduce from that original array independently. Log each result and the original; the original numbers should stay unchanged.

The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.

A common wrong turn

items[items.length] is just past the final item. Also avoid treating the return value of push as the updated array: push returns the new length. Read the method's result and mutation behavior separately instead of assuming every method returns the collection.

Go to the source

• MDN: Keep and transform a collection with arrays ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.