My Journey Through Array Iteration Methods

Array iteration methods are by far the hardest concept I have had to grasp during my time at Flatiron School. The fact that there are quite a few of them also makes learning them not an easy task. However, with time you can understand them, and utilize their functionality in your own projects! After some time using them, I feel confident to give a walk through of the basic tasks that each iteration method can be used for!

.find() and .filter()

.find() and .filter() are very similar functions that can be called on an array. They both take a callback function as their arguments. The main difference between the two is that .find() only returns the first element that returns truthy to the callback function, while .filter() returns all elements that return truthy to the callback function.

const arr = [1, 2, 7, 45, 63]

const found = arr.find(element => element > 5)
console.log(found)
//output: 7

cosnt arr = [1, 2, 7, 45, 63]

const found = arr.filter(element => element > 5)
console.log(found)
//output: [7, 45, 63]

This first code example shows how a .find() would work on a simple array of just numbers. While 45 and 63 are also greater than 5, the .find() method will only return the first truthy value, which is 7. .filter() on the other hand will return 7, 45, and 63 since they are all truthy values in this scenario. It is important to note that .filter() returns the values in a new array.

.map()

.map() is called on an array and takes a callback function as the argument. It will call the callback function once on each item that is in the array, and return a new array of the mutated values.

const arr = [1, 2, 3, 4, 5]

const newArr = arr.map(element => element * 5)
console.log(newArr)
//output: [5, 10, 15, 20, 25]

.map() can also be used as a array copying method if needed.

const arr = [1, 2, 3, 4, 5]

const newArr = arr.map(element => element)
console.log(newArr)
//output: [1, 2, 3, 4, 5]

Both of these examples show the basic functionality of the .map() method, but .map() is very versatile and can be used in many different situations. Here is a snippet of code that I wrote to capitalize the first letter in each word of an array of strings! You will see that you can even chain .map() by calling it inside of another .map()

const titleCased = () => {
  return tutorials.map(function(string){
      let word = string.split(' ')
          let capWords = word.map(function(word){
            return word.charAt(0).toUpperCase() + word.substring(1)
          })
          return capWords.join(' ')
      })
}

.reduce()

.reduce(), like all the other array iteration methods, takes a callback function as the argument. This method, in my opinion, is one of the more confusing array iteration methods. MDN Web Docs does a great job in explaining how it works.

"It runs a "reducer" callback function over all elements in the array, and accumulates them into a single value. Every time, the return value of callback function is passed into the function again on next invocation as accumulator. The final value of accumulator becomes the return value of reduce()." - MDN Web Docs

The syntax for a reducer callback function passed into .reduce() is as follows,
reduce(function(accumulator, element){...} initialValue)

const totalArray = array.reduce(function(accum, element){
    return element + accum
}, 0)

The function above is an example of a simple function that will loop over an array and return the total of all the elements in the array. The function loops over the array, passes the current number as an argument, adds that number to the accumulator, and returns the total of the two so that it can be used for the next number in the array.

.forEach()

.forEach() is unique compared to the other iteration methods. It is the "least expressive" out of them all, and it does not have a built in return value. .forEach() does not have a specific use, but it can be useful when debugging or mutating an array. It can be used in place of some of the other methods listed above, however it is recommend to use one of the other methods if possible before using .forEach(). An example of a function using .forEach() to print all the values of an array to the console is below.

const array = [1, 2, 3]

array.forEach(element => console.log(element))
//output: 1
//output: 2
//output: 3

References and Useful Links

Array.prototype.find() - JavaScript | MDN

The find() method of Array instances returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

developer.mozilla.org

Array.prototype.filter() - JavaScript | MDN

The filter() method of Array instances creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

developer.mozilla.org

Array.prototype.map() - JavaScript | MDN

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

developer.mozilla.org

Array.prototype.reduce() - JavaScript | MDN

The reduce() method of Array instances executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

developer.mozilla.org

Array.prototype.forEach() - JavaScript | MDN

The forEach() method of Array instances executes a provided function once for each array element.

developer.mozilla.org