pushで配列を追加すると、追加した配列が参照渡しになる [JavaScript]

JavaScriptでは配列を格納した変数を別の変数に格納すると「参照渡し」になります。

例えば変数xに配列を格納し、変数yにxを代入してみます。

var x = [1,2,3];
var y = x;
console.log(y); // [1,2,3]

y[0] = 4;
console.log(x); // [4,2,3]
console.log(y); // [4,2,3]

変数yの中身を見ると、変数xと同じ配列が格納されているように見えますが、変数yの配列の要素を変更すると元の変数xの配列も変更されます。これが「参照渡し」の挙動です。

参照渡しは名前の通り、”参照”を渡しているので、参照先と参照元で同じ配列を共有するような動きとなります。

上記はよく見かける参照渡しの例ですが、配列を制御するpushメソッドでも参照渡しになります。

pushで配列に配列を追加する

pushメソッドを使うと、配列の末尾に値を追加することができます。

var x = [];
x.push(1)
console.log(x); // [1]

pushメソッドで配列を渡すと多次元配列になります。

var x = [];
x.push([1,2,3])
console.log(x); // [[1,2,3]]

ここで、配列を変数yに格納して、pushメソッドで変数xに追加してみます。

var x = [];
var y = [1,2,3];
x.push(y)
console.log(x); // [[1,2,3]]

変数xの値を変更してみると。。。

x[0].push(4)
console.log(x) // [[1,2,3,4]];
console.log(y) // [1,2,3,4]

pushで追加した変数yの中身も変更されていますね。

pushで参照渡しを避ける方法

参照渡しを避けるには、concatメソッドを使います。

concatは引数に指定した配列と結合して、新しい配列を返します。引数が空であれば、そのまま新しい配列が作成されます。

先ほどの処理を例に、変数yをconcatを使って変数xにpushしてみます。

var x = [];
var y = [1,2,3];
x.push(y.concat()) // 変数yの配列とは別の配列がpushされる
console.log(x); // [[1,2,3]]

x[0].push(4)
console.log(x) // [[1,2,3,4]];
console.log(y) // [1,2,3] <- 影響されない

このように、concatで追加した配列の中身は変更されていないことがわかります。

Related Posts