EcmaScript6のハマり記法問答集（変数編）

8103 ワード
React JSX babel es6 JavaScript JavaScript テキストリンク

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" }

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

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形式で渡すこと多いのでよくつかう。

補足：reactだったらこんなふうに利用する

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

補足の補足：↑の{ ...{ a, b } } こういうの何

{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になったら改善しそう

Q. a = { [b] : c }っての何

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

let b = "foo"
let a = { [b] : "baz" }
// a = { foo: "baz" }
scrotは入門から精通まで
【4】データベース関数ライブラリを自分で書く—レコードを取得する