BETA

ES2015(ES6)で分割代入(destructuring-assignment)でオブジェクトのプロパティアクセスを変数で行う

投稿日:2018-11-08
最終更新:2018-11-08

概要

分割代入(destructuring-assignment)でオブジェクトのプロパティアクセスを変数で行う方法の紹介。

解決方法

const { [propName]: value } = obj;

背景

eslintは eslint-config-airbnb を利用している。

以下のような、オブジェクトのプロパティ名に変数を使ってアクセスする時に、react/destructuring-assignment のeslintエラーがでる。

function (obj, propName) {
  const value = obj[propName];
    // ↑eslint error
    // error  Must use destructuring props assignment  react/destructuring-assignment
    /* ... */
}

propNameは変数なので、[] で囲って、分割代入(destructuring-assignment)の構文にする。

備考

プロパティ名が分かっている時(変数じゃない時)はこう

const value = obj.prop; // eslint-error

const { prop: value } = obj;

プロパティ名が分かっていて、代入したい変数名も同じにしたい時はこう

const id = obj.id; // eslint-error

const { id } = obj;

参考記事 Destructuring and parameter handling in ECMAScript 6 http://2ality.com/2015/01/es6-destructuring.html

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@yuKIO9TxDI52HtZJ'の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!