array.map

A common problem I have seen is the failure to use built in features of JavaScript. In particular I have seen complex and unwieldy code written to modify an array.

Let's say we want to take an array and modify the values which are then stored in a new array. Sounds pretty straight forward and when I say it like that it sounds like it should be 2 steps.

If we use a standard for loop we get:

var arr = [1, 2, 3, 4];
var newArray = [];
for (var i = 0; i < arr.length; i++) {
    var num = arr[i];
    newArray.push({num: num, sqr: num * num});
}

There is nothing specifically wrong with this code but it has a lot of extra code that has to be written which means there are a lot of steps you have to look at as you read this.

  1. We have to create an empty new array (newArray = []).
  2. We have to initialize an indexing variable (i).
  3. We have to set a condition on the loop (i < arr.length).
  4. We have to say how we are going to modify the index so we can move through the loop (i++).
  5. We create a variable so we don't have to repeatedly get the value of the element in the array at the index location (var num = arr[i])
  6. Then we create the object to store in the new array ({num: num, sqr: num * num}).
  7. Then finally we push the new object onto the new array (newArray.push(...)).

Wait this takes 7 steps instead of 2! How do we make this better?

array.forEach

One way it can be shortened is by using array.forEach which is a built in function that loops through an array. So it would look like:

var arr = [1, 2, 3, 4];
var newArray = [];
arr.forEach(function (num) {
    newArray.push({num: num, sqr: num * num});
});

This gives you a couple things over the other loop. First it is less verbose and by simply using forEach we know that we are looping through the whole array and we don't have to look at the looping rules.

Compared to our previous list of 7 steps we have:

  1. We have to create an empty new array (newArray = []).
  2. We loop through all the element one at a time (arr.forEach(function (num) {...}).
  3. Then we create the object to store in the new array ({num: num, sqr: num * num}).
  4. Then finally we push the new object onto the new array (newArray.push(...)).

We reduced it to 4 steps with step 2 replacing 4 of the steps in the basic loop.

array.map

In both the above examples we are creating a new array based off of an existing array which is something we do regularly. We often do this when we get data from an API call or from the database and have to transform the results into a different format so we can use it internally or so that it matches the format we are sending somewhere else.

In fact this occurs so often that an array prototype function has been created called map.

Using map we get the following code:

var arr = [1, 2, 3, 4];
var newArray = arr.map(function (num) {
    return {num: num, sqr: num * num};
});

With arr.map we loop through the array and run a function on each element using the returned results to build a new element. So we don't need to build an empty array and push each new element to it.

So now we have:
1. We create the new array by looping through all the element one at a time (var newArray = arr.map(function (num) {...}).
2. Then we create the object to store in the new array ({num: num, sqr: num * num}).
3. We return the new object (return ...).

While we didn't reduce the number of steps all the way down to 2 we did get close with only 3 steps one of which is simply returning the object.

So if you aren't already using map when you transform arrays now is a good time to start.

comments powered by Disqus