[ES6]構造化代入(Destructuring)

コードを簡潔に書くために構造化代入(Destructuring)を効果的に使おう

出典:スタイルガイドから考えるES6でより良いコードを書きたい人向けのES6入門 | I am mitsuruog

ES6からはオブジェクトと配列に構造化代入が導入されました。

普段のコードの中で、オブジェクトの詰め替えを行っているケースは意外に多く、中間参照変数が多い場合、名前付けに悩むケース(tmp~にするかうーんみたいな)が多々あります。

// ES5)
function getFullName(user) {
  var firstName = user.firstName;
  var lastName = user.lastName;
  return firstName + ' ' + lastName;
}

// ES6)
function getFullName({firstName, lastName}) {
  return `${firstName} ${lastName}`;
}

// 呼び出し側
console.log(getFullName({
  firstName: 'taro',
  lastName: 'yamada',
})); // => taro yamada

オブジェクトを分割代入する際に、変数に別名をつける(備忘録)

出典:オブジェクトを分割代入する際に、変数に別名をつける(備忘録) – Qiita

様々な場面で使えると思うが、APIを複数回叩く場面で使ってみた。
APIのレスポンスをオブジェクトで受け取る際に、名前の重複を回避して分解できる。

// APIレスポンスの共通オブジェクト{response, error}があるとして
const { response: res1, error: err1 } = yield apiFunction1()
const { response: res2, error: err2 } = yield apiFunction2()

if (!(err1 || err2)) {
  /* ... */
}

// 別名をつけないと、冗長でちょっと気持ち悪いと感じる時もある
const object1 = yield apiFunction1()
const object2 = yield apiFunction2()

if (!(object1.error || object2.error)) {
  /* ... */
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です