Functional Array Methods

A key part of Declarative JavaScript is a group of array methods known as the functional array methods. All these methods will take a function as an argument.

filter

The filter() method creates a new array with all items that pass the test implemented by the provided function.

The following examples will create a new array containing only the even numbers from the original array.

Using a loop

const numbers = [1, 2, 3, 4, 5]
const even = []

for (const number of numbers) {
  if (number % 2 === 0) {
    even.push(number)
  }
}

console.log(even) //[2, 4]

Using the filter() method

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

const even = numbers.filter(number => number % 2 === 0)

console.log(even) // [2, 4]

find

The find() method returns the value of the first element that passes the test implemented by the provided function.

The following examples will search for the first number that is greater than 5.

Using a loop

const numbers = [3, 5, 2, 7, 1, 8]
let value; 

for (number of numbers) {
  if (number > 5) {
    value = number
  }
}

console.log(value) // 7

Using the find() method

const numbers = [3, 5, 2, 7, 1, 8]
const value = numbers.find(number => number > 5)

console.log(value) // 7

forEach

The forEach() method executes a provided function once for each array element. The provided function will have access to the array's values and indexes. The forEach method can be used as a replacement for the for...of loop.

NOTE

Unlike other functional array methods, the forEach method does NOT create or return a new array. Changes made inside the callback function will alter the original array.

Using a loop

const letters = ['a', 'b', 'c']

for (const letter of letters) {
  console.log(letter)
}

Using the forEach() method

const letters = ['a', 'b', 'c']
letters.forEach(letter => console.log(letter))

map

The map() creates a new array with the results of calling a provided function on every item in the calling array.

The following examples will create a new array that contains each number of the original array doubled.

Using a loop

const numbers = [1, 3, 5, 7]
const doubleNumbers = []

for (const number of numbers) {
  doubleNumbers.push(number * 2)
}

console.log(doubleNumbers) // [2, 6, 10, 14]

Using the map() method and arrow function expression

const numbers = [1, 3, 5, 7]

const doubleNumbers = numbers.map(number => number * 2)

console.log(doubleNumbers) // [2, 6, 10, 14] 

reduce

The reduce() method take each item of an array and reduces them down to a single value by calling the provided function on each item. This is accomplished by returning the next value of the accumulator each time the function is called.

NOTE

By default, the accumulator is set to the first value in the array. This value can be changed by adding a second argument after the callback function.

The following examples will get the total of all the numbers in the original array.

Using a loop

const numbers = [7, 13, 27, 45]
// let must be used here because the value will change
let sum = 0 

for (const number of numbers) {
  sum += number
}

console.log(sum) // 92

Using the reduce() method

const numbers = [7, 13, 27, 45]

const sum = numbers.reduce((accumulator, number) => accumulator + number)

console.log(sum) // 92

sort

While not considered a functional array method, the sort method can take a function as an argument. This compareFunction is used to handle sorting and is necessary for proper sorting of numbers, strings with a mixed casing, and nested arrays and objects.

NOTE

The sort method sorts elements in place, which means the method will alter the provided array.

Using the sort() method to sort numbers

const numbers = [20, 1, 4, 100]

// Adding a compare function to compare numbers
numbers.sort((a, b) => a - b)

console.log(numbers) // [1, 4, 20, 100]

Using the sort() method to sort mixed-case strings

const colors = ['Red', 'blue', 'Green', 'Black', 'white', 'Yellow']

colors.sort((a, b) => a.toLowerCase() > b.toLowerCase() ? 1 : a.toLowerCase() < b.toLowerCase() ? -1 : 0)

console.log(colors)

Using the sort() method to sort an array of objects

const students = [
  { firstName: 'Susie', lastName: 'Hansen', grade: 76 },
  { firstName: "Irma", lastName: "Norton", grade: 15 },
  { firstName: "Baker", lastName: "Browning", grade: 69 },
  { firstName: "Nolan", lastName: "Mclean", grade: 84 },
  { firstName: "Hester", lastName: "Frye", grade: 95 }
]

// sort students by last name
students.sort((a, b) => a.lastName.toLowerCase() > b.lastName.toLowerCase() ? 1 : a.lastName.toLowerCase() < b.lastName.toLowerCase() ? -1 : 0)