Functional Array Methods

Functional Programming is a programming methodology that relies on pure functions and declarative statements to avoids shared state, mutable data, and side-effects. While the full implementation of Functional Programming in JavaScript is beyond the scope of this course, the following methods are often utilized when adhering to the Functional Programming Methodology.

Using these following methods can be faster, use less code, and be easier to read than using loops.

NOTE

Some of the examples below use the Arrow Function expression.

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