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.

Advertisements

About Andras Nemes
I'm a .NET/Java developer living and working in Stockholm, Sweden.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

ultimatemindsettoday

A great WordPress.com site

Elliot Balynn's Blog

A directory of wonderful thoughts

Robin Sedlaczek's Blog

Developer on Microsoft Technologies

HarsH ReaLiTy

A Good Blog is Hard to Find

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

the software architecture

thoughts, ideas, diagrams,enterprise code, design pattern , solution designs

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

Anything around ASP.NET MVC,WEB API, WCF, Entity Framework & AngularJS

Cyber Matters

Bite-size insight on Cyber Security for the not too technical.

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: