【JavaScript】変数と参照の振り返り⑥ 参照とコピーについて

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 変数についての理解を深める

#本題
###1.プリミティブ型とオブジェクト

####用語の説明

データ型：文字列、数値などの異なる値の型　→　８種類

このデータ型は２種類に分けることができる。

プリミティブ型

• 変数には値が格納される。
• 一度作成するとその値を変更することはできない。

オブジェクト

• プリミティブ型以外の型を指す。
• 変数には参照が保持される。
• 値を変更することができる。
• 名前（プロパティ）付きの参照を管理する入れ物

###2.参照とコピー

プリミティブ型とオブジェクトで値をコピーした場合には挙動が変わる。

####例

#####プリミティブ値のコピー
参照先の値がコピーされる。

// プリミティブ型
// 変数aはhelloという値への参照を保持している
let a = "Hello";
// 変数bをaに代入
// ここで変数bにもhelloという値への参照をコピーした
let b = a;
// 変数aの参照先である値自体が変更されるわけではない
// bに"bye"が格納されるだけでaに代入されたわけではない
b = "bye";
console.log(a,b);

// それぞれの値が独立しているのでbを変更したからaも変わるというわけではない。

#####オブジェクトのコピー
オブジェクトへの参照がコピーされる。

let c = {
  prop: "hello"
}

let d = c;
// 値を"bye"に変更すると
d.prop = "bye";
// どちらも"bye"に変更されてしまう
console.log(c,d);
// これはcもdも同じオブジェクトへの参照を保持しているため

propを変更するのではなく、dに新しい値を入れるとどうなるか。

let c = {
  prop: "hello"
}

let d = c;
//  変数dにオブジェクトを定義
d = {};
// このようにすると互いの変数に影響がない
// それぞれの{...}への参照をコピーしているため
console.log(c,d);

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム