JavaScript Higher Order Functions Simplified – map(), reduce() and filter()

Hello and welcome to Codipher. In this article, we are going to look deeper into JavaScript higher-order functions.

So without wasting further time Let’s move to the main topic.

What are Higher Order Functions

In a nutshell, higher-order functions are those functions that take other functions as arguments or return other functions.

A higher-order function receives a callback function as an argument.

Also Read: What is Call Stack In Javascript And Why Its Important

Why we should use Higher Order Functions

• They help us to write clean and simple code.
• Since the code will be clean, it will be easier to debug.

Now javascript have same built-in higher order functions, you may already be using them without even realising.

List of Higher Order Functions in javascript

• filter()
• map()
• reduce()
• sort()
• forEach()

Let’s learn about some of the important built-in higher order functions.

filter()

The filter methods returns a new array of elements that passes a specific test provided by a callback function. And Since filter() receives a callback function therefore filter() is known as higher order function.

Now the callback function that is passed into filter() method takes three arguments:

• value of the element (required)
• index of the element (required)
• the array object (optional)

let arr = [1, 2, 3, 4, 5]

const resultantArray = arr.filter((element) => {
    return element > 3
})

console.log(resultantArray) //output- [4, 5]

In the above example, what’s happening is that the elements of arr array is getting passed one by one into filter() callback method and they are getting tested for a specific test that is element > 3 and those elements which are passing the test are getting pushed in the resultantArray that’s why the output is [4,5] since 4 and 5 were the only elements that passes the test.

The element argument is getting the value of elements of arr array one by one. It will first become 1 and then it will test 1>3 if it’s true then 1 will get pushed in the resultantArray and if it’s false it will be skipped to the next element.

Also Read: Latest JavaScript Features Every Web Developer Should Know

Some examples of filter()

//filter age that is less than 18

const ageArray = [10, 12, 35, 55, 40, 32, 15]

const filterAgeArray = ageArray.filter((age) => {
    return age < 18
})

console.log(filterAgeArray) //output- [10, 12, 15]

//filter positive numbers

const numArray = [-2, 1, 50, 20, -47, -20]

const positiveArray = numArray.filter((num) => {
    return num > 0
})

console.log(positiveArray) //output- [1, 50, 45, 20]

//filter names which contains 'sh' in it

const namesArray = ['rahul', 'smith', 'harsh', 'hitesh', 'ram', 'hemant']

const filterNamesArray = namesArray.filter((name) => {
    return name.includes('sh')
})

console.log(filterNamesArray) //output- ['harsh', 'hitesh']

map()

As the name suggests the map() method is used to map the values of an existing array to new values. It pushes these new values to a new array and returns that new array.

A higher-order function is a function that expects a callback function as an argument. So, by this definition, it’s evident that Map() method is a higher-order function.

The callback function that is passed into map() takes three arguments.

• value of element (required)
• index of the element (optional)
• the array object (optional)

const numArray = [1, 5, 3, 6, 4, 7]

const increasedArray = numArray.map((element) => {
    return element + 1
})

console.log(increasedArray) //output- [2, 6, 4, 7, 5, 8]

Just like in filter(), the map() call-back function receives numArray elements one by one. Each numArray element will pass through the map() method and be incremented by 1 and increasedArray will now have the numArray elements incremented by 1.

Also Read: Best VSCode Extensions you should consider in 2022

Firstly, the map() function receives 1 as an argument. Then the map function maps it to a new value that is the element + 1. So, the elements now become 1 + 1. Finally, the returned number is pushed to the increasedArray. Like so, the increasedArray now contains 2, 5, 3, 6, 4, and 7.

Some examples of map()

//Exponentiate every number in an array

const numArray = [2, 3, 4, 5, 12, 15]

const poweredArray = numArray.map((number) => {
    return number + number
})

console.log(poweredArray) //output- [4, 9, 16, 25, 144, 225]

//Extract the marks of students

const studentsArray = [
  {
    name: 'rakeeb',
    marks: 90
  },
  {
    name: 'nadeem',
    marks: 95
  },
  {
    name: 'Faisu',
    marks: 6
  }
]

const scoreArray = studentsArray.map((student) => {
    return students.marks
})

console.log(scoreArray) //output- [90, 95, 6]

reduce()

The reduce() method reduces the array to a single value, just like filter() and map(). The reduce() method also receives a callback function as an argument. Hence, it’s a higher-order function.

But reduce() takes one more argument other than the callback function and that is the initial value (will learn about it later in this article)

And again like filter() and map(), the callback function passed into reduce() takes some arguments but the callback function passed into reduce() takes 4 arguments instead of 3.

• total (required)
• value of the element (required)
• index of the element (optional)
• the array object (optional)

Also learn, How To Use JavaScript Date() Object, Fast and Easy

Example of reduce()

//a basic example of reduce()

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

const sum = numArray.reduce((total, num) => {
    return total + num
})

console.log(sum)  //output- 15

Let’s first understand what total argument is. total argument is the previous value returned by reduce() function, now when the reduce() will run for the first time there will be no previous returned value therefore for the first time total argument is equal to the init value (remember the second argument that we pass into reduce())

Now we also haven’t used the initialValue in our example, so what happens is that when we don’t pass initialValue, the reduce() method skips the first element of the numArray and it starts from second element and the first element of numArray becomes the value of total argument.

Also Read: GitHub Repos That You Won’t Believe Exist

Comming to our example, initialValue isn’t passed so the first element of numArray such that 1 will become the value of total argument. The second element of numArray will pass as num argument, and the reduce will return total + num such that 1 + 2 = 3. 3 is the new value of total and now the third element from numArray will get passed into reduce() callback as num argument, again reduce will return total + num that is 3 + 3 = 6 and 6 will become the new value of total and so on.

I know the explanation is quite confusing but try to understand it step by step and believe me you will master reduce()

The initialValue argument

initialValue as the name suggests, is the initial value of the total argument as we know when reduce() runs for the first time there is no previous returned value. Hence the first element from the existing array (numArray in our case) becomes the value of the total argument. So instead of doing that we can give an initial value to the total argument.

Remember initialValue will be the initial value of the total argument, the total argument will become the previously returned value of reduce() later.

Note– initialValue argument when used will not skip its first element. Rather, reduce() callback will receive every element.

Syntax of reduce() with initialValue

const resultantArray = existingArray.reduce((total, element, index, array) => {
    //return something
}, initialValue)

And that’s it for this article guys. I hope you understood the concept of JavaScript higher-order functions with this article. If you have any doubt feel free to comment. Share this article if you found this article helpful.

For more information on javascript higher-order functions visit here

Want more content like this Click Here