Apply JavaScript map() to an Array

In this tutorial, we will learn about a built-in function in JavaScript known as map(). It is a high-order function. The map() method returns a new array containing the results of calling a given function on each element of the calling array.

The method is commonly used to apply changes to the elements, such as multiplying by a specific number or performing any other operations that your application may require.

The syntax of the map function:, index, arr), thisValue)

The map() method passes:

  • element: the current element.
  • index: index of the current element.
  • Arr: passes the array object into the callback function.
  • thisValue: It is an optional parameter and holds the value of the function passed, generally it is not defined.

Index and arr are optional parameters.

Return Value: It returns a new array with array elements as the result of the callback function.

Example 1:

Here, you take the array as the input and return the square of each element in that array as the output.

  • For loop
let arr1 = [1, 2, 3, 4];
for (let i = 0; i < arr1.length; i++){
arr1[i] = arr1[i] * 2;
[ 2, 4, 6, 8 ]

Instead of looping on the element through each element and then storing it an array, we can use the map function

  • Applying Map() function to an array
let mynum1 = [1, 2, 3, 4];

let try1{
    return element *2;

[ 2, 4, 6, 8 ]

Example 2:

You can also use Map() function with an array of objects:

It iterates over the array and joins the Name and Type

let brands = [

  {Name : "H&M", Type: "Fashion"},

  {Name : "Tiffany", Type: "Jewellery"},

  {Name : "Rolex", Type: "Watch"}


let products ={

    return `${element.Name} - ${element.Type}`;



[ 'H&M - Fashion, 'Tiffany - Jewellery', 'Rolex - Watch' ].

These are some of the ways you can use the Map() function on the array.

Leave a Reply

Your email address will not be published. Required fields are marked *