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

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@yuKIO9TxDI52HtZJ'の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする