Functional Programming in JavaScript

forEach, map, filter, reduce, find, findIndex, some & every

May 17, 2021 · 4 mins Found a typo? Edit me

rabbit

Functional Programming is a paradigm where programs are constructed by applying and composing functions. The Functional Programming keys are:

You treat functions as first-class citizens.
You can pass them as arguments to other functions.
A function can return another function.
You can modify functions.

When a function is called with some given arguments, it will always return the same result, and cannot be affected by any mutable state or other side effects.

And now, we are going to take a look at the most common JavaScript functions that allow us to write Functional Programming: forEach, map, filter, reduce, find, findIndex, some and every.

For Each 🧩

We use forEach() when we like to iterate through an array of items.
Using this method, you can get the item of the current element when iterating and/or the index.
It is recommendable not to use it unless you are sure you want to modify the original array. This method is mutable. It means it will modify the original array.

const countries = ['Spain', 'Germany', 'Portugal', 'France']
countries.forEach(
    (country, index) => console.log(index, country.toUpperCase())
)

--OUTPUT--
0 "SPAIN"
1 "GERMANY"
2 "PORTUGAL"
3 "FRANCE"

Map 🗺

We use map() whenever we want to map the values into other values producing a new array.

const countries = ['Spain', 'Germany', 'Portugal', 'France']
const mapped = countries.map((country) => country.toUpperCase())
console.log(mapped)

--OUTPUT--
["SPAIN", "GERMANY", "PORTUGAL", "FRANCE"]

Filter ⌛️

We use filter() when we want to pick just some specific elements regarding a filter. It returns a new array with the filtered elements or empty if no matches.

const countries = ['Spain', 'Germany', 'Portugal', 'France']
const filtered = countries.filter(
    (country) => country.includes('an')
)
console.log(filtered)

--OUTPUT--
["Germany", "France"]

Reduce ⛏

We use reduce() when we want to return a single value depending on a specific closure. This function can take an initial value, which by default is empty (0 or "") as the second parameter.

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let initialValue = 5
const sum = numbers.reduce(
    (accumulator, value) => accumulator + value,
    initialValue
)
console.log(sum)

--OUTPUT--
60

find 🔎

We use find() if we are interested in the first occurrence of a certain element in an array. It will return undefined otherwise.

const countries = ['Spain', 'Germany', 'Portugal', 'France']
const find = countries.find((country) => country.includes('an'))
console.log(find)

--OUTPUT--
"Germany"

find Index 🔑

We use findIndex() if we would like the first occurrence of a certain element in an array, this method is pretty similar to find but it will return not the value but the index. In case there are no matches, the output would be -1.

const countries = ['Spain', 'Germany', 'Portugal', 'France']
const findIndex = countries.findIndex(
    (country) => country.includes('an')
)
console.log(findIndex)

--OUTPUT--
1

Some 🧵

We use some() if we are interested to know if some element from an array meets a specific closure. If any of the items satisfy the criteria the result will be true, else, it will be false.

const countries = ['Spain', 'Germany', 'Portugal', 'France']
const isAn = countries.some((country) => country.includes('an'))
const isLand = countries.some((country) => country.includes('land'))
console.log(isAn)
console.log(isLand)

--OUTPUT--
true
false

Every ☘️

We use every() if we want to know if every element from an array meets a specific closure. This method is somehow similar to some but the opposite. This method also returns true or false.

const countries = ['Spain', 'Germany', 'Portugal', 'France']
const isEveryA = countries.every((country) => country.includes('a'))
const isEveryE = countries.every((country) => country.includes('e'))
console.log(isEveryA)
console.log(isEveryE)

--OUTPUT--
true
false

burrow

These are the most common functions when dealing with Functional Programming, but there are many more (fill, join, sort, etc). You can easily check the full list on the Mozilla Developer 🦊 site.

Top