Javascript Array Map

Javascript Array Map

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Javascript map() is a function that works the same as a traditional for loop but with benefits. So what’s different?

Multiplying by two

Let’s say we want to loop over an array of numbers and multiply them by 2. Here’s our array:

const data = [4, 8, 15, 16, 32, 42];

How would we multiply each number? A traditional for loop would look like this:

function multiplyByTwo(arr) {
  // We create an empty array for future storage
  let newArr = []; 

  // Looping through the given array (const data), iterating through each item
  for (let i = 0; i < arr.length; i++) { 
    // Each iteration gets multiplied by two and pushed into the empty array
    newArr.push(arr[i] * 2); 
  }
  // Returning the array that now contains the new items pushed into it in the for loop
  return newArr; 
}
// Calling our function with the data array
console.log(multiplyByTwo(data)); 

// Returns an array of numbers multiplied by two
// [8, 16, 30, 32, 64, 84]

Using map, there’s no need for a for loop as map does the looping for us. This shortens the code:

function multiplyByTwo(arr) {
  return arr.map(function(num) { 
    return num * 2;
  })
}

console.log(multiplyByTwo(data));

// Returns an array of numbers multiplied by two
// [8, 16, 30, 32, 64, 84]

ES6 provides further shorthands. There’s no need to write function and returns. 7 and 5 lines (first and second function respectively) have been reduced to 1 line:

// This does exactly the same as the previous function
const multiplyByTwo = data.map(num => num * 2)

Take an array of numbers and convert them to strings

Of course we can just as easily convert our numbers into strings using map.

function convertToString(arr) {
  return arr.map(function(num) { 
    return num.toString();
  })
}

console.log(convertToString(data));

// Returns an array of strings
// ["4", "8", "15", "16", "32", "42"]

And with ES6:

const convertToString = data.map(num => num.toString()) 

// Returns an array of strings
// ["4", "8", "15", "16", "32", "42"]

• Kenny