Help us understand the problem. What is going on with this article?

「 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の記法について書いてみました。
今後も疑問に思ったことは書いていきたいです。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away