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.
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 ]
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
}
];
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 ]
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' }
]
*/
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