April 2020

JavaScript ES6: The map() Helper

In JavaScript ES6, we use the map() helper when we want to modify a list of data. When map() is finished running, it creates and populates a new array with the results.

In ES5, we would need to use a for loop to iterate over the array and push the results to a previously created empty array.

var numbers = [1, 2, 3];
var doubledNumbers = [];

for( var i = 0; i < numbers.length; i++ ) {
  doubledNumbers.push(numbers[i] * 2);
}

console.log(doubledNumbers); // [2, 4, 6]

As with all the ES5 examples, there’s nothing wrong with the for loop. It’s just a bit messy for a number of reasons:

  • Lots of different elements of code.
  • Prone to typos.
  • Semicolons between each element which is uncommon in JS syntax.
  • The more logic in a single line of code the more difficult it is for future developers to understand what’s going on.
  • Need to declare an empty array to catch the results.

“Hey Jonathan, you don’t actually need to create a new empty array. Just modify the existing array!” I hear you argue.

Yep, you’re right! We don’t need to but you should. We could have done this.

var numbers = [1, 2, 3];

// We could do this, but try not to.
for( var i = 0; i < numbers.length; i++ ) {
  numbers[i] = numbers[i] * 2;
}

In JavaScript applications, especially larger complex applications, we want to avoid mutating or changing data whenever possible. If we change the numbers in our numbers array, that would be changing or mutating data.

If we had been using the numbers array in other parts of our application we would start seeing weird bugs in those areas of the application since our numbers array which was [1,2,3] is now [2,4,6].

Anyway, I digress. Let’s see how the code would work with the map() helper.

var numbers = [1, 2, 3];

// New map helper.
var doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6]

A bit more readable than the for loop, don’t you think?

Each number in the numbers array is being passed into the anonymous function and whatever this function returns, returns a new array. So with the map() helper we have two arrays. Our original array and we have a new array that was created from our map() helper.

The key point is that we’re not mutating the existing array. The map() helper is creating a brand new array.


It is worth noting that the return key used is necessary when using the map() helper. If you don’t return the result then it’s going to return null.

var doubled = numbers.map(function(number) {
  number * 2;
});
console.log(doubled); // [null,null,null]

map() with Objects

Let’s try out a more complicated example with map(). This is something that you’ll see happen very frequently with JavaScript frameworks such as Angular and React.

You can make an array of cars and each car we’re going to say is going to be an object. The object is going to represent the different properties that a car might have.

var cars = [
  { model: 'Volkswagen', price: 'Cheap' },
  { model: 'Porsche', price: 'Expensive' }
];

One of the most common uses of map() that we’re going to be looking at is to collect properties off of an array of objects.

So let’s say that I want to iterate over my car’s array and I want to find the prices of each car in here.

I don’t really care about the model. I just want to kind of get a better idea of what are the different prices that I have for all the different objects in the array.

Let’s see how we might approach this by using the map() helper to make a new array called prices.

var cars = [
  { model: 'Volkswagen', price: 'Cheap' },
  { model: 'Porsche', price: 'Expensive' }
];

var prices = cars.map(function(car) {
  return car.price;
});

console.log(prices); // [‘Cheap’, ‘Expensive’]

Now we have created a log of only the specific data we wanted, the prices of the cars.

This is what’s typically referred to as a pluck because we’re plucking a particular property off of each object in the array.


Continue Reading

  • September 2019

    Next-gen Images: Page Speed’s New Best Friend

    Converting your images to a next-gen image format, like WebP, is one of the best ways to improve the user’s experience and page speed on your website.

  • Robots blog banner

    July 2020

    Using robots.txt to prevent staging sites from indexing

    Going over the basics of the robots.txt and the solution to prevent your staging site from being indexed.

  • April 2020

    CodePen Challenge: Image Hovers

    This week's challenge prompt was to design a hover effect for an image. I created a simple effect that will jiggle the jelly when it is moused over!

  • November 2019

    Friday wins much coveted Best Website Award at the Spiders

    Our award-winning team here at Friday are proud to announce that we have won the much-coveted ‘Best Website’ Award at the annual Spider Awards.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now