[JavaScript] 展開代入について const { data } = ...ってやつ

Vue.jsやReactでよく見かけるconst { data } = ほにゃららってやつがどういう処理を行なっているのか調べました。

展開代入

 展開代入と呼ぶらしいです。

実際の式を見て内容を理解しましょう。

まずはこの式

const user = {
  name:     "shin",
  email:    "shin@gmail.com",
  password: "0000"
}

const name = user.name
console.log(name)

userオブジェクトを定義し、そのオブジェクトのnameというプロパティをname変数に代入しています。

これを展開代入を用いると

const user = {
  name:     "shin",
  email:    "shin@gmail.com",
  password: "0000"
}

const { name } = user
console.log(name)

こんな感じで書けます。もうこれで怖くないです。

おまけ　調べるきっかけになったコード

以下のコードがきっかけで調べました。

const { data } = axios.post('/v1/todos', { todo });

axiosでサーバー側と非同期通信し、レスポンスの中のdataプロパティだけ取り出してdataに格納しています。

VueやReactいじってると結構見るんじゃないでしょうか？

また、

import React, { Component, PropTypes } from 'react';

Reactのコンポーネントでよくimportするこれも展開代入だったのでしょう。

まとめ

そんなに難しいこと言ってないからすぐに調べておけばよかったです。