' P '

whatever I will forget

JavaScript 値渡しと参照渡し

CRT600 JavaScript

前提1 - 値渡しと参照渡し

  • 値渡し: コピーされるので元の値を変えてもコピー先は影響をうけない.
  • 参照渡し: コピーされないので元の値を変えるとコピー先も値が変わってしまう.

前提2 - JavaScriptにおける値渡しと参照渡し

  • しかしそもそもC言語のものとは違い、明確にどうこう振り分ける必要もないという説:

qiita.com

  • 単純に、JavaScriptは、値を保持している場所(値の参照)を保持しているだけとのこと.

めっちゃ混乱する

  • 値が変わっていることを説明している記事もあれば、変わらないことを主張している記事もある、、？？？
  • 発端は下記:
    • 有名なJavaScript問題をやっていて混乱したのでメモ
    • 下記は何が表示されますか？ってやつ
let person = { name: "Lydia" };
const members = [person];
person = null;

console.log(members);
  • 答えは、membersは代入時のpersonの値を保持している、となる.
  • これはいわゆる値渡し; personオブジェクトの参照値をmembersにセットし、新しくpersonオブジェクトはnullの参照値をセットしているので、membersの値は変わらない.

    超参考

note.affi-sapo-sv.com

zenn.dev

サンプル1

let a = 100;
let b = a;

console.log('a : ', a);
console.log('b : ', b);

// a : 100
// b : 100

a = 200;

console.log('a : ', a);
console.log('b : ', b);

// a : 200
// b : 100

b = a;

console.log('a : ', a);
console.log('b : ', b);

// a : 200
// b : 200
  • やはり真ん中の console.logに注目, これはいわゆる値渡し.
  • 変数aを変更しても変数bの値は自動的には上書きされない.
  • 実際に変数aが参照した場所の値（参照値）を変数bに代入しないと値は変更されない.

サンプル2

var a = { val: 10 }
var b = a
a.val = 100
console.log(b) // { val: 100 }
  • いわゆる参照渡しといわれているもの.
  • オブジェクトのプロパティの上書きについては、変数a・bもどちらも参照値が同じであるため、元が変更されると先も変更されてしまう、ということ.

サンプル3

  • person.cityの参照値をcity変数にセットしただけ.
  • cityにはamsterdamがセットされるが、personの値は変わらない.
const person = {
  name: "Lydia",
  age: 21
}

let city = person.city
city = "Amsterdam"

console.log(person)
// outputs original person object

オブジェクトの等価

  • オブジェクトを比較する場合は、参照値が同じかどうかで決定される.
console.log({ age: 18 } == { age: 18 }); // false
console.log({ age: 18 } === { age: 18 }); // false

const a = { age: 18 };
const b = a;
console.log(a == b); // true
console.log(a === b); // true