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 double = []
for (const number of numbers) {
double.push(number * 2)
}
console.log(double) // [2, 6, 10, 14]
Using the map() method
const numbers = [1, 3, 5, 7]
const double = numbers.map(number => number * 2)
console.log(double) // [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 added 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)