DEV Community

Cover image for Comparing Methods of Array Iteration in JavaScript
ericeinerson
ericeinerson

Posted on

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]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

The following are other iteration methods with one-sentence descriptions that you could check out if you are interested:

entries()

This method returns an object with the keys and key values of an array.

every()

This method returns a boolean based on every element in the array satisfying a testing function.

findIndex()

This method returns the index of the first element that satisfies the testing function

for...in

This method iterates over enumerable properties of an object

for...of

This method iterates over iterable properties of an object

from()

This method creates a new array by iterating through an object and assigning each iterable element an index

includes()

This method returns a boolean value depending on whether or not the method's argument is within the array.

indexOf()

This method finds an array element and returns its index.

keys()

This method returns the keys of an array in a new object.

lastIndexOf()

This method is the same is indexOf(), but it returns the last occurrence of the element in its array.

reduce()

This method calls a function on each element in an array, which will return a value that consolidates the values of each index into one element.

reduceRight()

This method is the same as reduce(), but it iterates through the array from right to left instead of left to right.

some()

This method returns a boolean based on whether some of the elements of an array satisfy a testing function.

References

Here are some resources I used to familiarize myself with arrays and array iteration, which helped me construct this post:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-iteration-methods

https://levelup.gitconnected.com/the-array-iterators-cheatsheet-javascript-9d0cfa03f4

https://www.w3schools.com/js/js_array_iteration.asp

https://www.tabnine.com/academy/javascript/how-to-use-the-forof-statement-in-javascript/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

https://www.digitalocean.com/community/tutorials/js-array-find-method

https://www.freecodecamp.org/news/4-main-differences-between-foreach-and-map/

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kirupa.com%2Fjavascript%2Flooping_through_array.htm&psig=AOvVaw0IcpiQhcHANUUAl2P_uFsa&ust=1645220133858000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCNjuzOPYh_YCFQAAAAAdAAAAABAD

https://javascript.plainenglish.io/understanding-and-applying-array-methods-in-javascript-df7873ad611

Oldest comments (0)