JavaScriptの配列-参照渡しと値渡しの違いを解説

  • 2020年11月26日
  • 2021年7月5日
  • JavaScript
  • 394view

JavaScriptにおける参照渡しと値渡しとは

結論から言うと、JavaScriptでは

プリミティブ型は値渡し

オブジェクト型は参照渡し

となります。

配列はオブジェクトに分類されるので参照渡しになるのですが、配列を複製知る場合には注意が必要です。

配列の複製の仕方

先ほど注意が必要と言いましたが、まずは素直に参照渡しのままやってみましょう。

let arrA = [0, 1, 2, 3, 4];
let arrB = arrA; // arrB に arrA を代入 (参照渡し)
arrB[1] = 5; //arrBの配列の値を変更

console.log(arrA); // [0, 5, 2, 3, 4] arrAの方も更新されている!!
console.log(arrB); // [0, 5, 2, 3, 4]

と素直に参照渡しのままだと、複製元の配列まで変更されてしまいます。

そこで配列を値渡しにして複製する為に、この様な対応をします。

let arrA = [0, 1, 2, 3, 4];
let arrB = arrA.concat(); // arrB に arrA を代入 (値渡し)
arrB[1] = 5; //arrBの配列の値を変更

console.log(arrA); // [0, 1, 2, 3, 4] 
console.log(arrB); // [0, 5, 2, 3, 4] arrBのみ更新されている

let arrB = arrA.concat();を使って配列を複製した事で、複製元を変更しなくて済む配列の複製が完成しました。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping