Why can't I make a copy of this 2d array in JS? How can I make a copy?

Question

I'm implementing a John Conway Game of Life, but I'm having a weird problem. Here is a short version if the code giving me trouble:

let lifeMap = [
  [true, false, false],
  [false, false, false],
  [false, false, false]
];
let oldLifeMap = lifeMap.slice();
for (let row = 0; row < lifeMap.length; row++) {
  for (let val = 0; val < lifeMap[row].length; val++) {
    let bool = lifeMap[row][val];
    let newBool = false; // here is where I would determine if cell is alive/dead
    lifeMap[row][val] = newBool;
    if (row === 0 && val === 0) console.log("at (0,0)", oldLifeMap[0][0]);
  }
}

In response to this code, JavaScript prints at (0,0) false. I need it to stay true until the next generation starts.

I thought doing let oldLifeMap = lifeMap.slice() would fix it, but it doesn't, and I'm not sure why. (Shouldn't it copy the 2d array and not create a second ref to it?)

Anyway, what is going on here, and how do I successfully make an actual copy of lifeMap here?

The outer array is a copy, but each inner array remains a reference. That is expected behavior from what you're doing. — Patrick Roberts, Aug 29 '17 at 22:38
Possible duplicate of [How do you clone an Array of Objects in Javascript?](https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript) — abagshaw, Aug 29 '17 at 22:43
I'll try this https://stackoverflow.com/questions/13756482/create-copy-of-multi-dimensional-array-not-reference-javascript — Andrew Horn, Aug 29 '17 at 22:44
Yeah, that's the best approach I think (and what I was going to write). [Here's a demo](https://jsfiddle.net/yys7yg07/) — Andy, Aug 29 '17 at 22:46
@epascarello that is extremely inefficient and unnecessary, please don't recommend serialization, especially in the case where the structure of the object is well-known. — Patrick Roberts, Aug 29 '17 at 22:49
@PatrickRoberts it works.... and if performance does not matter.... — epascarello, Aug 29 '17 at 22:49

score 12 · Accepted Answer · answered Aug 29 '17 at 22:51

A hat-tip to @Redu's answer which is good for N-dimensional arrays, but in the case of 2D arrays specifically, is unnecessary. In order to deeply clone your particular 2D array, all you need to do is:

let oldLifeMap = lifeMap.map(inner => inner.slice())

This will create a copy of each inner array using .slice() with no arguments, and store it to a copy of the outer array made using .map().

Redu · Answer 2 · 2017-08-29T22:46:51.110

5

You may clone an ND (deeply nested) array as follows;

Array.prototype.clone = function(){
  return this.map(e => Array.isArray(e) ? e.clone() : e);
};

or if you don't want to modify Array.prototype you may simply refactor the above code like;

function cloneArray(a){
  return a.map(e => Array.isArray(e) ? cloneArray(e) : e);
};

edited Aug 29 '17 at 22:46

answered Aug 29 '17 at 22:45

Redu

25,060
6
56
76

Interesting proposal, but in my opinion is too generic for a 2D array, which does not require a recursive function. – Patrick Roberts Aug 29 '17 at 22:46
1

@Patrick Roberts `Array.prototype` extension above was just illustrative to give an idea about the algorithm. Surely it must be done by `Object.defineProperty()`. And agreed upon this better be implemented as static `Array.clone()`. – Redu Jul 01 '18 at 09:30

Why can't I make a copy of this 2d array in JS? How can I make a copy?

2 Answers2

Linked

Related