Higher-Order Array Methods in JavaScript (map and filter)

Photo by Clément Hélardot on Unsplash

In my previous article, I discussed higher-order array methods — forEach and reduce methods. In this article, I want to focus on map and filter methods which are also used frequently in Javascript applications.

Aside from practising higher-order methods — map and filter, we will also try solving the same problem with other methods, such as for and for…of loops to obtain the same results in this article.

.map( ) method

Consider we have an array of numbers and we want to add 1 on each element in an array and return an array with new values as a result.

const numbers = [10, 20, 30, 40, 50]

Firstly, we will use for loop to get the desired output. We have to initialise a new array, numbersPlusOne to add a new value on each iteration. Then, we use for loop to loop through the original array, add 1 to each element on each iteration and push updated values to the array we created. The outcome displays a new array with updated elements.

// using for loop
const numbersPlusOne = [] // initialise a new array

// iterate each element in an original array
for (let i = 0; i < numbers.length; i++) { 
  // add +1 to each element and 
  // push a new result to the new array on each iteration
  numbersPlusOne.push(numbers[i] + 1)…