Destructuring

[azu]

#17 基本文法

Destructuringについて扱う。
Destructuringは他と組み合わせ使う傾向があるけど、一見するとよくわからないものなので一つの文法として紹介した方が良さそう。

• 細かいユースケースについては、他の文法の紹介時に含めるような形にする
• Promise.all
• module (これ実は構文として違うんだろなー)
• オプションオブジェクト (これは後半のユースケースでも出てくる?)

など色々あるが、基本的な配列とオブジェクトの2種類を紹介する形にする。

追記: 2018-12-16

• 基本的な形は演算子の=で紹介する
• 配列、オブジェクト、関数 においてそれぞれ軽くDestructuringについて扱う

という程度に留めておく。

目的

分割代入（Destructuring assignment）という構文の名前を知ること。
初めてみたときこの構文は混乱するので、この名前を知っていればあとはMDNなど色々なリソースでより詳細な構文を知ることができるという点を目的としている。 分割代入（Destructuring assignment）をすべて解説しないで、最低限(オブジェクト、配列、関数)だけに絞ってははなす。

オブジェクトについては、モジュールでも同じような構文となるため目に慣れておいて欲しいという点も含めて何箇所かにだしている。

Tasks

• 演算子と暗黙的な型変換の章を移動(配列、オブジェクト、関数より前) refactor(operator): 演算子と暗黙的な型変換を移動 #589
• 演算子の=で紹介
• 配列で const [a, b] = [1, 2] を紹介 配列、オブジェクト、関数の仮引数における分割代入についてを追加 #593
• オブジェクトで const {a, b} = { a: 1, b: 2 } を紹介 配列、オブジェクト、関数の仮引数における分割代入についてを追加 #593
• 関数の引数での分割 Object.entries({}).map(([key, value]) => {})

[azu]

Destructuringは異様に複雑なことも書けるので、ほどほどというものを上手く言葉にまとめたい感じ。

• ES6 Destructuring Recipes | Untangled
• The Most In-Depth Yet Understandable ES6 Destructuring Tutorial (complete with Assembled Avengers) | Untangled

以前、仕様の議論でも以下のはOKなの?とか色々話がでていたので、特殊な使い方より普通の人が普通に使うパターンについて解説したい

var obj = {};
let { } = obj;

• Destructuring declarations that bind nothing should probably be an early error · Issue #97 · tc39/ecma262

[azu]

他の言語では多重代入と言われてたりする。
やっぱりルールが複雑化しやすいのは同じっぽい

• 複数の値をまとめて代入(多重代入) | タプル | プログラミング言語の比較 | hydroculのメモ

[yumetodo]

C++だとC++17に提案されている
P0341R0: Leveraging parameter packs outside of templates
とか
C++17入りが決定した
P0217R2: Wording for structured bindings
が該当しますかねぇ

[azu]

My New Favorite ES6 Toy: Destructured Objects as Parameters | CSS-Tricks

[azu]

• 演算子の=で紹介
• 配列で const [a, b] = [1, 2] を紹介
• オブジェクトで const {a, b} = { a: 1, b: 2 } を紹介
• 関数の引数での分割 Object.entries({}).map(([key, value]) => {})
  • 適当な場所がない気がする
  • Edit: 章ごとのページ量を可視化する #554 (comment)
  • operatorが今"関数"より後にあるけど、"演算子"の部分はもっと前に移動できそう
  • そうしたら => 演算子 -> 関数の宣言 -> 配列 -> オブジェクト とそれぞれDestructuringを扱えるようになる。
  • 演算子を前に持ってくる場合は、少し分量が多いので、もう少し薄くしたい気がする

[azu]

📝 = と 関数のDestructuringは構文的には異なる定義

• https://tc39.github.io/ecma262/#prod-AssignmentPattern
• https://tc39.github.io/ecma262/#prod-BindingPattern