array.map(): A better way 🧐 ?
Tags: javascript, typescript, javascriptarraymethods
Published: 2021-01-29 18:35:38

> 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`.

```js
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.

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)_ 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](https://webdevjeet.me/2020-12-array-prototype-map/)

--- 

Edit:

Take a look at the comment on this post made by [Brett Thurston](https://dev.to/brettthurs10) to get more info on where not to use `map()` as per MDN.