How to use Array map in JavaScript

JavaScript

In this post, we are going to learn about how to use the Array map in JavaScript that was introduced in ES5. Whenever it comes to modifying the array element We First iterate over the array using for loop and for each loop and modify array elements by applying some operation and returning the modified array it includes many steps. Whereas JavaScript ES5 array.map() method makes it a lot easier.

JavaScript Array.map()

The array.map() method is iterated over the element of the array and modifies elements of the array by applying some operation and returning the modified element as a new array. 

array.map(callback( element[, index[, array]] )[, thisArg])

Parameters

  • Callback: The callback function Call a function on each element of the array and modified all elements, return as modifed elements of array.The callback function takes these three-arguments.
    • Element: it represents the current element.
    • index: It represents the index of the current element.
    • Array: It represents the array on we are calling the find() method.
  • thisarg: It is an optional parameter. It is a value that is used as this while using callback.

Array.map() over for and foreach loop

We have an array that each element wants to multiply by 4 . We are iterating over the array and multiplying each element by 4 and pushing each modified element into an empty result array. Finally printing the modified array on the console.

But its time consuming if we use a loop, by using an array.map() function in JavaScript ES5, we can easily do without looping over the array and clean and shorted code.

let itemarr = [1, 2, 3,4,5,6];

let resarr = [];
const mut = 0;


for(i=0;i<itemarr.length;i++)
{
  muti = (4 * itemarr[i]);  
  resarr.push(muti)
}

console.log(resarr)

Output

[ 4, 8, 12, 16, 20, 24 ]

Use Array.map() over for loop

In this example, we have used an array.map() instead of for loop to iterate and modify the array.

let itemarr = [
    1, 2, 3,4,5,6
];


const mutiArr = itemarr.map(ele => {
    return ele * 4
})

console.log('\n Mutiply array:',mutiArr)


//define a function and call in map function
const itemFun = Item => Item * 4;

const resArr = itemarr.map(itemFun);

console.log('\nMutiply array by passing function:',resArr);

Output

 Mutiply array:[ 4, 8, 12, 16, 20, 24 ]

 Mutiply array by passing function: [ 4, 8, 12, 16, 20, 24 ]

1. Array map on objects

In this example, we are using the array.map() method over iterating over the array of objects and mapping item name with itemprize and creating a new array of objects, printing the newly created array.

let groceries = [
    {
        Itemname: 'Apple',
        prize: 80,
        Quantity:20,
    },
    {
        Itemname: 'Graphes',
        prize: 100,
        Quantity:10,
        
    }   
];


const PrizeArr = groceries.map(e => {
    const prizeArr = {};

    prizeArr['name'] = e.Itemname;
    prizeArr.prize = e.prize * 2;

    return prizeArr;
})

console.log(PrizeArr)

Output

[ { name: 'Apple', prize: 160 }, { name: 'Graphes', prize: 200 } ]

2. Array.map() to find ASCII code of string

In this example, we are using the array.map() function to modify the string and create a new array that contains the ASCII code of a given string.

const map = Array.prototype.map;
const StrcharCodes = map.call('Dev Enum', (x) => x.charCodeAt(0));

console.log(StrcharCodes)

Output

[
  68, 101, 118,  32,
  69, 110, 117, 109
]

3. Convert number array to string

In this javascript array.map() example we have an array containing string-type elements, we want to iterate over each element of the array and modified them to the number that we are doing in this example.

let itemarr = [
    '1', '2', '3','4','5','6'
];

numArr = itemarr.map((str) => parseInt(str));

console.log('string array to number array:',numArr)

Output

string array to number array :[ 1, 2, 3, 4, 5, 6 ]

4. Array.map to Square of array element

In this example, we are using the array.map() method to iterate over an array that contains the square of each element in the array and return a new array that contains a base of each element in the array.

let itemarr = [
    4,9,16,25,36
];

numArr = itemarr.map(Math.sqrt);

console.log('array element:\n',numArr)

Output

array element:
 [ 2, 3, 4, 5, 6 ]

Related Posts