Higher-order functions: Map and Filter in JavaScript

Search for a command to run...

No comments yet. Be the first to comment.
A quick analysis of the top 25 CWEs in the last 5 years show a repeating pattern

JavaScript is a scripting language, therefore you can write scripts to automate your workflow with JavaScript. The background of the snippet I created a node script recently to automate one workflow that I do repeatedly. Every time I create a new Jav...

In this article, you will learn to build a Markdown parser which compiles into HTML with JavaScript and Regular Expression Markdown is a markup language like HTML. It is quite popular among developers to write blogs, readme files, and documentation. ...

Handling error in express applications can be more challenging than building web applications and APIs Building web applications or APIs with express.js is not difficult in my opinion. I think it is more difficult to handle errors, error status codes...

This blog is a follow-up to my last blog in which I talked about promises. If you are unfamiliar with promises in JavaScript, please read that article before reading this one. Also, some familiarity with exception handling would be useful. Async Awai...
A higher-order function is a function that either returns a function or takes in a function as an argument. Map, filter and reduce are some of the built-in higher-order functions in JavaScript. They can be used in arrays and I am going to briefly describe how to work with map and filter in this blog.
The map method called on an array will return the array of the same size. The returned array can be the result of the operation you apply on the array call the method on.

An example of a map function
Here in the above example, in line no 2, the map method is called on the object. The map function takes a callback as an argument. Here the arrow function that takes x as a parameter and returns two times of x is the callback function. Here the map function iterates over every single element in the numbers array and stores 2 times of the current value in the twiceOfNumbers array. The solution can also be implemented as the code given below:

The looping solution.
If you want to know about arrow functions, read my blog by clicking this link.

Map function to calculate the square of each number in the numbers array.
Filter, as you have guessed, is a method that helps to filter the array. The filter function takes in a call back that returns either true or false value. Those items in the array that return the true value on the test condition will be the element of the new filtered array.
Filter function to find even numbers from an array
Here the filter function takes the call back which will be called with every single element in the numbers array. The items that are even will pass the test x modulo 2 equals 0 will be returned into the new array.

The looping solution.
The above solution tries to show the working if the filter function by looping through every single element of the numbers array and pushing the items that pass the x modulo 2 equals 0 test.
In this short blog, I tried to explain map and filter briefly. I absolutely love them and how they simplify the code so much. There’s also another higher order function called reduce which is the king of list transformations. If you want to know more about that, Please watch this video