Javascript Array Map Method

The Javascript array.map() method creates an new array by executing a callback function on each element present in the array. Map function not mutating the original array. Generally, the map() method is used to iterate over an array and execute the callback function on every element of the array.

Using map function we need not to initialize new array.

Array.map method accept two arguments, the callback function and thisArg.

1.Callback Function

Provided function is called for each item in the Array elements.For each iteration a function is executed and return a single value and that value is pushed to the new array. Callback function accepts three arguments, current element, index, whole array.

1. current element (mandatory) => The value of the current array element
2. index(optional) => The current element’s index number
3. whole array(optional) => The array object to which the current element belongs

thisArg

This parameter is optional, it holds the context to be passed as this is to be used while executing the callback function. If the context is passed, it will be used like this for each invocation of the callback function, otherwise undefined is used as default.

How to use thisArg

The thisArg is passed as a second argument of array.map() function, if second argument is not passed, default value of thisArg is undefined.

Get Manikandan L’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In the below code written callback function as a normal function instead of array function, beacuse an arrow function saves the binding of this in the closure that's created when the function is created. So it doesn't set this to the context of the call to the function.

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

let multiplyByArg = arr.map(
  function (ele, i) {
    return ele * this.value;
  },
  { value: 3 }
);

console.log(multiplyByArg); // [ 3, 6, 9, 12, 15, 18 ]

//-----------------------------------------
let arr = [1, 2, 3, 4, 5];

let multipleByThis = arr.map(function (ele) {
  return ele * this;
}, 90);

console.log(multipleByThis); //[ 90, 180, 270, 360, 450 ]

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

let multiplyBy2 = arr.map((ele) => {
  return ele * 2;
});

console.log(arr); //[ 1, 2, 3, 4, 5 ]
console.log(multiplyBy2); //[ 2, 4, 6, 8, 10 ]

Return Value

A new array is created with each element of the each iteration being the result of the callback function.

callback function is invoked only for array indexes which have values. It is not invoked for empty values or empty strings

The Array.map() method is commonly used to modifying the elements and return the new array with changes.

Modifying the Array of Objects

if you are trying to modifying the each objects in the array using map function it will affect the original array also.

let obj = [{ name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }, { name: 5 }];

let modifyStr = obj.map((ele, i) => {
  ele.value = i + 1;
  return ele;
});

console.log(obj)
// [{ name: 1, value: 1 },{ name: 2, value: 2 },{ name: 3, value: 3 },{ name: 4, value: 4 },{ name: 5, value: 5 }]

console.log(modifyStr);

// [
//   { name: 1, value: 1 },
//   { name: 2, value: 2 },
//   { name: 3, value: 3 },
//   { name: 4, value: 4 },
//   { name: 5, value: 5 }
// ]

while updating or modifying object values in the array, but don’t affect the original array means , you can use spread operator.

let obj = [{ name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }, { name: 5 }];

let modifyStr = obj.map((ele, i) => {
  return { ...ele, value: i + 1 };
});

console.log(obj) //[ { name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }, { name: 5 } ]

console.log(modifyStr)
// [
//   { name: 1, value: 1 },
//   { name: 2, value: 2 },
//   { name: 3, value: 3 },
//   { name: 4, value: 4 },
//   { name: 5, value: 5 }
// ]

const car = [
  { name: "xxxxx" },
  { name: "yyyyyy" },
  { name: "zzzzz" },
];

car.map((product) => {
  car.price = 100;
});

The above code is not a recommended way, If you don’t use the return value of map(), use forEach() or a for…of loop instead.

You can able to write map function in single line and it returns the value also, without using the return keyword.

let employees = [
    {
        "id": 764,
        "name":"xxxx",
        "salary":73400
    },
    {
        "id": 2345,
        "name":"yyyyy",
        "salary":34000
    },
    {
        "id": 5454,
        "name":"zzzz",
        "salary":56700
    }]
let getIdOnly = employees.map(employee => employee.id)
console.log(getIdOnly) //[764,2345,5454]

If any empty items or empty strings was present in the array list means the return value should be like this.

let arr = [1, 2, 3, '', 4, 5];
arr[9] = 89;

let res = arr.map((item) => item * 2);

console.log(arr) //[ 1, 2, 3, '', 4, 5, <3 empty items>, 89 ]
console.log(res) //[ 2, 4, 6, 0, 8, 10, <3 empty items>, 178 ]


let arr = [1, 2, 3, '', 4, 5];
arr[9] = 89;

let res = arr.map((item) => item + 'a');

console.log(arr) //[ 1, 2, 3, '', 4, 5, <3 empty items>, 89 ]
console.log(res)// [ '1a', '2a', '3a', 'a', '4a', '5a', <3 empty items>, '89a' ]

For manually entered empty strings a callback function invoked, but the javascript generated empty items a callback is not triggered