This content originally appeared on DEV Community and was authored by Rajat Gupta
Let's see what MDN has to say:
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Here the calling array is the original array.
Let's see some examples in order to understand better:
let's see some examples
Example 1: Double the value of each element in an array and return a new array of modified elements.
//using arrow function
const numbersArray = [1, 5, 22, 40, 19]
const doublesArray = numbersArray.map(item => item*2)
console.log(doublesArray)
Result: [2, 10, 44, 80, 38]
//With normal functions
const numbersArray = [1, 5, 22, 40, 19]
function double(num){
return num*2;
}
const doublesArray = numbersArray.map(double)
console.log(doublesArray)
Result: [2, 10, 44, 80, 38]
In the above example, each and every element (or item) of the numbersArray will pass through the function double to return a new value. Further, all the returned values are combined to form a new array.
Note: map method does not mutate the original array. It returns a modified copy of the original array.
Since I prefer arrow functions and it's a much more efficient way, I'll explain in terms of arrow functions.
let's see another example:
Example 2: Triple the value of each element in an array and return a new array of modified elements.
const numbersArray = [1, 5, 22, 40, 19]
const triplesArray = numbersArray.map(item => item*3)
console.log(triplesArray)
Result: [3, 15, 66, 120, 57]
*Note: map is meant to work with any iterable. *
Example 3: Given an array of strings, return a new array with the first element of each string.
stringArray = ["apple", "banana", "mango", 'grapes', 'guava', 'pineapple','strawberry']
const newArray = stringArray.map(item => item[0])
console.log(newArray)
Result: ['a', 'b', 'm', 'g', 'g', 'p', 's']
The map will internally run the provided function over each and every value of the array and create a new array out of it.
Example 4: Given an array of numbers, return a new array in which an even number is decremented by 1 and an odd number is incremented by 1.
const numbersArray = [1, 5, 22, 40, 19]
//Here's the 1 line answer using the arrow function:
const newArray = numbersArray.map(num => num % 2 === 0 ? num-1 : num +1)
console.log(newArray)
result: [2, 6, 21, 39, 20]
//Using normal function:
function oddEvenOperation(num){
if(num % 2===0){
return num-1;
}
else{
return num+1;
}
const newArray = numbersArray.map(oddEvenOperation)
console.log(newArray)
result: [2, 6, 21, 39, 20]
Let's see another example.
Example 5: Given an array of string, Return an array of objects with key as item and value as no. of characters in the string.
stringArray = ["apple", "banana", "mango", 'grapes', 'guava', 'pineapple','strawberry']
//using arrow function:
stringArray.map(item => { return {[item]: item.length} })
Result: [{item: 5}, {item: 6}, {item: 5}, {item: 6}, {item: 5}, {item: 9},{item: 10}]
If you want the explanation of the above example in terms of normal function, tell me in the comments and I'll be happy to include the same.
That's all folks.
I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same..
If you love the article follow me on Twitter: @therajatg
If you are the LinkedIn type, let's connect: https://www.linkedin.com/in/therajatg/
Have an awesome day ahead 😀!
This content originally appeared on DEV Community and was authored by Rajat Gupta
Rajat Gupta | Sciencx (2022-02-16T17:57:04+00:00) map() method in JavaScript. Retrieved from https://www.scien.cx/2022/02/16/map-method-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.