Advanced array methods: array.forEach array.filter & array.map

array.forEach, array.filter & array.map are array methods which take functions as arguments. Below we will look at how they work.

forEach

.forEach will loop through an array and perform an action (execute a function) for every iteration in that loop. This is how it works:

let string = "My tech stack is:"

const technologies = [" Mongo DB,", " Express.js,", " React.js,", " Node.js"]

technologies.forEach(myFunction)

 function myFunction (item) {
    string += item
}

Result

In the above example, we loop through each item in the array and call myFunction on each item. myFunction then adds each item to the string.

As with all of the array methods in this blog, it is common to use anonymous functions.

technologies.forEach((item) => {
  string += item
})

We could also do this with a for of loop but it may not be as easy to read. Although there are some small differences in how they are carried out, it's just personal preference as to which one to use.

Another way to do the same thing

for (let i of technologies) {
  string += i
}

forEach also takes some additional optional arguments: index and array

technologies.forEach((item, index, arr) => {
  string += index[arr]
})

The index provides the current index of each item in the array and the array provides access to the whole array on each iteration. The above example will provide the same output as before: the index will be 0 on the first iteration, 1 on the second, and so on, and the array will be the whole array. In this example index[0] === "Mongo DO"

Filter

The filter array method will loop through every item in the array, check it against a condition, and return a new array with items that meet that condition. Here is an example:

const numbers = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

function myFunction(item) {
  return (item < 10)
}

const lessThan10 = numbers.filter(myFunction)

Result

The function myFunction is executed for every iteration in the loop and each item is checked against the condition in the function. If it "passes" the condition, in this case being less than 10, then it is added to the new array lessThan10. Don't forget that you need to return the condition in your function.

As before, this can also be done with a for loop but it does take more code to write out.

const newArr = []

for (i of numbers) {
  if (i < 10) {
    newArr.push(i)
  }
}

Filter can also take the optional arguments: index and array. As with forEach this gives you access to the current index and the whole array on each iteration of the loop.

function myFunction(item, index, arr) {
  return (arr[index] < 10)
}

const lessThan10 = numbers.filter(myFunction)

Map

Map iterates through each element in an array and calls a function on each iteration. This can be used to make a change to each item in the array.

const numbers = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

function tenX(item) {
  return (item * 10)
}

const biggerNumbers = numbers.map(tenX)

Which of course gives us 0, 10, 10, 20, 30, 50, 80, 130, 210, 340

You can use the function passed to map to manipulate the array in any way you like, making it useful for creating elements to add to the DOM. In the below example there is an array of strings. The map method calls a function which creates a new <div>, creates a class and adds it to an existing element in the DOM. This is done for each item in the array.

array.forEach, array.filter and array.map are great ways to manipulate arrays in JavaScript. They are easier to read than for loops and often involve writing less code. This is particularly true if you are trying to do something more complex with the arrays.