In this post, I’ll go over how to use JavaScript’s array map() method. I’ll also be showing you how to create your own map() method from scratch to better understand how it works.

All JavaScript arrays have a map method attached to it. This method is used to iterate over an array and return a new array once the iteration is complete.

Example

The map() function takes in an anonymous function as an argument. This anonymous function will have three parameters. They are the currentValue, index and array. The currentValue is the current element being processed in the array. The index is the index of the current element being processed. The array parameter will be the array being iterated on. The index and array parameters are optional.

Below is a small example using map() to iterate through an array of numbers and multiplying each number by 2.

const nums = [1, 2, 3, 4, 5]
const nums2 = nums.map(num => num * 2) // returns [ 2, 4, 6, 8, 10 ]

Array Data

We will be working with an array of movie objects for our examples.

const movies = [
  {
    id: 7011,
    title: 'Avengers: End Game',
    rating: 8.3
  },
  {
    id: 6543,
    title: 'The Avengers',
    rating: 7.7
  },
  {
    id: 67699,
    title: 'Avengers: Infinity War',
    rating: 8.3
  },
  {
    id: 6754,
    title: 'Avengers: Age of Ultron',
    rating: 7.3
  }
];

Task 1: Use the map method to return an array of the movie id’s

For this task, we will create a const called ids and map through the movies array. We call map() on our movies array then inside the map function, we pass a callback function as the argument for map(). In our return statement, we will return the movie.id

const ids = movies.map((movie, i) => {
  return movie.id;
}); // returns [ 7011, 6543, 67699, 6754 ]

Task 2: Use the map method to return an array of movie objects with the { id, title} pair

This task will be very similar to Task 1. The only difference is what we actually return inside our callback function. In our return statement, we return an object with the { id, title } key value pair

const idTitlePair = movies.map(movie => {
  return { id: movie.id, title: movie.title };
});

/*
[ { id: 7011, title: 'Avengers: End Game' },
  { id: 6543, title: 'The Avengers' },
  { id: 67699, title: 'Avengers: Infinity War' },
  { id: 6754, title: 'Avengers: Age of Ultron' } 
]
*/

Task 3: Create your own map() method mapCopy()

For this task, we will create a new function on the Array.prototype object. Doing this will allow us to use our newly created map function on all arrays. We will name our function mapCopy.

First, we will create the mapCopy function on the Array.prototype and give it a parameter named callback.

Array.prototype.mapCopy = function(callback) {
  
};

Next, we will create a variable called results which will be the array we return after iterating over the original array.

Array.prototype.mapCopy = function(callback) {
  let results = [];
 
};

Now we will create a for loop to iterate over the array we are calling our mapCopy() function on. We will be using the keyword this to refer to the array we are iterating over.

Array.prototype.mapCopy = function(callback) {
  let results = [];
  for (let i = 0; i < this.length; i++) {

  }

};

Next, we will take the callback parameter and invoke it with this[i] and i as arguments. Then we will take that callback and push it into our results array.

Array.prototype.mapCopy = function(callback) {
  let results = [];
  for (let i = 0; i < this.length; i++) {
    results.push(callback(this[i], i));
  }

};

Lastly, we will return our results array.

Array.prototype.mapCopy = function(callback) {
  let results = [];
  for (let i = 0; i < this.length; i++) {
    results.push(callback(this[i], i));
  }

  return results;
};

Happy Coding !

#javascript #js