javascript 変数宣言の表記がわからない

Question

let { chapter, section, exercise } = this.findByExerciseId(
      course,
      exerciseId
    );

上記コード、letの後の{}はどのような役割ですか？？
変数をいくつか宣言するのにはカンマだけでいいという認識なのですが

Answer 1

中括弧を使った記法は分割代入といって、単なる変数宣言とは意味が違います（MDN）。

// 以下のコードと同じ意味
const ret = this.findByExerciseId(
      course,
      exerciseId
    );

let chapter = ret.chapter, section = ret.section, exercise = ret.exercise;

Answer 2

「オブジェクトの分割代入」というものです。

【分割代入 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#オブジェクトの分割代入

【《JavaScript》ES6の分割代入のはじめかた。 - Qiita】
https://qiita.com/uto-usui/items/a9d17447fe81c17c41fa#オブジェクトの分割代入

Answer 3

ES2015で追加された分割代入という構文です。
分割代入 - MDN

右辺はオブジェクト固定であり、
左辺では右辺のオブジェクトを分割しながら変数を宣言します。

const hoge = {foo: 123, bar: 234};
let {foo, bar, piko} = hoge;
console.log(foo, bar, piko); // 123, 234, undefined

---

この様にJavaScriptは下位互換を残しつつも、
ES2015では様々なモダンな構文を追加しているので、
ES2015の構文をバリバリに活用したコードはES5までのコードと比べて別次元のように違います。

ES2015やES6といったワードで検索してみてください。

Answer 4

サンプルコード

// 1つのオブジェクトを返すデモ関数
function findSiteById(id) {
  
  return {
    id: 1,
    name: 'teratail',
    type: 'web',
    image: 'default.jpg'
  }
  
}

// 複数のオブジェクトを持つ配列を返すデモ関数
function findSitesByType(type) {
  
  return [
    
    {
      id: 1,
      name: 'teratail',
      type: 'web',
      image: 'default.jpg'
    },
    
    {
      id: 2,
      name: 'facebook',
      type: 'web',
      image: 'default.jpg'
    },
    
    {
      id: 3,
      name: 'yahoo',
      type: 'web',
      image: 'default.jpg'

    },
    
    {
      id: 4,
      name: 'google',
      type: 'web',
      image: 'default.jpg'

    }
    
  
  ]
  
}

//オブジェクトの分割代入
const { id, name, ...params } = findSiteById(1);
console.log(id); //1
console.log(name); //teratail
console.log(params); //{ type: 'web', image: 'default.jpg' }

console.log('==========');

//配列の分割代入
const [a, b, ...rest] = findSitesByType('web');

console.log(a);
//{ id: 1, name: 'teratail', type: 'web', image: 'default.jpg' }

console.log(b);
//{ id: 2, name: 'facebook', type: 'web', image: 'default.jpg' }

console.log(rest); 
//[ { id: 3, name: 'yahoo', type: 'web', image: 'default.jpg' },
//{ id: 4, name: 'google', type: 'web', image: 'default.jpg' } ]

https://repl.it/repls/DifferentCompatibleLightweightprocess