SoFunction
Updated on 2025-02-28

Detailed steps on how to iterate arrays using map in JavaScript

Introduction

From the classicforLoop toforEach()Methods, JavaScript has various techniques and methods for traversing data sets. One of the most popular methods is.map()method..map()Create an array by calling a specific function on each item of the parent array..map()is a non-mutated method that creates a new array, not a mutated method, which only changes the calling array.

This method can have many uses when working with arrays. In this tutorial, you will learn about JavaScript.map()Four notable usages of  : calling functions for array elements, converting strings into arrays, rendering lists in JavaScript libraries, and reformatting array objects.

Prerequisites

This tutorial does not require any coding, but if you are interested in following the example, you can use REPL or browser developer tools.

  • To install locally, follow the steps in How to Install and Create a Local Development Environment.

  • Chrome DevTools is available by downloading and installing the latest version of Google Chrome.

Step 1 - Calling the function on each item in the array

.map()Accept the callback function as one of its parameters. An important parameter of the function is the current value of the item being processed by the function. This is a required parameter. With this parameter, you can modify each item in the array and return it as a modified member of the new array.

Here is an example:

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = (sweetItem => {
    return sweetItem * 2
})

(sweeterArray)

This will record the following output in the console:

[ 4, 6, 8, 10, 70 ]

This can be further simplified to make the code clearer:

// Create a function to useconst makeSweeter = sweetItem => sweetItem * 2;

// We have an arrayconst sweetArray = [2, 3, 4, 5, 35];

// Call the function we created.  More readableconst sweeterArray = (makeSweeter);

(sweeterArray);

The same output will be recorded in the console:

[ 4, 6, 8, 10, 70 ]

picture(makeSweeter)Such code makes your code easier to read.

Step 2 - Convert strings to arrays

.map()It is considered to be an array prototype. In this step, you will use it to convert the string to an array. Here, you are not developing the method for strings. Instead, you will use a special.call()method.

In JavaScript, everything is an object, the method is a function attached to those objects..call()Allows you to use the context of one object on another object. So you will copy on the string.map()The context of   and passed to.call()Function parameters of the method.

Here is an example:

const name = "Sammy"
const map = 

const newName = (name, eachLetter => {
    return `${eachLetter}a`
})

(newName)

This will record the following output in the console:

[ "Sa", "aa", "ma", "ma", "ya" ]

Here you used the string.map()The context and passed.map()Arguments of the desired function.

This is similar to a string.split()Method, just that each individual string character can be modified before returning the array.

Step 3 - Rendering a list in the JavaScript library

JavaScript libraries like React use.map()To render the list. However, this requires JSX syntax because.map()Methods are wrapped in JSX syntax.

Here is an example of a React component:

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

const names = ["whale", "squid", "turtle", "coral", "starfish"];

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

const rootElement = ("root");
(<NamesList />, rootElement);

This is a stateless component in React that renders a listdiv. use.map()IterationnamesArrays to render separate list items. This component is rendered using ReactDOM to haveIdforrooton the DOM element.

Step 4 — Reformat the array object

.map()can be used to iterate over objects in an array, and similar to traditional arrays, modifying the contents of each individual object and returning a new array. This modification is based on the content returned in the callback function.

Here is an example:

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = (item => {
    const container = {};

    container[] = ;
     =  * 10;

    return container;
})

(usersByLikes);

This output is recorded in the console:

[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

Here you use square brackets and dot notation to modify each object in the array. This usage can be used to process or compress the received data before it is saved or parsed by the front-end application.

in conclusion

In this tutorial, we introduce JavaScript.map()Four usages of the method. Combined with other methods, it can be extended.map()Functions. For more information, please refer to ourHow to use array methods in JavaScript: Iterative methods"article.

This is the end of this article about how to iterate arrays using map() in JavaScript. For more related JS content using map() to iterate arrays, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!