Sweta Agarwalla's Blog
.map() method in JavaScript

.map() method in JavaScript

Sweta Agarwalla's photo
Sweta Agarwalla
·

3 min read

Table of contents

Introduction

Sometimes all we want to do is run a procedure on an array and alter each element in the array in the same way.

We only want to update the array's elements to obtain an array of modified elements; we don't want to add or remove any members from the array. The .map() method can be used to accomplish this.

.map() method

The .map() method in JavaScript is a useful tool that gives developers the ability to handle arrays and modify the data they contain without changing the original array. When working with big databases or when doing complex array operations, this method is especially helpful.

A new array containing the results is returned by the .map() method, which applies a callback function to each element of an array. The callback method is given three arguments: the original array, the index of the element now being processed, and the current element.

The basic syntax for using .map() is as follows:

array.map(function(currentValue, index, array) {
  // Manipulate currentValue here
  return manipulatedValue;
});

Parameters

Callback Function

This is a function to run on each element of the array. Its return value is inserted into the new array as a single element.

The Callback function receives three arguments:

  1. currentValue:

    This is the value that is currently being processed in the array.

  2. index:

    This is the index of the element which is currently being processed (currentValue).

  3. array:

    This is the array on which the .map() method is called upon.

Examples

Let's take a look at an example to see how the .map() method can be used in practice.

  • Suppose we have an array of numbers that we want to square:
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = arr => arr.map(num => num * num)
console.log(squaredNumbers(numbers));
// Output: [1, 4, 9, 16, 25]

In this example, we use .map() to apply a function to each element of the numbers array. The function takes each number, squares it, and returns the result. The new array is then created with the squared values when the array is passed in the function.

The fact that the .map() method returns a new array without changing the original one is one of its many advantages. It is a great option for dealing with data without modifying the original dataset because of this.

In short, it produces a new array rather than changing the original one and avoids mutation of the array.

  • When we want to extract a certain value from an array of objects, we may also use .map(). For example, let's say we want to extract the names of the items in an array that represent people:
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const names = arr => arr.map(obj => obj.name)
console.log(names(people));
// Output: ['Alice', 'Bob', 'Charlie']

In this example, we use .map() to create a new array that contains only the names of the people in the original array.

Conclusion

JavaScript's .map() function is a potent tool for array manipulation and data transformation. It gives developers the flexibility and efficiency to work with data, generating new arrays without changing the original data. With its ability to apply a callback function to each element of an array, the .map() method is a key tool for any JavaScript developer.

JavaScriptmap in jsmap