Quick Guide to ES6 Array Helper Methods (with Examples)

In the interest of writing quicker, cleaner and clearer code, ES6 array helper methods are the bees knees.

ES6 array helper methods allow us to get away from writing for loops to handle anything that requires us to iterate over an array. Instead, we have several more specialised methods that we can use; like having a tool in your toolbelt that’s designed for the exact job you’re doing.

The array helper methods we’ll cover here are:

1. forEach
2. map
3. filter
4. find
5. every
6. some
7. reduce

1. forEach

The forEach() array helper method runs an anonymous iterator function for each of the elements in an array.

Example

const numArray = [1, 2, 3];

numArray.forEach(num => console.log(num));

// expected output: 1
// expected output: 2
// expected output: 3

You can also define the function elsewhere and pass it in as the argument to the helper method like this:

const numArray = [1, 2, 3];

const printNum = num => console.log(num);

numArray.forEach(printNum);

// expected output: 1
// expected output: 2
// expected output: 3

2. map

The map() helper method creates a new array from the result of running a function on each of the elements in the original array.

It’s great for plucking out specific objects / values from a larger array.

Example

const numArray = [1, 2, 3, 4];

const doubled = numArray.map(num => num * 2);

console.log(doubled);

// expected output: Array [2, 4, 6, 8]

3. filter

The filter() array helper method returns a new array of only those returning true from an evaluation.

Example

const products = [
  {name: "banana", type: "fruit"},
  {name: "cucumber", type: "vegetable"},
  {name: "raspberry", type: "fruit"},
  {name: "potato", type: "vegetable"}
]

const fruits = products.filter(product => product.type === 'fruit')

// expected output: Array [{name: "banana", type: "fruit"}, {name: "raspberry", type: "fruit"}]

4. find

find() loops through an array to find a particular record and returns it.

The iterator function must return either true or false. If it returns true, it will return the current record / element you’re iterating on.

It will only return the first matching record, not any subsequent matches.

Example

const users = [ 
  {name: "Bob", age: 56}, 
  {name: "Jill", age: 71}, 
  {name: "Terry", age: 43} 
]

users.find(user => user.name === "Jill")

// expected output: Array [{name: "Jill", age: 71}]

5. every

The every() helper method checks if every iteration on the array returns true.

Put another way, does every record in the array match the given criteria.

Example

const computers = [
  { name: "Apple", ram: 24 },
  { name: "Compaq", ram: 4 },
  { name: "Acer", ram: 32 }
]

computers.every(computer => computer.ram > 16)

// expected output: false

computers.every(computer => computer.ram > 2)

// expected output: true

6. some

some() is similar to every(), but only one record needs to match the given criteria in order for this helper method to return true.

Example

const computers = [
  { name: "Apple", ram: 24 },
  { name: "Compaq", ram: 4 },
  { name: "Acer", ram: 32 }
]

computers.some(computer => computer.ram > 16)

// expected output: true

7. reduce

The final array helper method, reduce(), iterates over an array using a supplied callback function / value which feeds into the next iteration of the loop.

The first argument is the initial value for that iteration. On first iteration, it’s the starting value you’ve set in the callback, but for every subsequent iteration it’s the return value from the previous iteration.

The second argument is the current record you’re iterating through on the array.

The easiest example is an accumulator which adds up the values of all the items in an array.

Example

const numbers = [10, 20, 30]

numbers.reduce((acc, number) => acc + number, 0)

// expected output: 60