JavaScript 多次元配列の値渡し

基本

オブジェクト型(配列)は参照渡し

const a = [0,1,2];
const b = a;

//bはaを参照しているため、bを変えるとaも変わる。
b[0] = 3;
console.log(a) // [3,1,2]
console.log(b) // [3,1,2] 

JavaScriptでは、オブジェクト型は参照渡しとなる。(プリミティブ型は値渡し)

オブジェクト型(配列)を値渡し

const a = [0,1,2];
const b = [...a];

//aを値渡ししたため、bを変えてもaは変わらない
b[0] = 3;
console.log(a) // [0,1,2]
console.log(b) // [3,1,2]

//連想配列は対応してません

スプレッド演算子を利用することで値渡しを行うことができる。

多次元配列で値渡し

const a = [[0,1],[0,1],[0,1]];
const b = [...a]; 

b[0][0] = 3;
console.log(a) // [[3,1],[0,1],[0,1]]
console.log(b) // [[3,1],[0,1],[0,1]]

多次元配列でこのようにしても、値渡しができない。 これはJavaScriptの多次元配列の仕様によるものである。

JavaScriptでは、多次元配列という構文が用意されておらず、配列の要素に別の配列リテラルを格納することで、多次元配列として扱っている。

つまり以下の状態である。

const a = [[0,1],[0,1],[0,1]];
// a = [Array [0, 1], Array [0, 1], Array [0, 1]]

なので先ほどのように多次元配列の値渡しをしたい場合は、配列の要素に対して変数を宣言して変更を加える必要がある。

const a = [[0,1],[0,1],[0,1]]
const b = [...a]; 
const c = [...a[0]];

c[0] = 3;
b[0] = c;

console.log(a) // [[0,1],[0,1],[0,1]]
console.log(b) // [[3,1],[0,1],[0,1]]