【JavaScript ES6学習】Destructured Assignmentオブジェクトのプロパティを変数に入れるときの省略形

【JavaScript ES6学習】基礎文法編 目次

codecademyで学習したことをまとめています。
プログラミング初心者の私が学習しながら書いた、完全に自分用のメモみたいなものなので、他人が見ると意味不明だったり、間違いがある可能性があるのでご注意ください。

codecademyは無料でかなりのことが学習できる素晴らしいサイトですが、英語です。
なのでこの記事に書かれている日本語の用語も間違っているかもしれません。

今回学習した項目

codecademy
JavaScript
Lesson 8 Destructured Assignment

Destructured Assignmentオブジェクトのプロパティを変数に入れるときの省略形

オブジェクトのkey-valueペアを引き出したり変数に入れたりしたい時がある。
下の例はオブジェクトvampireのプロパティresidenceを、変数residenceに格納する例。

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};

const residence = vampire.residence; 
console.log(residence); // Prints 'Transylvania' 

destructured assignmentと呼ばれるテクニックを使えば、次のように記述可能。
タイプ数が節約できる。

const { residence } = vampire; 
console.log(residence); // Prints 'Transylvania'

オブジェクトvampireの中にオブジェクトpreferencesが入っていて入れ子になっていますが、このpreferencesのプロパティdayもこのテクニックで変数に入れることが出来ます。

const { day } = vampire.preferences; 
console.log(day); // Prints 'stay inside'

【JavaScript ES6学習】基礎文法編 目次

 - プログラミング - JavaScript