Using the map array helper in ES6

ES6 comes with a number of helper methods that can be applied to arrays. One of these is called map which can transform each element in an array and produce a new array from those transformed elements. If you’re familiar with C# and LINQ then the map function is very similar to the Select LINQ extension method.

Here’s an example to iterate through an array of integers and collect their squared values into a new array:

var numbers = [1, 2, 3, 4, 5, 6]

var squares = numbers.map(function(number) {
  return number * number
});

Map accepts a function which in turn operates on a single member of the array which map is applied to. Map iterates through each member in the array and calls the function that was provided to it. The function must return a value otherwise the result, “squares” in this case will contain null values only. The value returned from the map function is added to the squares array:

[1,4,9,16,25,36]

In the next example we pretend that have 3 properties for each programmer in a CSV file. We then want to build better looking JSON objects from these elements:

var csvs = [['John', 20, 'C#'], ['Mary', 24, 'Java'], ['Jane', 25, 'C++'], ['Peter', 25, 'JavaScript']]

var objects = csvs.map(function(csv) {
  return {'name': csv[0], 'age': csv[1], 'language': csv[2]}
});

objects will contain the following elements:

[{"name":"John","age":20,"language":"C#"},{"name":"Mary","age":24,"language":"Java"},{"name":"Jane","age":25,"language":"C++"},{"name":"Peter","age":25,"language":"JavaScript"}]

View all posts related to JavaScripts here.