「 const { } = 」が出てきて？？？となった人へ、分割代入

概要

題名にある通り、 const { } = についての説明をしようと思います。
自分は勉強していく中でこれが出てきてどういうこと？ってなったので調べた結果を書こうと思います。

分割代入

この const { } = は分割代入と言われます。
この{}はオブジェクトを参照していて分割代入は配列でも使うことができます。

使い方

実際にコードを書いてみたほうがわかりやすいと思います。

const obj = {a: 100, b: 200};

const { a, b } = obj;

console.log(a, b); //100, 200

上記のコードは下記のコードと同一の意味です。

const obj = {a: 100, b: 200};

const a = obj.a;
const b = obj.b;

console.log(a, b); //100, 200

分割代入を使うことで綺麗に書くことができます。
また、関数も用いることができます。

function f() {
  return {a: 100, b: 200};
}

const { a, b } = f();

console.log(a, b); //100, 200

また関数の引数にも当てることができ、入れ子になったオブジェクトも下記のように参照できます。

function user() {
  return {
    name: "Bob",
    like: {
      food: "curry",
      sport: "soccer"
    }
  };
}

function practice({name, like: {food}}) {
  console.log(name, food);
}

practice(user()); //Bob, curry

上記で行ってきた分割代入を配列の場合でも同様に行うことができます。

感想

疑問に思ったJavascriptの記法について書いてみました。
今後も疑問に思ったことは書いていきたいです。

以上です。参考になれば幸いです。