Share it!

Array and object iteration (i.e., walking through its elements while performing an action with each of them) is one of the most basic tasks in programming. In JavaScript, the Array data type is a list of elements. Unlike other programming languages, JavaScript allows each element to be of any type (even another Array, allowing for deep array nesting).

JavaScript provides many useful built-in methods available for JavaScript developers to work with arrays. They are divided in three classes:

  • Mutator methods: Methods that modify the original array.
  • Accessor methods: Methods that return a new value or representation.
  • Iteration methods: Methods that operate on every item in an array, one at a time. These methods are closely associated with loops.

In this article, we will be focusing on iteration methods and how to use them to process elements within an Array. In a future article we’ll review how to iterate over other data types, such as Objects and Promises.

Array iteration

In JavaScript, Arrays are single variables used to store different kind of elements. In most cases, Array iteration methods operate on every array item, while in some cases, iteration will stop when a matching element is found.

Array.find()

The find() iteration method returns the first value in an array that satisfies the conditions defined in the callback function. This method will only return the first matching item, even if there are more elements that satisfy the condition.

Array.findIndex()

In a similar way to the find() method, the findIndex() iteration method will return the index of the first element in an array that satisfies the conditions defined in the callback function. This method will only return the first index, even if there are more elements that satisfy the condition. If no element passes the test function, findIndex() will return -1. You can think of this method as an evolution of Array.indexOf(), which returns the index of the element passed as a parameter, as it allows to perform any checks on items, not just looking for a value.

Array.every()

The Array.every() method checks whether all array elements satisfy a given condition or pass a test. Unlike find(), this method returns a boolean value, not the matching elements. This method is useful for quickly validating data.

Array.some()

The Array.some() method checks whether some of the array elements satisfy a given condition or pass a test. Unlike every(), this method returns true when at least one of the elements passes the test. This method is useful for quickly checking data before heavier processing tasks.

Array.forEach()

The Array.forEach() method is one of the oldest ones available and allows calling a function (a callback or arrow function) once for each array element. Also, this method is called for EVERY array element, even the ones without a value.

This method does not return a value, it just calls the callback function for each array element. It is very useful for iterating through arrays for display or processing tasks.

Array.map()

Array.map() method is one of the most commonly used methods in JavaScript. Unlike forEach(), the map() method creates a new array with the results of a function call on each element in the array.

It is important to keep in mind that map() does not mutate the original array but returns a new one, containing the updated values.

In order to use these new values, map() must be assigned to a new variable (or chained to another iteration method). If the callback function used for map() does not return a value, the original one will be used.

Array.filter()

In a similar way to map(), the filter() method creates a new array. However, this method only returns the elements that pass the test provided in the callback function. You can think of it as a mix of the map() and find() methods.

For instance, we could use filter() to return a new array containing only the items in a list that start with a specific letter. We can use string indexing to access the first item (or letter) in each string item, much in the same way we access array elements.

Array.reduce()

Unlike the previous methods, which return an array of values, the reduce() method will reduce an array to a single value. This value can be of any type, including an Array (which would allow us to return several values by pushing them in each iteration).

The idea behind reduce() is to pass the current value to return in a variable (called the “accumulator”) and return the updated value in each iteration. This updated value is then passed onto the next iteration until the last iteration, where the final value is returned to the caller.

Array items are processed from first to last (left to right). There’s another method, named reduceRight(), that can be used to reduce the array starting from the last element.


Share it!