Stella Wanja's Blog
A guide to using JavaScript array map method

A guide to using JavaScript array map method

Stella Wanja's photo
Stella Wanja
·

3 min read

The array map method is one of the techniques that is used to iterate through datasets in JavaScript. In this article, we will explore how it works and take a look at some examples.

The Array Map Method: What is it?

The array map method executes a callback function on every element from an array and returns a new array. It does not mutate or change the original array. The syntax is as follows:

array.map(callback(currentValue, index, arr), thisVal);

The callback function is called for every single element of array, and it takes in the following arguments:

  • The currentValue, which is the value of the current element being processed in the array, and is a required argument.

  • index, which is the index of the current element being processed in the array and is an optional argument.

  • arr, which is the array the current element belongs to, and is an optional argument.

  • thisVal, which is the value to be passed to the function to be used as its this value. If this argument is empty, the value undefined will be used as its this value. To read more on the this keyword, feel free to check out this article here.

Let's take a look at some of the examples now, shall we?

1. Calling a Function on Each Item in an Array

Let's say we have an array such as this:

const arr = [1,3,5,10];

We can call a function on every element of the array as shown below, with num as the currentValue. Remember that the callback function will be called upon every single element of the array.

const newArr = arr.map(num => {
    return num * 2;
});

console.log(newArr); // return [2,6,10,20]

This can also be written as

//function
const arrFunction = num => num * 2;

const arr = [1,3,5,10];

//array map method
const newArr = arr.map(arrFunction);

console.log(newArr); //return [2,6,10,20]

2. Mapping over an array of objects

The map array method can also be used to map over an array of objects. For example, let's say we have an array of objects such as this:

const list = [
     {author : "Stephen King", book: "Shining"},
     {author : "J.R.R.Tolkien", book: "Lord of the Rings"},
     {author : "Paulo Coelho", book: "The Alchemist"}
 ];

To access books only, we can do so as shown below.

const books = list.map( item => {
     return item.book;
});

console.log(books);  //["Misery", "Lord of the Rings", "The Alchemist"]

Let's take a look at another example. Let's say we have an array of objects such as this:

const list = [
     {shop: 'One', numberOfBooks: 5, price: 35},
     {shop: 'Two', numberOfBooks: 2, price: 50},
     {shop: 'Three', numberOfBooks: 7, price: 25}
];

To attain the total value of each shop, we can easily use map as shown.

const totalValue = list.map( item => {
     return item.numberOfBooks * item.price;
});

console.log(totalValue); //[175, 100, 175]

Conclusion

In this article, we have been able to look through a few cases of how to implement the map array method, which can be a powerful tool especially when combined with other methods such as filter.

JavaScripthashnodebootcampTutorial#codenewbies2Articles1Week