Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 29, 2021 06:35 pm GMT

array.map(): A better way ?

The method map() creates a new array with the values that get returned by calling the function provided to map(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' ]
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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 with callingArray[someIndex].
  • A certainty that all elements of the array will be iterated with map() - never deal with wrong indices inside a for-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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To