ES2015（ES6）で読めなかった構文

Reactをちゃんと勉強しようかと今どきのJavascriptのコードを見ているとわからない(というか読めない)ことが多々あった。記号とかの意味がわからないと検索もしずらかったのでメモしておく。

プロパティの略記法(ES6)

オブジェクトにプロパティをセットするときに代入する変数名と代入される変数名を同じにすると省略できる。オブジェクトの中にプロパティがない？値がセットされているのかと思って混乱した。

// ES6
var newUser = (id, greet) => {
  return {
    flag: true,
    id,
    greet
  }
}

// ES5
var newUser = function(id, greet) {
  return {
    flag: true,
    id: id,
    greet: greet
  }
}

// 呼び出す
var user = newUser(1, () => console.log('おはよう'))
user.greet() // => "おはよう"

スプレット演算子(ES6)

「...」で配列を展開してくれる。

// ES6
var items1 = [1, 2, 3]
var items2 = [4, 5, 6]
var items = [...items1, ...items2]

// ES5
var items = items1.concat(items2)

分割代入(ES6)

「プロパティの略記法」の逆のイメージ。
オブジェクトのプロパティ名と同じ変数名を{・・・}内に定義すると代入してくれる。

// ES6
var props = {
  user: {
    id: 1,
    flag: true,
    greet: () => console.log('おはよう')
  }
}

var { user } = props
var { id, flag, greet } = user
user.greet() // => "おはよう"

計算されたプロパティ名(ES6)

const column = "age"
obj = {
  [column]: 18
}
console.log(obj) // { age: 18 }

returnのカッコ (おまけ)

これはES6とか関係なく単に頭がおかしかった。Reactのコードでよくあるこんな感じのコード。returnという関数が引数をとるのかと錯覚してしまった。。式を返してるだけですね。。

class Hoge extends Component {
  render() {
    return (
      <div />
    );
  }
}

基本ができてない。。以上です。