Javascript Array Map unexpectedly changed original array values

Question

I have constructor function that creates an object

I initialize an array called arr1, calling the function to make starting values.

I map over the arr1 to make arr2

But my original arr1 was changed. Why is this? Is it because I'm making async callbacks when initializing array and event-loops?

For reference, I was trying to take ideas from my previous post about canvas here for refactoring

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];
console.log(arr1, "arr1");

arr2 = arr1.map(b=>{
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})
console.log(arr1, "arr1");
console.log(arr2, "arr2");

score 3 · Answer 1 · answered Nov 28 '18 at 05:35

In your map callback, you are directly altering properties of each object (b)...

b.x = b.x+2;
b.y = b.y+2;

What I suspect you're after is something more immutable like

const arr2 = arr1.map(({x, y}) => ({
  x: x + 2,
  y: y + 2
}))

This will create a new array with +2 values without modifying the original at all.

function point(x,y){
  return {x,y}
}

const arr1 = [point(1,2), point(3,4)];
console.log('arr1', arr1);

const arr2 = arr1.map(({x, y}) => ({
  x: x + 2,
  y: y + 2
}))

console.info('arr1', arr1);
console.info('arr2', arr2);

Nathan · Answer 2 · 2018-11-28T15:52:49.290

Others have pointed out the issue with re-assigning the values of your arr in your map, but I wanted to point out the side effect that you observed with your first console log on arr1 also being updated. This is a limitation (some would argue it isn't) of with how the console works in most browsers. If you change a nested object (or array) before you open and observe the first object in the console log, it will be updated to the new values.

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];
console.log("arr1 closed", arr1);
console.log("arr1 opened:", arr1[0], arr1[1]);

arr1[0] = {x: 15, y:42};
console.log("arr1 closed", arr1);
console.log("arr1 opened:", arr1[0], arr1[1]);

jsFiddle

Notice how the "opened" arrays show the values at the state of when the console log was called, but if you expand the first console log with the nested array, it shows the updated values.

You can't run this code as a snippet and observe this side effect. It must be run in the browser so it can print to the console.

Mark · Answer 3 · 2018-11-28T05:41:15.593

When you use map, you create a new array, but the array holds references to the objects. So when you alter the object b in the map, this is a reference to the the original points, not copies.

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];

arr2 = arr1.map((b, i)=>{
  // b IS on of the objects from arr1
  console.log(`b === arr1[${i}]`, b === arr1[i])
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})

You could make a new point instead:

function point(x,y){
  return {x,y}
}

arr1 = [point(1,2), point(3,4)];
arr2 = arr1.map(({x, y}) => point(x + 2, y + 2))

console.log(arr1, "arr1")
console.log(arr2, "arr2")

Dinesh Pandiyan · Answer 4 · 2018-11-28T05:44:52.353

The reason for the behaviour you are seeing is .map() shallow copies the elements to a new array.

This line mutates x and y values in each element in the source array.

arr2 = arr1.map(b=>{
  b.x = b.x+2;
  b.y = b.y+2;
  return b;
})

Instead you should only return new x and y values without mutating source array element like this

arr2 = arr1.map(b => {
  return {
    x: b.x + 2,
    y: b.y + 2
  };
})

You could try the snippet below to create a new array with updated x and y values without mutating the source array elements.

function point(x, y) {
  return { x, y }
}

arr1 = [point(1, 2), point(3, 4)];
console.log(arr1, "arr1");

arr2 = arr1.map(b => {
  return {
    x: b.x + 2,
    y: b.y + 2
  };
})
console.log(arr1, "arr1");
console.log(arr2, "arr2");

Javascript Array Map unexpectedly changed original array values

4 Answers4