【JavaScript】変数と参照の振り返り⑧ 分割代入と値・参照の比較

はじめに

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

前回の記事

目的

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

本題

1.参照と分割代入

基本構文.

let{a,b} = object;

オブジェクトから特定のプロパティを抽出して宣言を行う場合に使われる。

この場合、aとｂがオブジェクトの初期値として扱われる。

例

const a = {
  prop: 0
}
// 分割代入
// プロパティの名前と変数の名前は一致させる
let { prop } = a;
prop = 1;
// ここで出力されるのは0と1となる
// 分割代入により変数propの値に1が代入されている
// 最初に定義した{prop}には影響を受けない
console.log(a, prop);

関数と分割代入

// 関数fnを定義
function fn(obj){
  // 分割代入
  let { prop } = obj;
  // 変数の値を変更
  prop = 1;
  // 結果を出力
  console.log(obj, prop);
}
// { prop : 0}と1と出力される
fn(a);

関数内で特定のプロパティを使用したい場合は以下のように書き換えることができる

// 関数fnを定義
// 下記のようにすると渡ってきたオブジェクトがこの時点で分割代入で展開されて、propという変数が使用できるようになる
// オブジェクトの中身は変更されない
function fn({ prop } ){
  // 変数の値を変更
  prop = 1;
  // 結果を出力
  console.log(a, prop);
}
// { prop : 0}と1と出力される
fn(a);

オブジェクトが多階層だった場合

// cがprop1を格納しており、さらにprop2を格納している状態
const c = {
  prop1: {
    prop2: 0
  }
}
// 分割代入
let {prop1} = c;
// prop1を出力すると{prop2: 0}と出力される
console.log(prop1);
// その中身のprop2の値を変更すると
prop1.prop2 = 1;
// 結果はprop1の中身のprop2の値が1になる
// cからprop1の値を抽出した時点で、参照自体が保持される
console.log(c, prop1);

2.参照の比較と値の比較の違い

// オブジェクトを定義
const a = {
  prop: 0
}

const b = {
  prop: 0
}

// aとbは同じオブジェクトであるか確認する
// 等価性を下記で確認するとfalseになる
// その理由は変数a,bに入っているのはオブジェクトへの参照であるため
// オブジェクトへの参照同士を確認して参照先のオブジェクトが変わってくるのでfalse
console.log(a === b);
// 抽象的な等価性も同様
console.log(a == b);

// 確認するにはオブジェクトの中にあるプロパティを比較する必要がある
// 下記のように書くとtrue
console.log(a.prop === b.prop);

// cにaを代入した場合
const c = a;
// 下記はtrueとなる
// 参照先を12行目で渡しているため
console.log(a === c);

• プリミティブ型では値の比較
• オブジェクトでは参照の比較

が行われる

今日はここまで！

参考にさせて頂いた記事

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