This article on JavaScript is going to be interesting. Because in this article we are going to learn about JavaScript map() function.

Do you ever think about what JavaScript map() function is? What is the use of this function? When to use this function in the code? What this function can do for you to make your JS life easy?

If you are beginner then there might be a chance that you never think about these things. If you don’t know about the map() function of then don’t worry, you will get a full understanding of map function at the end of this article. πŸ™‚ So let’s start

JavaScript map() Function Description

JavaScript map is a JavaScript array function. map() function calls a callback function on each element of the given array and returns a new array.

map does not mutate the array on which it is called.

JavaScript map() Function Syntax

let newArray = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for newArrayc
}[, thisArg])

JavaScript map() Function Parameters

Let’s understand the syntax of the map() method in detail.

callback

This is a function which is perform on each element of the given array. It takes three arguments:

currentValue

The current element being processed in the array.

index

The index of the current element being processed in the array.

array

The array map was called upon.

thisArg

Value to use as this when executing callback.

JavaScript map() Function Return Value

map function returns a new array with each element being of the result of the callback function.

JavaScript map() function Example

There are lot’s of theory till now. πŸ™‚ Let’s understand the map function with an example so that we know how to use the map function.

let numbers = [1,2,3,4,5];

let squareOfNumbers = numbers.map(number => number*number);

//output
[1,4,9,16,25]

As you can clearly see how to modify the array by using the map function. Here, we are using ES6 properties like arrow functions and other things. So, you must know how to use them.

One this to note here is map function don’t change the default array. It always returns a new array.

When to Use JavaScript map() function

So till now, we learn all about the JavaScript map function. There are lots of developers who can’t decide when to use the map function in their code. Don’t worry that is why we are writing this article. πŸ™‚

Most of the developers make the mistake between choosing the map and foreach function. As we know, map function returns a new array, so whenever our requirement is to get a modified array then we must use the map function and whenever we need to iterate over each element of the array then we can use for or foreach function. To learn more differences between map and foreach, you can read this article.

Conclusion

This is all about the JavaScript map() function. In this article, I tried to cover most of the things related to the map() function. Try to find more use cases where you can use this function in your code.

If you want to learn more about JavaScript in more fun ways then you can join a course from Codecademy on JavaScript.

Hope this article helps you a lot to understand the map() function. If you have any doubt or suggestion then comment in the comment box.

Pin It