JavaScriptの参照渡しと値渡しについて

Question

JavaScriptの勉強をしており、参照渡しと値渡しの部分でハマっております。

C++ならポインタを使えば改善できる問題なのですが、
この処理をJavaScriptで書く方法がよく理解できておりません。

関数を２つ用意して、連想配列を代入する処理を記載しております。

用意した関数内で
let data = list; // listは引数で指定した連想配列
のように連想配列を代入してしまうと、dataの中身を
変更することで引数のlistの値が変わってしまいます。

他のサイトを見るとJSONで渡したり、ディープコピーをすれば
改善できると記載があったのですが、どちらの方法でも値が変わってしまうようでした。

こういった場合、JavaScriptではどのように処理を書くのが正しいのでしょうか。

```JavaScript
const listMember = [
  { title: '1' },
  { title: '2' },
  { title: '3' },
];

const listItem = [

  {
    title: '1',
    price: 300,
    paidId: '1',
    paidMember: ['1', '2', '3'],
  },

  {
    title: '2',
    price: 200,
    paidId: '1',
    paidMember: ['1', '2'],
  },

];

// メンバーごとにlistを計算用の作る
function InitList(listMember){

  let list = [];

  // 計算用の配列に人物名と価格を初期化して格納
  for (let i = 0; i < listMember.length; i++) {
    let item = [
      {
        title: '',
        price: 0,
      }
    ]
    item.title = listMember[i].title;
    item.price = 0;
    list.push(item);
  }

  return list;

}

// 割り勘後の徴収金額
function CalcBill(list, listItem){

  //console.log(list.length);
  
  //let data = list;
  //let data = list.concat();
  //let data = JSON.stringify(list);
  //data = JSON.parse(data);
  let data = Object.create(list);
  console.log('price',data[0].price);

  // メンバーごとに合計価格を計算
  for (let i = 0; i < data.length; i++) {
    data[i].price = i*100;
  }

  return data;

}

function AfterPayment(list, listItem){

  //let data = list;
  //let data = list.concat();
  let data = Object.create(list);
  console.log('price',data[0].price);	// ここの値が0ではなくCalcBillで計算した値になる

  return data;

}

init() {
	let dataList = InitList(listMember);
	CalcBill(dataList, listItem);
	//dataList = InitList(listMember); // コメントを消すと0にできる
	AfterPayment(dataList, listItem);
}

```

Accepted Answer

> JSONで渡したり、ディープコピーをすれば
改善できると記載があったのですが、どちらの方法でも値が変わってしまう

解釈がおかしいのでは？
```javascript
const listMember = [
  { title: '1' },
  { title: '2' },
  { title: '3' },
];
const l1=listMember[0];
l1.title="100";
console.dir(listMember);//listMemberにさかのぼって変更

const l2=JSON.parse(JSON.sringify(listMember))[1];
l2.title="200";
console.dir(listMember);//listMemberに影響はない
```

# 再確認用
```javascript
const listMember = [
  { title: '1' },
  { title: '2' },
  { title: '3' },
];
const l1=listMember[0];
const l2=JSON.parse(JSON.stringify(listMember));
l1.title="100";
console.dir(listMember);//listMemberにさかのぼって変更
l2[1].title="200";
console.dir(l2);//listMemberに影響はない
```

Answer

[[JavaScript]色々なディープコピー - Qiita](https://qiita.com/knhr__/items/d7de463bf9013d5d3dc0) を参考に、ディープコピーメソッドを作った上で、（上記を発展させ、クラスメソッド（prototype定義のメソッドも）含めてコピーできるようにしている）下記でいかがでしょうか。 ```javascript const listMember = [ { title: '1' }, { title: '2' }, { title: '3' }, ]; const listItem = [ { title: '1', price: 300, paidId: '1', paidMember: ['1', '2', '3'], }, { title: '2', price: 200, paidId: '1', paidMember: ['1', '2'], }, ]; // ディープコピー関数を定義 const deepClone = obj => { const r = (() => { // 一応、余計な処理をいれないために、クラス名がObjectか、Arrayだったらそのまま、配列かオブジェクトかを返す if (obj.constructor.name === 'Array' || obj.constructor.name === 'Object') return Array.isArray(obj) : [] : {}; // クラス名が上記以外なら、（クラス、prototypeがユーザー定義）Object.createをうまく使って、新しくインスタンスを生成して返す return Object.create(obj.constructor.prototype); })(); for(let key in obj){ // プロパティがオブジェクトなら、再起的に自身を実行して潜っていく、値なら、そのまま代入 r[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]; } return r; }; // メンバーごとにlistを計算用の作る function InitList(listMember){ let list = []; // 計算用の配列に人物名と価格を初期化して格納 for (let i = 0; i < listMember.length; i++) { let item = [ { title: '', price: 0, } ] item.title = listMember[i].title; item.price = 0; list.push(item); } return list; } // 割り勘後の徴収金額 function CalcBill(list, listItem){ let data = deepClone(list); // 値変化がわかりやすいよう、二番目の要素を出力 console.log('price',data[1].price); // メンバーごとに合計価格を計算 for (let i = 0; i < data.length; i++) { data[i].price = i*100; } return data; } function AfterPayment(list, listItem){ let data = deepClone(list); // 値変化がわかりやすいよう、二番目の要素を出力 console.log('price',data[1].price); return data; } function init() { const dataList = InitList(listMember); CalcBill(dataList, listItem); AfterPayment(dataList, listItem); } init(); ``` maisumakunさんがおっしゃるとおり、Object.createは、ディープコピーを生成するものではないので、改めて、ディープコピーをさせるメソッドを用意する必要があるのでしょう。（Object.createは、第一引数のオブジェクトを、"prototype"として、新たにオブジェクトを生成するので、コピーメソッドの中でうまく使えば、完全に同クラスからの別参照インスタンスオブジェクトとなる）さて、余談になりますが、**JavaScriptには、値渡しも参照渡しも存在しません**。あくまで、変数は、**メモリに格納された値、またはオブジェクトに対する参照**にすぎません。 ```javascript const a = {value: 15}; const b = a; b.value = 20; console.log(a.value); // 20 ``` と見ると、 `a`と`b`は不可分の関係に見えますが、 `a`を代入された`b`は、`{value: 15}`というオブジェクトに対する参照となり、その時点で、`a`と`b`の関係は代入した時点で断たれています。ただし、**メモリに格納された同じオブジェクト自体を参照**しているので、`b`によって、プロパティの値を変えると、同じオブジェクトを参照している`a`の方も変化があったように見えます。（各プロパティもまた、値に対する参照のため。オブジェクトは、参照をプロパティとして複数保持できるもの）よって、下記の場合は、`a`の変化を`b`でさせることはできなくなります。 ```javascript const a = {value: 15}; let b = a; // bは、新たに生成されたオブジェクトの参照となるため、aとは参照元さえも変わってしまう b = {value: 15}; b.value = 20; console.log(a.value); // 15 ``` オブジェクトと同様に、値に対しても同じ参照の挙動となります。 ```javascript const a = 15; let b = a; // bは、同じ参照元の15という値の参照となる b = 20; // bは、新たな値20の参照となる console.log(a); // 15 ``` ```javascript const a = 15; let b = a; // bは、同じ参照元の15という値の参照となる // だが、オブジェクトと違い、裸の値であるため、どう代入し直しても、新しい値が生成される。（上記の通り新しいオブジェクトの代入は新たにメモリに格納されるので、裸の値と参照の挙動自体は同じ） b = 15; // bは、値的には同じでも、参照元が変わってしまう。 console.log(a); // 15 ``` つまり、変数に対して、値を渡している、参照を渡しているのではなく、常に変数は、**値（オブジェクト）に対しての参照そのもの**となります。値が入っている、参照が入っている、それを渡している、ではないというわけです。以上です。

Answer

JavaScript の 代入演算子 や 引数指定 は特殊ですね。

プリミティブだと値が代入されますが、インスタンスだと相互に参照となります。

オブジェクトのプロパティについて
```javascript
var oj = {
  hog: true
, hoga: "anystring"
, hogi: 1
, hogu: { prop:"any" } // オブジェクトリテラルは Object のインスタンス
, hoge: [1,2,3] // 配列リテラルは Array のインスタンス
}
// プリミティブ
var dstFlg = oj.hog;
console.log(oj.hog, dstFlg); // true true
oj.hog = false;
console.log(oj.hog, dstFlg); // false true

var dstStr = oj.hoga;
console.log(oj.hoga, dstStr); // "anyString" "anyString"
oj.hoga = "anyString2";
console.log(oj.hoga, dstStr); // "anyString2" "anyString"

var dstNum = oj.hogi;
console.log(oj.hogi, dstNum); // 1 1
oj.hogi = 2;
console.log(oj.hogi, dstNum); // 2 1

// インスタンス
var dstOj = oj.hogu; 
console.log(oj.hogu, dstOj); // Object{ prop:"any" } Object{ prop:"any" }
oj.prop = "any0"; // プリミティブなので変わらない
console.log(oj.hogu, dstOj); // Object{ prop:"any" } Object{ prop:"any" }
oj.hogu.prop = "any0"; // deep コピー必須と言われる理由はこのあたり？（更に追記
console.log(oj.hogu, dstOj); // Object{ prop:"any0" } Object{ prop:"any0" }
dstOj.prop = "any2"; // dstOj 自体は インスタンスの代入
console.log(oj.hogu, dstOj); // Object{ prop:"any2" } Object{ prop:"any2" }

var dstAry = oj.hoge;
console.log(oj.hoge, dstAry); // [1,2,3] [1,2,3]
oj.hoge.push(4);
console.log(oj.hoge, dstAry); // [1,2,3,4] [1,2,3,4]
dstAry.shift();
console.log(oj.hoge, dstAry); // [2,3,4] [2,3,4]
```
※コードにコメント追記しました。

配列要素についても同様です。
関数の引数については、ちょっと失念。（同様だったと思います）

上記のように、値の変化をチェックして感覚的に覚えたのが、
「プリミティブ と インスタンス とで異なる挙動を示す」というものでした。

これでは、まともな回答になっていませんけど…。

Answer

> ここの値が0ではなくCalcBillで計算した値になる

そもそも、0になっているのですが（[jsFiddle](https://jsfiddle.net/n574zsw6/)）。

そして、`Object.create(オブジェクト)`は、`オブジェクト`をプロトタイプとして別なオブジェクトを作る関数です。**コピーはされません**。

Answer

JSONで渡しても参照渡しになってしまうということですが、
下記の書き方で再定義しておけば、値渡しになりませんか？

```
JSON.parse(JSON.stringify(/*任意のオブジェクト*/));
```

再確認用

関連した質問