Understanding the JavaScript _.map() Function in Depth

By the end of this article, you will get a good understanding of the following:

1. Higher-order functions
2. Callbacks
3. _.map() function

The _.map() function in JavaScript is a powerful tool. You can call the _.map() function on arrays and make certain changes to all the elements in an array using _.map().

The _.map() function takes a function as an argument, which means every time you use map(), you need to provide a function to it. This is what makes _.map() more powerful. In that map function, you should provide some instructions on how to modify the elements in the array.

Usually, developers pass arrow functions to map() as arrow functions are syntactically cleaner and shorter.

Let’s see what is a higher-order function in JavaScript.

A higher-order function is a function that takes a function as an argument or returns a function. The functions map() and filter() are examples of higher-order functions.

Image 1 — Higher Order Function

In the above image, “higherOrderFunction” is a higher-order function as it takes a function as an argument.

Why do we use higher-order functions?

Well, as you can see, instead of using normal functions, when you use a higher-order function and pass a callback function to it, you can create a space inside your function (higher-order function) for some code.

In “Image 1”, “higherOrderFunction” is used to add 1 to a number. You can make “higherOrderFunction” add 2 to a number or multiply a number by 2, by simply passing a relevant function.

So, you don’t have to write a new function just to perform the above-mentioned operations. It follows the DRY (Don’t Repeat Yourself) principle. That is why higher-order functions are extremely powerful.

Now, let’s see what callback functions are.

A callback function is a function that is passed as an argument to another function.

Image 2 — Callback Function

As pointed out in “Image 2”, the arrow function passed as a callback function.

Now, I believe you have understood higher-order functions and callback functions.

Let’s now explore the _.map() function.

_.map() is a higher-order Function. We pass relevant callback functions to the _.map() function and the _.map() function returns a new array with modified elements of the array it is called upon.

Now let’s see how a _.map() function works under the hood.

Image 3 -_.map()

“Image 3” shows how a _.map() function is implemented. In the above image, the function _.map() receives an array and a function as arguments. It loops through all the elements in the array and modifies them according to the callback function we provide. In this case, it adds 1 to all the elements in the array and pushes them into a new array, and then, it returns the new array.

That’s it. I hope you enjoyed reading this and now have a solid understanding of the _.map() function in JavaScript.

More content at plainenglish.io