javascript
  1. javascript-map
PreviousNext

JavaScript map()

The map() method in JavaScript creates a new array with the results of calling a provided function on every element in the source array. In other words, this method iterates over the elements of an array and returns a new array containing the results of a callback function that is executed for each element.

Syntax

The syntax for using the map() method is as follows:

var newArray = array.map(callback(currentValue[, index[, array]]) {
  // return element for newArray, after executing something
}[, thisArg]);
  • newArray is the new array that is returned by the map() method.
  • array is the source array for the map() method.
  • callback is the function that will be executed on every element of the array.
  • currentValue is the current element that is being processed by the callback.
  • index (optional) is the index of the current element being processed in the array.
  • array (optional) is the source array that is being processed.
  • thisArg (optional) is the value to be passed as 'this' when executing the callback function.

Example

Here is a simple example that illustrates the use of the map() method:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array Map Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Array
    var numbers = [1, 4, 9];

    // Use map to apply Math.sqrt to each element and create a new array
    var roots = numbers.map(Math.sqrt);

    // Display the resulting array in HTML
    document.getElementById("output").innerHTML += "Roots: " + roots.join(', ');
</script>

</body>
</html>
Try Playground

In this example, the map() method is called on the numbers array and the Math.sqrt() function is passed as a callback. The Math.sqrt() function takes a number argument and returns its square root. The map() method applies the Math.sqrt() function to each element of the numbers array and returns a new array containing the square roots of the numbers.

Output

The map() method returns a new array containing the result of the callback function applied to each element of the source array. If the callback function returns a value, it is stored in the new array. If the callback function returns undefined, no new element is added to the new array.

Explanation

The map() method creates a new array populated with the results of the callback function for each element in the source array. It does not modify the original array. The callback function is executed on each element, and the result is stored in the new array. The map() method can be used to transform an array into a different structure, or to apply a function to each element of an array.

Use

The map() method can be used to perform a variety of operations on an array, such as:

  • Transforming elements of an array into a new structure
  • Filtering elements of an array based on some condition
  • Executing a function on each element of the array to generate a new value

Important Points

Here are some important points to keep in mind when using the map() method:

  • The map() method does not modify the original array; it creates a new one.
  • If the callback function returns undefined, no element is added to the new array.
  • If the callback function modifies the this object, the result is unpredictable.
  • Arrow functions are typically used as callbacks for the map() method, as they are concise and easy to read.

Summary

The map() method in JavaScript creates a new array with the results of calling a provided function on every element in the source array. It is a versatile method that can be used to transform the elements of an array into a new structure, filter elements based on some condition, or execute a function on each element of the array to generate a new value. The map() method does not modify the original array; it creates a new one.

forEach()filter()
Published on: