Higher Order Array Methods

What are higher-order array methods?

These are methods that operate on other functions, either by taking them as arguments or returning them.

Higher-order array methods are useful in the following ways:

• They abstract repetition.
• They allow developers to write clean code hence reducing the chance of error.
• Some like ‘ .map() ’ are incorporated as useful features in frontend libraries like React

There are three higher-order array methods that every JavaScript developer should know:

• ' .forEach() '
• ' .filter() '
• ' .map() '

Iterating an array with ' .forEach() '

This method iterates over array elements similar to how a loop works. Let us see an example to illustrate the usage of this method.

let array = ["Asia", "Africa", "America", "Australia", "Europe", "Antarctica"]
array.forEach((element)=>{
  console.log(element)
})
// OUTPUT
// Asia
// Africa
// America
// Australia
// Europe
// Antarctica

This method accepts a callback function as an argument, The callback function in turn takes one argument that references individual elements of the array during iteration.

Filtering arrays with ' .filter() '

Just as the name suggests, this method iterates over an array to build and return a new array with only elements that pass a defined test. Consider a scenario where we have an array of objects:

let array = [
  {name: "Ian", age: 24},
  {name: "Lydia", age: 10},
  {name: "Chris", age: 7},
  {name: "Peter", age: 42},
  {name: "Mary", age: 34},
  {name: "Steve", age: 12},
  {name: "Karren", age: 17},
  {name: "Alex", age: 40},
  {name: "Ashley", age: 22},
  {name: "Ken", age: 18},
]

Each object in the array represents a person’s information and has two variables, name, and age. If for some reason we are only interested in persons whose age is eighteen and above only, We can write the following script to filter out all persons whose age is less than eighteen.

let array = [
  {name: "Ian", age: 24},
  {name: "Lydia", age: 10},
  {name: "Chris", age: 7},
  {name: "Peter", age: 42},
  {name: "Mary", age: 34},
  {name: "Steve", age: 12},
  {name: "Karren", age: 17},
  {name: "Alex", age: 40},
  {name: "Ashley", age: 22},
  {name: "Ken", age: 18},
]
/*filter out all persons whose ages is below eighteen*/
let filteredArray = array.filter((element)=>{
  return element.age>=18
})
/*Iterate over the filtered array and display the names of all persons whose age is greater than or equal to eighteen*/
filteredArray.forEach((element)=>{
  console.log(element.name)
})
// OUTPUT
// Ian
// Peter
// Mary
// Alex
// Ashley
// Ken

The ’ .filter() ’ method accepts a callback function as an argument, The callback function in turn takes one argument that references individual elements of the array during iteration.

Transforming an array with ' .map() '

The ‘ .map() ’ array method transforms elements of an array by applying a callback function to each element, builds a new array of transformed elements, and returns a new array whose length is the same as the original array. Consider this array of numbers:

let array = [1, 2, 3, 4]

Let us write a script that transforms the array into a new array where the numbers have been doubled.

let array = [1 ,2 ,3 ,4]
let doubledArray=array.map((element)=>{
  return element*2
})
console.log(doubledArray);
// OUTPUT
// [2, 4, 6, 8]

NOTE

It is useful to remember that these array methods do not modify the original array, instead they build and return a new array.