# Don't misuse JavaScript Array map

I've been using the JavaScript Array `map()` function whenever I needed to iterate an array and manipulate it. But today I learned that even though it gets the job done, it has some disadvantages.

## Usage

`map` is a higher-order function in JavaScript since it takes a function as its argument.

`Array.prototype.map(callbackFn)`

The `map` function does 3 things.

1. It creates a new array
    
2. Then, it applies a given function to each element of an existing array
    
3. Then, that updated element is pushed into the new array and returned
    

## Scenarios to be aware of

Here are the reasons why you should refrain from using the `map` function if you are not going to utilize all its benefits.

### Performance Overhead

The `map` function creates a new array and applies the callback function to all the elements. This can lead to unnecessary memory usage and performance overhead, especially if the array is larger.

If you just want to iterate through the array and you are not going to use the returned array, stick with `for` loops or `forEach` loops.

### Early Termination

If you have a particular condition where you need to break out from the loop, you can't do that if you are using the `map` function

Here is how you would do it in a simple for loop.

```javascript
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (const num of numbers) {
  if (sum > 10) {
    break; // Early termination
  }
  sum += num;
}
```

As soon as the value `sum` exceeds 10, the loop will be stopped.

There is no way to do this when we are using the map function. The closest thing that is possible is to skip over that particular element.

```javascript
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
const modifiedNumbers = numbers.map(num => {
  if (sum > 10) {
    return num; // Early return, effectively skipping processing of the remaining elements
  }
  sum += num;
  return num; // Continue processing for other elements
});
```

### No Side Effects 🥺

The `map` function **should not be used** to perform side effects like updating external variables. This is against functional programming paradigms that the `map` function is a part of. The primary purpose of the `map` function is to transform data in the current array and create a new array.

```javascript
const numbers = [1, 2, 3, 4, 5];
let sum = 0;

const doubledNumbers = numbers.map(num => {
  const doubled = num * 2;
  sum += doubled; // Modifying external variable
  return doubled;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]
console.log(sum); // 30 (Sum of doubled numbers)
```

Even though this gets the job done, this can make the lives of other programmers harder. This will make the codebase harder to maintain over time and reduce the readability of the code.

Instead of using the `map` function, stick with a simple `forEach` loop.

```javascript
const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(num => {
  const doubled = num * 2;
  sum += doubled; // Modifying external variable
});

console.log(sum); // 30 (Sum of doubled numbers)
```

---

Thank you for diving into the article! If you found it as captivating as a page-turner, consider dropping a virtual high-five with a like, leaving your thoughts in the comments, and embarking on a journey with me for more mind-enriching content. Until we cross paths again, take care and keep your curiosity alive! 🚀✨