An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
array.map(): A better way ?
The method
map()
creates a new array with the values that get returned by calling the function provided tomap(anyFunctionHere)
on every element of an array.
The array, on which the map()
is being executed is named as calling array.
Task
Given an array with reversed first names, create a new array with the same position of names in the original array but re-reversed(should make sense) first names.
Let's take a look how we could tackle it using for-loop
.
const arrayOfNames = ['anhsirK', 'nosaJ', 'nolE', 'drawdE'];let arrayOfReversedNames = []; // declaring an empty array to store results.for (let nameIndex = 0; nameIndex < arrayOfNames.length; nameIndex = nameIndex + 1) { // we can reverse a string in JavaScript with String.split("").reverse().join("") const reversedFirstName = arrayOfNames[nameIndex].split('').reverse().join(''); arrayOfReversedNames.push(reversedFirstName);}// output: [ 'Krishna', 'Jason', 'Elon', 'Edward' ]
In the above example, we declared arrayOfReversedNames
and then appended calculated reverse names to that array.
It's time to solve the same problem, but with the use of map()
method.
const arrayOfNames = ['anhsirK', 'nosaJ', 'nolE', 'drawdE'];// declaring an empty array to store results.let arrayOfReversedNames = arrayOfNames.map((firstName) => { return firstName.split("").reverse().join("")}); // arrayOfReversedNames: [ 'Krishna', 'Jason', 'Elon', 'Edward' ]
We pass in an arrow function to map()
with an argument firstName
. firstName
will have a different value in each iteration on the elements of the calling array. Here in the first iteration, the value of firstName
would be anhsirK
, nosaJ
in the second iteration, and so on... It's clear that we get the same results because map()
is also doing the same iteration that for-loop
was doing.
At this point you might ask if both methods are doing the same thing that is iteration over elements of the calling array, shouldn't we use for-loop
instead of map()
? It's more readable and explicitly describes what is being done there.
Well, yes and no.
Benefits of using map()
over for-loop
- Fewer lines of code - mostly better!
- We get access to individual elements of the calling array directly with an argument in the function passed on to
map()
- far easier than always getting values withcallingArray[someIndex]
. - A certainty that all elements of the array will be iterated with
map()
- never deal with wrong indices inside afor-loop
anymore.
All we know at the end of the day is that when we have an array and we want to process every element of that array and store values in a new one, map()
is the way to go.
This is originally written at my blog
Edit:
Take a look at the comment on this post made by Brett Thurston to get more info on where not to use map()
as per MDN.
Original Link: https://dev.to/webdevjeet/array-map-a-better-way-c23
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To