77
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-26

#概要
題名にある通り、 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の記法について書いてみました。
今後も疑問に思ったことは書いていきたいです。

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

77
44
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
77
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?