JavaScript ES6 – Array map method

JavaScript array map() is a method that exists on the Array.prototype and was introduced in ECMAScript and is supported in all modern browsers.

JavaScript array map() method allows us to loop thru an array, access each value in each iteration and return changed or copied values in form of a new array.

Think of JavaScript array map() method as: “I want a new array containing new copies, or changes, of each array element”.

array map() parameters

JavaScript array map() method consists of following parameters:

  • value – value of current element per iteration
  • index – index of current element (starts from zero)

Let’s see how we can use map methods and parameters with examples:

        
          let arr = [3, 5, 6, 8, 23, 11];

let newArr = arr.map((value) => {
  return value * 2
});

console.log('arr', arr)
console.log('newArr', newArr)

// OUTPUT
// arr [3, 5, 6, 8, 23, 11]
// newArr [6, 10, 12, 16, 46, 22]        
      

Note: keep in mind our old array arr is untouched in this case, we simply copied it’s values, multiplying each value by 2 return value * 2 and storing new values inside newArr new array.

map() on objects array

We can perform really complex operation using JavaScript array map() method. One of most use cases of array mapping is using in objects array.

Let’s see an example for mapping an object array:

        
          let people = [
  {
    name: "John",
    age: "16",
  },
  {
    name: "Mary",
    age: "30",
  },
  {
    name: "Jaine",
    age: "23",
  }
]

let adults = people.map((person) => {
  if (person.age > 20) {
    return person;
  }
});
console.log(adults)

// OUTPUT
// [false, true, true]        
      

In above example we are checking if person.age is bigger than 20, then we consider that person to be an adult.

As result only 2 people are returned true as adults. Notice JavaScript map method only returned the condition person.age > 20 result rather than actual object values.

It’s because JavaScript map() method is only used to iterate an array evaluate or check each value and return the result of evaluation as new array. But you can use JavaScript filter method to evaluate an array and return the value of array as new array.

array map() shorthand syntax

Since we are using JavaScript arrow function we can use shorthand syntax to map() an array:

        
          let arr = [3, 5, 6, 8, 23, 11];
let newArr = arr.map((value) => value * 2);
console.log(newArr)

// OUTPUT
// [6, 10, 12, 16, 46, 22]        
      

array map() usage and tips

Here are few tips you need to know when considering using JavaScript array map() method:

  • Use map() to create a new array with changed values for initial array
  • It performs soft copy your object/array references into the new array
  • Don’t forget to return the values otherwise it will be undefined
  • Empty array slots will be skipped when using arr.map()
  • You cannot perform reverse or break using map() method. use for...in or for...of instead.
%d bloggers like this: