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

Question

JavaScriptの勉強をしており、参照渡しと値渡しの部分でハマっております。

C++ならポインタを使えば改善できる問題なのですが、
この処理をJavaScriptで書く方法がよく理解できておりません。

関数を２つ用意して、連想配列を代入する処理を記載しております。

用意した関数内で
let data = list; // listは引数で指定した連想配列
のように連想配列を代入してしまうと、dataの中身を
変更することで引数のlistの値が変わってしまいます。

他のサイトを見るとJSONで渡したり、ディープコピーをすれば
改善できると記載があったのですが、どちらの方法でも値が変わってしまうようでした。

こういった場合、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);
}

Comments

[miyabi_pudding]

何をどうしたいのかイマイチわかりません。
listItemは使っていないし、
CalcBillもAfterPaymentも、returnしてる割には、その値をどこにも代入してないし。
せめて、最終的に得たいオブジェクトを、ベタで構いませんので、掲示してください。

[momiji0210]

失礼しました。わかりやすくするために処理をいくつか消したのですが、それが残ってしまっていたようです。

やりたいこととしては、連想配列を使った場合の値渡しをしたいです。

init関数内で引数用のdataListを作成しております。
こちらの値をCalcBillに渡すと、AfterPayment関数内でみると
CalcBillでdataにて計算した値が残ってしまいます。

おそらく参照渡しになっているからだと思います。

連想配列を使わずに
list = [1,2,3]
のような配列は上記でも値が変わらないのですが、連想配列だと値が変わってしまいます。

[miyabi_pudding]

なるほど。
おそらく、list[0].priceを出力しているからわかりずらいんだと思います。
list[1].priceの方は確かに、100と出るので、値が初期値ではありませんね

ちなみに、JavaScriptには、値渡しも参照渡しも存在しません。
変数は値に対する参照にしかすぎません。
回答に移った時、少しだけ説明入れさせていただきます。

Answer 1

[JavaScript]色々なディープコピー - Qiita

を参考に、ディープコピーメソッドを作った上で、
（上記を発展させ、クラスメソッド（prototype定義のメソッドも）含めてコピーできるようにしている）
下記でいかがでしょうか。

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には、値渡しも参照渡しも存在しません。
あくまで、変数は、メモリに格納された値、またはオブジェクトに対する参照にすぎません。

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でさせることはできなくなります。

const a = {value: 15};
let b = a;
// bは、新たに生成されたオブジェクトの参照となるため、aとは参照元さえも変わってしまう
b = {value: 15};
b.value = 20;
console.log(a.value); // 15

オブジェクトと同様に、値に対しても同じ参照の挙動となります。

const a = 15;
let b = a; // bは、同じ参照元の15という値の参照となる
b = 20; // bは、新たな値20の参照となる

console.log(a); // 15

const a = 15;
let b = a; // bは、同じ参照元の15という値の参照となる
// だが、オブジェクトと違い、裸の値であるため、どう代入し直しても、新しい値が生成される。（上記の通り新しいオブジェクトの代入は新たにメモリに格納されるので、裸の値と参照の挙動自体は同じ）
b = 15; // bは、値的には同じでも、参照元が変わってしまう。

console.log(a); // 15

つまり、変数に対して、値を渡している、参照を渡しているのではなく、
常に変数は、値（オブジェクト）に対しての参照そのものとなります。
値が入っている、参照が入っている、それを渡している、ではないというわけです。

以上です。

Comments

[AkitoshiManabe]

> あくまで、変数は、メモリに格納された値に対する参照にすぎません
この解釈が不十分でした。感謝！！

[momiji0210]

ご回答ありがとうございます！詳細な説明助かりました。
まだまだフワッとですが、少し理解できました。
アドバイスありがとうございます！

Answer 2

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]

※コードにコメント追記しました。

配列要素についても同様です。
関数の引数については、ちょっと失念。（同様だったと思います）

上記のように、値の変化をチェックして感覚的に覚えたのが、
「プリミティブ と インスタンス とで異なる挙動を示す」というものでした。

これでは、まともな回答になっていませんけど…。

Comments

[momiji0210]

サンプルソースありがとうございます。
JSの仕様がまだまだ理解できておらず申し訳ないです。

プリミティブ と インスタンスでやはり動きが違うのですね・・・。
全パターンテストできていたわけではないので、サンプルソース助かりました！

Answer 3

ここの値が0ではなくCalcBillで計算した値になる

そもそも、0になっているのですが（jsFiddle）。

そして、Object.create(オブジェクト)は、オブジェクトをプロトタイプとして別なオブジェクトを作る関数です。コピーはされません。

Answer 4

JSONで渡したり、ディープコピーをすれば

改善できると記載があったのですが、どちらの方法でも値が変わってしまう

解釈がおかしいのでは？

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に影響はない

再確認用

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に影響はない

Comments

[momiji0210]

ご回答ありがとうございます。わかりにくい説明で申し訳ないです。
いただきましたコードを一部変更して試してみたのですが値が変わってしまいました。

やりたいこととしましては、l2ではl1で変更した値を反映させたくありません。
この場合、l2[0].title = '1'のままの状態にしたいです。

const lm = [
{ title: '1' },
{ title: '2' },
{ title: '3' },
];

const l1 = lm[0];
l1.title = "100";
console.log(lm);//listMemberにさかのぼって変更

const l2 = JSON.parse(JSON.stringify(lm));
l2[1].title="200";
console.log(l2);

●ログ
Array [
Object {
"title": "100",
},
Object {
"title": "2",
},
Object {
"title": "3",
},
]
Array [
Object {
"title": "100",
},
Object {
"title": "200",
},
Object {
"title": "3",
},
]

[yambejp]

> l2[1].title="200";
> console.log(l2);

そりゃl2をみれば当然1番目の要素のtitleは変わるでしょう
（だってl2の要素いじってるんですから・・・）
console.log(l2)→console.log(lm)で確認してください

[momiji0210]

Object.createでもダメでした。
l2[0].titleの値を変更するとlm[0].titleの値まで200に変わってしまいます。
連想配列を使うことで参照渡しになっているのでと思います。

const lm = [
{ title: '1' },
{ title: '2' },
{ title: '3' },
];

const l2 = Object.create(lm);
l2[0].title="200";
console.log('aaa', l2[0].title, lm[0].title);

また下記のように連想配列を使わない場合は、値は変わらないようです。

const lm = [1,2,3];

[yambejp]

> Object.createでもダメでした。

Object.createの話は私はしていませんが・・・

[momiji0210]

度々失礼します。
l2[0].titleの値も変わってしまっていることが問題です。
l2[1].titleの値が変わることは当然ですが、[0]も変わるのは参照渡し担っているからだと思います。
lmはconstのため、値の変更はないかと思います。

[yambejp]

再確認用のサンプル上げておきました

> [0]も変わるのは参照渡し担っているからだと思います。

l2を作る前に参照渡しをしたl1をいじればlmに訴求されます
すでに変更されたlmをベースにl2をイジれば[0]は変更されるのは
当然です。よくよく考えを整理されたほうがよいでしょう

[momiji0210]

何度もご回答ありがとうございます・・・。
サンプルのご修正もありがとうございました。

const l2=JSON.parse(JSON.stringify(listMember));
を記載する位置で値が変わるのですね。

console.dir(listMember);//listMemberにさかのぼって変更
の下に書いたところ、元の値が変わることが確認できました。

頂いたサンプルコードだと値が変化しないことも確認しました。

この辺、まだなれておらず勉強になりました。もう少し自分でもいじってみます。

質問ばかりで大変申し訳ないです。
JSON形式にパースすると値は入っているのですが、取得時にundefinedエラーが出てしまいます。

listの中身がtitle１つなら問題ないのですが、
2つ以上の連想配列だとこの現象が起きてしまいます。
こちらはなぜなのかお分かりになりませんでしょうか。

● 処理

console.log('list[0].price',list[0].price);
let data = JSON.parse(JSON.stringify(list));
console.log('list',list);
console.log('data',data);
console.log('data[0].price',data[0].price);

● log

list[0].price 0
list Array [
Array [
Object {
"price": 0,
"title": "",
},
],
Array [
Object {
"price": 0,
"title": "",
},
],
Array [
Object {
"price": 0,
"title": "",
},
],
]
data Array [
Array [
Object {
"price": 0,
"title": "",
},
],
Array [
Object {
"price": 0,
"title": "",
},
],
Array [
Object {
"price": 0,
"title": "",
},
],
]
data[0].price undefined

[yambejp]

arrayを二重に指定してobjectをおいているので
list[0].priceは配列のなかからpriceを取り出そうとしています
つまりはundefined
const list=[
[{"price": 0,"title": "",},],
[{"price": 0,"title": "",},],
[{"price": 0,"title": "",},],
]

list[0][0].priceを参照してください

[momiji0210]

何度もご回答ありがとうございます。アドバイスのおかげで取得できました！
これはJSON形式の方法にしてしまうと、元のようにdata[0].priceと
アクセスできなくなってしまうのでしょうか。

yambejp様や他の方からJSの仕様を細かくご教示頂いて助かります・・・。
周りに聞ける方がいないので、本当にありがたいです。

[yambejp]

> これはJSON形式の方法にしてしまうと、元のようにdata[0].priceと
> アクセスできなくなってしまうのでしょうか。

ちょっと意図がわからないのですが、JSON形式にしたのが問題ではなく
二重配列を書いたのがいけないだけです
データ構造についてはきちんと自分なりに仕様を決めて
その方針に基づいた設定と参照をしないと正しい運用はできません

Answer 5

JSONで渡しても参照渡しになってしまうということですが、
下記の書き方で再定義しておけば、値渡しになりませんか？

JSON.parse(JSON.stringify(/*任意のオブジェクト*/));

Comments

[miyabi_pudding]

（JavaScriptには値渡しも参照渡しも存在しませんよー）

[AkitoshiManabe]

相互に参照しあっている状態を切るのには手っ取り早いコードですね