【JavaScript】配列に値を代入（=）するときとpushの違い

変数に配列を代入して、それを他の変数に代入（=）すると値の参照渡しになるので、代入した変数された変数のどちらかの値を変更すると、もう一つの値に影響します。

しかし、pushに変数を使い値を設定したときは、代入（=）を使用したときの参照渡しと違い変数の場所の参照渡しになるので気を付ける必要があります。

例として、下の配列を格納するための変数data1とdata2があるとします。

var data1 = ['大阪', '東京', '福岡'];
var data2 = [];

data2にdata1を代入して、さらにdata2[0]に’名古屋’を代入すると、data1とdata2の指す値は、同じ結果になります。

data2 = data1;
data2[0] = '名古屋';
console.log(data1); //名古屋,東京,福岡
console.log(data2); //名古屋,東京,福岡

data2にdata1を代入したあとに「data2.length=0」として配列の値を空にしてみると、data1とdata2ともに配列の値が空（未定義）になります。

data2 = data1;
data2.length = 0; //data1.length = 0でも同じ結果
console.log(data1); //undefined
console.log('data2); //undefined

push()を使いdata2に配列を参照している変数（data1）を入れて、そのあとdata1を空にするとdata1とdata2共に何も表示され無くなります。

data2.push(data1);
data1.length = 0;
console.log(data1); //undefined
console.log(data2); //undefined

data2を空にしても同じように何も表示されなくなります。

data2.push(data1);
data2.length = 0;
console.log(data1); //大阪,東京,福岡
console.log(data2); //undefined

data2にdata1をpushしたあと、data2に’名古屋’を追加します。その結果、data1とdata2の値は違う結果になります。

さらにその後、data1を空にするとdata1は何も表示されず、data2は後から追加した’名古屋’だけ表示されます。

data2.push(data1);
data2.push('名古屋');
console.log(data1); //大阪,東京,福岡
console.log(data2); //大阪,東京,福岡,名古屋

data1.length = 0;
console.log(data1); //undefined
console.log(data2); //,名古屋

data1ではなく、data2を空にするとdata1の値は、そのまま表示され、data2の値はundefinedになります。

data2.length = 0;
console.log(data1); //大阪,東京,福岡
console.log(data2); //undefined