A Beginner’s Guide to Arrow Functions in ES6: Part 2

Back to the basics with .map() in JavaScript

3 min readJun 8, 2018

(Hi! If you value the content I write, I would appreciate so much if you considered becoming a member of Medium through my referral link. Now on to what you came here for…)

A stop on the map()

One of the biggest challenges in learning something technical is grasping new terminology. MDN can prove difficult for newbies like myself to interpret, so I want to revisit the map() method on our tour of arrow functions to see if we can put it in more human — beginner — terms.

What is the map() method?

According to MDN: “The map() method creates a new array with the results of calling a provided function on every element in the calling array.”

Breaking it down.

Let’s say we were given an array of winners of the most recent Van Cliburn Piano Competition and we wanted to create an object literal — or a list of name-value pairs separated by commas and wrapped in curly brackets — showing the winners’ names, their place (first, second, third), along with the name of the competition.

We can do this by iterating over the array of winners with map().

Example:

Before jumping into the ES6 syntax, let’s break it down in ES5.

Given:

const competition = 'Van Cliburn';
const winners = ['John Johnson', 'Sarah Sarita', 'Beverly Beverton'];

We could do the following:

const win = winners.map(function(winner, i) {
  return {
      name: winner,
      competition: competition,
      place: i + 1
  }
})console.log(win);// Returns:
0:{name: “John Johnson”, competition: “Van Cliburn”, place: 1}
1:{name: “Sarah Sarita”, competition: “Van Cliburn”, place: 2}
2:{name: “Beverly Beverton”, competition: “Van Cliburn”, place: 3}

Note: You can also use console.table(win) to get the object returned as a table:

So what is happening here?

Referencing MDN again, map() takes a callback which is a “Function that produces an element of the new Array, taking three arguments.”

In this example, we’re only going to look at the first two arguments.

currentValue — The current element being processed in the array.
index (optional) — The index of the current element being processed in the array.

To put it visually, in our example the currentValue and index of the array could be displayed as:

currentValue / element    
'John Johnson'
'Sarah Sarita'
'Beverly Beverton'index
0
1
2

Callbacks? Arguments?

We are passing two arguments to our callback, or function:

winner, which is the currentValue, or current element of the array being processed, and;
i, which is the current index.

In our function, winner is one of the arguments, representing each element, or the currentValue. To show the connections between them all:

currentValue/element/argument/winner
'John Johnson'
'Sarah Sarita'
'Beverly Beverton'

To clarify, currentValue, element, argument and winner are not the same thing. They are only referencing the same thing from different places in the function.

Converting it to ES6:

ES5:
const win = winners.map(function(winner, i) {
  return {
      name: winner,
      competition: competition,
      place: i + 1
  }
})ES6:
1. Replace 'function' with the fat arrow and move it after the arguments.
2. Remove the word 'return'.
3. Because we are returning an object we need to place parenthesis around the brackets.const win = winners.map((winner, i) => ({ name: winner, competition: competition, place: i + 1 }))