How To Use Array Methods in JavaScript: Iteration Methods

Introduction

JavaScript arrays store ordered collections of values and come with many built-in javascript array methods to help manipulate those values. Some methods change the original array (mutator methods), others return new values or views (accessor methods), and a key category used heavily in functional programming is javascript iteration methods — functions that visit each element in turn.

Note: These methods are defined on Array.prototype, so they are often referenced as Array.prototype.method(). For clarity this guide uses the shorter method() form.

Quick overview of common iteration methods

• forEach — run a callback for every element
• map — transform each element into a new array
• filter — keep elements that match a test
• reduce — collapse an array into a single value
• find / findIndex — locate the first matching element or its index

Understanding arrow functions

Modern examples commonly use arrow functions for concise callbacks. They are short-hand function expressions and work well with javascript array functions such as map(), filter(), and reduce(). Example forms:

// no parameters
() => console.log('hello')

// single parameter (parentheses optional)
item => item.toUpperCase()

// multiple parameters
(a, b) => a + b

forEach()

The forEach() method executes a callback for each element of an array. It is a simple way to iterate over arrays when you need side effects (like logging) and Netalith not need a returned array.

const fish = ['piranha','barracuda','cod','eel']

// iterate over array javascript and log each value
fish.forEach(f => console.log(f))

// equivalent with a classic for loop
for (let i = 0; i < fish.length; i++) {
  console.log(fish[i])
}

map()

map() returns a new array containing the result of calling a function on every element. Unlike forEach, map produces a transformed array and does not mutate the source.

const fish = ['piranha','barracuda','cod','eel']

// map to a new array (pluralize)
const pluralFish = fish.map(f => `${f}s`)
console.log(pluralFish) // ['piranhas','barracudas','cods','eels']

// difference: forEach returns undefined, map returns an array

filter()

filter() builds a new array containing only the elements that satisfy a predicate. This is handy when you need to narrow down javascript arrays by some condition.

const seaCreatures = ['shark','whale','squid','starfish','narwhal']

// filter by first letter
const startsWithS = seaCreatures.filter(name => name[0] === 's')
console.log(startsWithS) // ['shark','squid','starfish']

reduce()

reduce() combines all elements of an array into a single value using an accumulator function. It is extremely flexible — you can sum numbers, build objects, or concatenate strings.

const numbers = [42, 23, 16, 15, 4, 8]

// sum example (javascript reduce sum array example)
const sum = numbers.reduce((acc, cur) => acc + cur, 0)
console.log(sum) // 108

// reduce to an object counting first letters
const counts = seaCreatures.reduce((acc, name) => {
  const key = name[0]
  acc[key] = (acc[key] || 0) + 1
  return acc
}, {})
console.log(counts)

find() and findIndex()

find() returns the first element that passes a test. findIndex() returns the index of the first match or -1 if none is found — useful when you need the position instead of the value.

const sea = ['whale','octopus','shark','cuttlefish','flounder']

const isCephalopod = name => ['cuttlefish','octopus'].includes(name)

const firstCephalopod = sea.find(isCephalopod)
const firstCephalopodIndex = sea.findIndex(isCephalopod)

console.log(firstCephalopod)      // 'octopus'
console.log(firstCephalopodIndex) // 1

When to use which method

• Use forEach for side effects and when you don’t need a return value.
• Use map when you want a new array of transformed items.
• Use filter to select a subset of elements.
• Use reduce to compute a single value (sum, object, string, etc.).
• Use find / findIndex to locate the first matching element or its index.

Conclusion

Mastering javascript array methods — forEach, map, filter, reduce, find, and findIndex — makes working with javascript arrays more expressive and concise. These array.prototype methods provide clean alternatives to manual loops and enable functional-style code. Practice combining them and consider immutability: many iteration methods return new arrays rather than mutating the original.