JavaScript Array map: Transforming Array Elements

The Javascript map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. Generally, the map() method is used to iterate over an array and calling function on every element of the array.

Syntax:

array.map(function(currentValue, index, arr), thisValue)

Parameters: This method accepts two parameters as mentioned above and described below:

function(currentValue, index, arr): It is a required parameter and it runs on each element of the array. It contains three parameters which are listed below:
- currentValue: It is a required parameter and it holds the value of the current element.
- index: It is an optional parameter and it holds the index of the current element.
- arr: It is an optional parameter and it holds the array.
thisValue: It is an optional parameter and is used to hold the value passed to the function.

Return Value: It returns a new array and elements of arrays are the result of the callback function. https://b0f73131aac8502a007e2c0cc573e8d8.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html

The below examples illustrate the use of the array map() method in JavaScript:

Example 1: This example uses the array map() method and returns the square of the array element.

<script>
    var arr = [2, 5, 6, 3, 8, 9];
    var newArr = arr.map(function(val, index) {
        return { 
            key: index, 
            value: val*val
        };
    })
    console.log(newArr)
</script>

Output:

Example 2: This example uses the array map() method to concatenate the character ‘A’ with every character of the name.

<script>
    var name = "Pankaj";
    // New array of character and names
    // concatenated with 'A'
    var newName = Array.prototype.map.call(name, function(item) {
            return item + 'A';
        });
    console.log(newName)
</script>

Output:

['PA', 'aA', 'nA', 'kA', 'aA', 'jA']

Example 3: This example uses the array map() method to return the square of array elements.

<script>
    // Map is being called directly on an array
    // Arrow function is used
    console.log([6, 7, 4, 5].map((val) => { return val*val; }))
</script>

Output:

36, 49, 16, 25

Supported Browsers: The browsers supported by the JavaScript Array keys() method are listed below:

Google Chrome 38.0
Microsoft Edge 12.0
Mozilla Firefox 28.0
Safari 8.0
Opera 25.0

JavaScript Array map: Transforming Array Elements

Recommended Posts