JavaScript: Array#Map()

Lemuel Uhuru
Apr 25, 2018 · 2 min read

Method Definition:

The map() method loops over an existing array and applies a callback function to each element, returning a new array containing the results of each iteration.

Method Parameters:

The map() method, similar to the filter() method, accepts a required callback function as its first parameter and an optional ‘this’ value as its second.

The callback function accepts the current element, index, and existing array, as the first, second, and third parameters respectively.

For Example:

function(currentElement, index, array) {} //callback func signature

Method Return Value:

The map() method returns a new array containing elements whose value resulted from applying the callback function to the initial array.

Example Data:

Let’s populate an array of article objects containing 3 properties, a title, an author, and the article body. In a real world application, you might want to iterate over an array of articles to perform some operation on each object before rendering it as a list on a web page.

const articles = [{ title: "how to get away with murder", author: "John Bonzi", article_body: "You can't. Don't do it." },{ title: "how to get popular on instagram", author: "Kelly Richards", article_body: "Post selfies and twerk." },{ title: "how to play basketball", author: "Matt Logi", article_body: "Be tall and jump really high." },{ title: "how do birds fly", author: "Tim David", article_body: "They flap their wings." },{ title: "how to ski", author: "Jennifer Gonzales", article_body: "Try not to hit the trees." },];

Example Problem:

In this example, we want to loop over an array of objects, capitalizing the first letter of each title before rendering it to the page. Python has a string method that does this for us out of the box called Capitalize(). However, we will need to implement it ourselves in JavaScript.

// Create function to capitalizefunction capitalize(str) {
let upperCaseLetter = str.charAt(0).toUpperCase();
let partialWord = str.slice(1);
return upperCaseLetter + partialWord;
}
articles.map(article => {
return capitalize(article.title);
});

> [ 'How to get away with murder',
'How to get popular on instagram',
'How to play basketball',
'How do birds fly',
'How to ski' ]

Conclusion:

I hope you have gained a better understanding of how to use the filter method through a potential real world application. If you enjoyed this tutorial, please feel free to clap a few times and check out some of my other articles. Until next time, be well : ).

DevGenie

Access tutorials on Web Development, Blockchain, Chatbots, and more.

    Lemuel Uhuru

    Written by

    DevGenie

    DevGenie

    Access tutorials on Web Development, Blockchain, Chatbots, and more.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade