JavaScript: Array#Map()

Lemuel Uhuru
Apr 25, 2018 · 2 min read
Image for post
Image for post

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store