Map method in JavaScript was introduced with ES-5. This is third article on JavaScript Arrays. If you haven’ t read first and second, please do. First two articles were little longer than we expected, so we will try to keep this one short.
According to MDN: The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. If this sound little bit complicated, please take a look to the example below.
/*
Let' s create our array
*/
const n = [2, 4, 6, 8, 10];
/*
map method requires callback function
that will be ran agains every element
in the provided array.
There are two ways to specify callback
function. First, we can specify it inside
map method itself, or we can create separate
function and provide this function to map
method.
*/
//Provide function inside map method
/*
We create variable r that will hold
returned array. Then we run map
against const n. Our callback function
is simple arrow function that multiplies
every item from const n by 2.
*/
const r = n.map(item => item * 2);
console.log(r);
//Output: [4, 8, 12, 16, 20]
//Create separate function and pass it to map
/*
Second example does the same as first.
Difference is that in second example we provide
separate function and pass it to map.
This is better way in terms that you can reuse
function on multiple places
*/
const s = n.map(multiply);
function multiply(item) {
return item * 2;
}
console.log(s);
//Output: [4, 8, 12, 16, 20]
Map method iterates over an array, just like any loop, and give you access to current item, current index and current array. In real world we will probably end up using map with some more complicated cases than multiply two numbers, so let’ s try that.
/*
We will create array of objects.
This object will hold info about
items from shop.
*/
const shopItems = [
{
id: 223,
sku: 20,
price: 2
},
{
id: 224,
sku: 44,
price: 10
},
{
id: 225,
sku: 2,
price: 1
},
{
id: 226,
sku: 5,
price: 5
}
];
/*
We will use map method to
check how much money we can
earn from each item left in
storage.
We will return array of object with
IDs and total money.
*/
const money = shopItems.map(checkTotal);
function checkTotal(item) {
let r = {id: item.id, total: item.sku*item.price};
return r;
}
console.log(money);
/*
Output:
[
{
id: 223,
total: 40
},
{
id: 224,
total: 440
},
{
id: 225,
total: 2
},
{
id: 226,
total: 25
}
]
*/
If you have any questions or anything you can find me on my Twitter, or you can read some of the older articles like How to select element(s) using vanilla JavaScript?