Comparing Methods of Array Iteration in JavaScript

Introduction

An array is an object that behaves like a list. Arrays are useful because they are an organized sequence of elements that can be used together to perform powerful tasks with a collection of data.

Array iteration is a skill that uses many methods, some similar and others much different. It involves sifting through the array's indices and either acting on one or more elements/indices or outputting something based on what is already within the array.

The following are four methods of array iteration that I think would be useful to compare and contrast:

map()

takes in a callback function as an argument
returns a new array with each element being the return value of the callback function

Here is a simple algebraic example of how to use map()

const exampleArry = [1, 3, 6]

const newArry = exampleArry.map( (number) => number * 3)

console.log(newArry)
// [3, 9, 18]

Each element in exampleArry was passed into the callback function that map took as a parameter, which was called "number". That callback function returned each "number" multiplied by 3, then returned an array with each result of the callback function.

Here is a way to use map on a string

const exampleArry = ["orange", "apple", "strawberry"]

const notTheSameArry = exampleArry.map( (fruit) => fruit + " juice")

const anotherArry = exampleArry.map( (fruit) => "organic " + fruit)

console.log(exampleArry)
// ["orange", "apple", "strawberry"]

console.log(notTheSameArry)
// ["orange juice", "apple juice", "strawberry juice"]

console.log(anotherArry)
// ["organic orange", "organic apple", "organic strawberry"]

find()

takes in a callback function as an argument
returns the first element of the array that satisfies the callback function

Here is a way to use find()

const exampleArry = [1, 3, 5, 7]

const notTheSameArry = exampleArry.find( (number) => number > 6)

const anotherArry = exampleArry.find( (number) => number > 4)

console.log(exampleArry)
// [1, 3, 5, 7]

console.log(notTheSameArry)
// 7

console.log(anotherArry)
// 5

filter()

takes in a callback function as an argument
returns a new array with each element of the original array that satisfies the callback function

Here is a way to use filter()

const exampleArry = [1, 3, 5, 7]

const notTheSameArry = exampleArry.find( (number) => number > 3)

const anotherArry = exampleArry.find( (number) => number > 1)

console.log(exampleArry)
// [1, 3, 5, 7]

console.log(notTheSameArry)
// [5, 7]

console.log(anotherArry)
// [3, 5, 7]

forEach()

takes in a callback function as an argument
returns undefined
logs the result of each affected element in the original array

Here is a way to use forEach()

const exampleArry = [1, 3, 5, 7]

const notTheSameArry = exampleArry.find( (number) => number * 4)

const anotherArry = exampleArry.find( (number) => number * 2)

console.log(exampleArry)
// [1, 3, 5, 7]
// return value would be [1, 3, 5, 7]

console.log(notTheSameArry)
// [4, 12, 20, 28]
// return value would be undefined

console.log(anotherArry)
// [2, 6, 10, 14]
// return value would be undefined

Comparing and contrasting these four iteration methods

map(), filter(), and find() all return a value; forEach() returns undefined.
map() and filter() both return a new array; find() returns an element.
map() and forEach() both act on every iterable element in an array; filter() and find() check on iterable element(s) in an array rather than acting on each element.
map(), filter(), and find() can normally easily be used on top of one another on the same variable; forEach() is not as easy to use on top of map(), filter(), and find().
All of these methods use a callback function as an argument.

Example of how you could or could not use these iteration methods together:

const exampleArry = [1, 3, 5, 7]

const notTheSameArry = exampleArry.map( (number) => number + 1).filter( (number) => number > 2).find( (number) => number > 4)

const anotherArry = exampleArry.forEach( (number) => number + 1).filter( (number) => number > 2).find( (number) => number > 4)

console.log(exampleArry)
// [1, 3, 5, 7]

console.log(notTheSameArry)
// This will return 6

console.log(anotherArry)
// This will return an error

Explanation (notTheSameArry)

This variable first mapped over the exampleArry array, adding 1 to each element in this array. This map() method returned a new array of [2, 4, 6, 8] before being going through filter().
The next method, filter(), iterated through the newly mapped array and returned another array based on each element being greater than 2. This lead to a new returned array of [4, 6, 8] before find() was implemented.
The final method used, find(), iterated through the newly filtered array and returned the element that first satisfied its callback function. Since the callback function called for a an argument that was greater than 4, the element 6 was returned.

Explanation (anotherArry)

This variable assignment would return an error. It acts almost the same as the const notTheSameArry, except for one detail: forEach() returns an undefined. Therefore, the next method used, filter(), would throw an error due to the undefined not being iterable. Furthermore, find() would not even be able to attempt to iterate because the syntax of this variable assignment broke when filter() tried to iterate over the undefined return value of anotherArry.