Here's an example from the browser console
a=[[1,2,3],[3,2,1]]
b=[]
b.push(a)
a[0][0]=9
b.push(a)
In that case, I was expecting b to be
[[[1,2,3],[3,2,1]],[[9,2,3],[3,2,1]]]
But it will be
[[[9,2,3],[3,2,1]],[[9,2,3],[3,2,1]]]
I'm attaching a screenshot to better show the results in the browser: browsers console with the same code as above and output
Any ideas on why this is happening and how to get to my expecting results?
In JavaScript, objects are passed by reference, meaning "copies" of it aren't copies. They point to the same address in RAM, so mutating one reference mutates 'em all.
To apply to this case, if you didn't already know, arrays are special types of objects. To prove this you can run typeof [] in your browser console. That means that arrays inherit the "pass-by-reference" behavior, meaning if you do let c = a then run c[0] = 1, a will be changed as well and vice versa.
To solve this issue you can use Array.prototype.slice:
const a = [[1, 2, 3], [3, 2, 1]];
const b = [];
Array.prototype.pushWithoutReference = function(add) {
for(let i = 0; i < add.length; i++) {
this[this.length] = add[i].slice(0);
}
}
b.pushWithoutReference(a);
a[0][0] = 9;
b.pushWithoutReference(a);
For the language itself, there are no multidimentional arrays - there are another arrays inside an array. It doesn't matter if contains arrays, plain objects, functions, or primitives. For primitives, their values will be copied. Otherwise, the references to objects will be copied.
You can do it via pushing the copies of inner arrays of array a with the help of map and spread operator(...).
var a=[[1,2,3],[3,2,1]];
var b=[];
b.push(a.map(x=>[...x]));
a[0][0]=9;
b.push(a);
console.log(b);Ok, based on all the comments here, specially @code 's one, and also another post (How do I pass the value instead of the reference of an array?) I was able to achieve the results by using this:
b.push([]);
for(line of a){
b[b.length-1].push(a.slice(0));
}
EDIT
Abhijeet's suggestion also works flawlessly:
b.push(a.map(x=>[...x]));