Discussion on: Can .map() Mutate The Original Array? Yes.

View post

I hardly disagree with the title of this article. For me, the biggest point here is: Array.prototype.map() does not mutate by itself the original array.

It can change the original array if you write it in a way to do so. But the callback function is up to the developer, not up to specification and the specification says that the .map() doesn't mutate.

Another good point of discussion is why the following code works the way it works:

const originalArray = [1, 2, 3]
const mappedArray = originalArray.map((x, index)=> originalArray[index] = x * 2)

console.log('originalArray = ', originalArray) // --> originalArray = [2, 4, 6]
console.log('mappedArray = ', mappedArray) // --> mappedArray = [2, 4, 6]

By writing the arrow function with this shorthand it makes the same as

const mappedArray = originalArray.map((element, index)=> {
  originalArray[index] = element * 2
  return originalArray[index]
})

and if the arrow function is changed the like

const mappedArray = originalArray.map((element, index)=> {
  originalArray[index] = element * 2
  return element
})

then the mappedArray should be equal to the originalArray before those changes. Just check the following code:

const originalArray = [1, 2, 3]

const mappedArray = originalArray.map((element, index)=> {
  originalArray[index] = element * 2
  return element
})

console.log('originalArray = ', originalArray) // --> originalArray = [2, 4, 6]
console.log('mappedArray = ', mappedArray) // --> mappedArray = [1, 2, 3]

Joseph Trettevik • Feb 16 '20 • Edited

Thank you so much for the feedback. I’m always trying to learn more, so I appreciate you taking the time to read and comment on my blog post.

You’re absolutely right that Array.prototype.map() will not mutate the original array by itself, which is why that’s the first thing I mentioned at the beginning of this post.

Now was my title for this post a little on the clickbaity side of things? Sure. But my point was that if we’re not thoughtful in the way we write the callback function, Array.prototype.map() can mutate the original array.

This post is intended for JavaScript beginners, and if as a beginner you believe that .map() will never mutate the original array, you’re going to run into this issue and have no idea why your original array is getting mutated.

I think we agree on the subject, we just disagree on the semantics.

You’re essentially saying that Array.prototype.map() doesn’t mutate the original array, developers who use Array.prototype.map() mutate the original array.

And you’re right, but at the end of the day Array.prototype.map() was executed and the original array got mutated.

Array.prototype.map() never executes itself. There is always a developer behind it.

Finally, thanks for pointing out how you can rewrite the arrow function in my last example to get a different behavior. That’s pretty cool and I hadn’t thought of that!