Reactで開発的なことをしてみたら、わりとReactそのものよりES6の記法的な質問がそれなりにあったのを感じたので雑多に問答集

Q. `var`と`let`と`const`って何が違うの？

A. ざっくり言えばこう

var a = "hoge" // もう忘れていい
let b = "fuga" // 変更できる値。mutable
const c = "baz" // 変更できない値。immutable

varに関しては、多分使うことはもう無いはず（と僕は思っている）。ESLintでもno-varというルールがあるので、設定しちゃっている。

Q. `let obj = { hoge }`っていうこれなに

A. {hoge}は{hoge: hoge}となる。いわゆるシュガーシンタックス的なもの

こんな感じ。便利。

let hoge = "fuga"

let obj = {
    hoge
}

console.log(obj) 
// { hoge: "fuga" }

A. さっきの逆だと思っていい。let hoge = c.hogeと展開する。これは割りと他の言語にありがちな記法

const { hoge } = obj

console.log(hoge)
// "fuga"

これだとあんまり他の言語だと見ない（気がする）
そしてこの記事書いてる時に気づいたけど展開されるのは末端の要素だけのようだ

let a = {
  b : {
    c : "d"
  }
}

let { b : { c } } = a
console.log(c) // "d"
console.log(b) // undefined

let fooFn = function({ hoge, fuga }){
    console.log(hoge, fuga)
}

fooFn({
    hoge: "aaa",
    fuga: "bbb"
}) 
// aaa, bbb

javascriptだとオプションとかをobject形式で渡すこと多いのでよくつかう。

let foo = "baz"
let bee = "boo"
retrun <Cmp { ...{ foo, bee } } />
// <Cmp foo={foo} bee={bee} /> と同じ

{a,b}と一緒なのだけど、reactの記法上こう書くしか無い

let a = 1
let b = 2
let c = { a, b }
let d = { ...{ a, b } }

console.log(c) 
console.log(d) 
// どっちもこうなる{ a: 1, b:2 }

詳しくはReactのドキュメント参照。ES7になったら改善しそう

展開した変数をキーとして使えます。
使わないようでわりとあると便利。

let b = "foo"
let a = { [b] : "baz" }
// a = { foo: "baz" }