How to Use .map() in JavaScript

JavaScript supports several methods for iterating over arrays. Developers commonly use the traditional for loop and the less common .forEach() method. However, the most popular method is .map(). This method creates a new array by calling a function on every element of the original array. It avoids mutations and generates truly "clean" arrays. 

This is different from mutation-based methods, which inevitably alter the original array in some way. In this article, we'll explore four ways to use .map() in JavaScript (though many more exist).

Method 1: Calling Functions on Individual Array Elements

Copy link

When using .map() in JavaScript, the callback function is treated as an argument. The value of the array element at the time of execution becomes a required parameter of this function. You can use it to modify or create functions.

Example:

const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2;
});
console.log(sweeterArray);

Output:

[12, 14, 22, 26, 40]

You can clean up and simplify the code:

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Output:

[12, 14, 22, 26, 40]

Using sweetArray.map(makeSweeter) makes the code more readable compared to the first version.

Method 2: Converting Strings to Arrays

Copy link

You can use the .map() method from the Array prototype to convert strings. Instead of working directly with arrays, we use .call() to apply .map() to a string. Keep in mind that in JavaScript, strings can be treated like arrays of characters, allowing access to some array methods.

Example:

const name = "Hostman";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
    return `${eachLetter}e`;
});
console.log(newName);

Output:

["He", "oe", "se", "te", "me", "ae", "ne"]

In this example, .map() is used to transform each character in the string by appending an "e". This works similarly to .split() and other methods that operate on string characters before transforming them back into an array.

Method 3: Rendering Lists in JavaScript Libraries

Copy link

This use case is common in JavaScript frameworks like React. Here, you’ll need JSX syntax since .map() is used within it. For example:

import React from "react";
import ReactDOM from "react-dom";

const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}>{name}</li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

In this example, the React component renders a <div> containing a list. The JavaScript .map() method is used to iterate over the array of names and generate individual list items. Rendering is handled by ReactDOM.render on a DOM element with the ID root.

Method 4: Transforming Array Object Formats

Copy link

Another use case for .map() in JavaScript is transforming each object in an array and returning a new array of modified objects. This works much like traditional data processing.

Example:

const myUsers = [
    { name: 'cloud', likes: 'scalability' },
    { name: 'devops', likes: 'automation' },
    { name: 'kube', likes: 'orchestration' }
];
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.popularity = item.name.length * 12;
    return container;
});
console.log(usersByLikes);

Output:

[
  { cloud: 'scalability', popularity: 60 },
  { devops: 'automation', popularity: 72 },
  { kube: 'orchestration', popularity: 48 }
]

In this example, each object in the array is modified using bracket notation and object property assignments. This approach is useful for transforming and condensing incoming data before using it in client-side applications.

Conclusion

Copy link

We reviewed four main ways to use the .map() method in JavaScript. You can expand its capabilities by combining it with other methods. For more detailed information, refer to the official documentation.