DEV Community

Cover image for Javascript map() function
Atharva Shankar avhad
Atharva Shankar avhad

Posted on • Edited on

Javascript map() function

1. theory

The map method in JavaScript is a method that is used to create a new array from an existing array by applying a callback function to each element in the original array. This allows us to transform the elements in the original array into new elements that are added to the new array.

The general syntax for using the map method is as follows:

const newArray = originalArray.map(callbackFunction);
Enter fullscreen mode Exit fullscreen mode

Here, the callbackFunction is a function that is applied to each element in the original array. This function takes in the current element being processed and returns the new element that should be added to the new array.

For example, if we have an array of numbers and we want to double each number in the array, we can use the map method like this:

const numbers = [1, 2, 3, 4, 5];

// Double each number in the array
const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]
Enter fullscreen mode Exit fullscreen mode

In this example, we pass a callback function to the map method that takes in a number and returns the number doubled. This results in a new array with each number doubled.

The map method is very useful for transforming arrays of data into new arrays that can be used for other purposes, such as creating HTML markup or performing calculations.

2. example

this is gonna be a straightforward names section in react. and to display names, we are gonna use the map() function.

Top comments (0)