あいつの日誌β

働きながら旅しています。

ES2015 でとまどいがちな記法 Object initializer と Spread Operator

あらすじ

ES6 の記法を全て覚えてから ES6 を書くよりも、書きながら勉強したほうが効率が良かったりします。 なんですが写経している時に分からない記法が出てきた場合検索しづらくて困ると思います。

というわけで私がどうやって Google に質問すればいいのか分からなかった記法を2つ紹介します。

Object initializer: オブジェクト初期化子

以下のような ES5 の記法が

const a = 1
const b = 2 
const c = 3
const object = {a: a, b: b, c: c}

ES6 では以下のように省略できます。

const a = 1
const b = 2 
const c = 3
const object = {a, b, c}

また、以下のような ES5 の記法が

function x(obj) {
  const a = obj.a
  const b = obj.b
  console.log(a, b)
}

const a = 1 
const b = 2 
x({a: a, b: b})

ES6 では以下のように省略できます。

function x({a, b}) {
  console.log(a, b)
}

const a = 1 
const b = 2 
x({a, b}) 

この書き方は最初慣れないと気持ち悪いですが使っているうちにだんだん気持ちよくなります。

Spread Operator: スプレッド演算子

...array とか ...object を初めて見た人は多分意味が分からなくて困ると思います。

array を spread する

ES5 では以下のように記述していたものが

function f(array) {
  console.log([array[0], array[1], array[2], 4, 5])
}

f([1, 2, 3])

ES6 では以下のように省略できます。

function f(array) {
  console.log([...array, 4, 5])
}

f([1, 2, 3])

object を spread する

ES5 では以下のように記述していたものが

function f(obj) {
  const a = obj.a
  const b = obj.b
  const c = obj.c
  console.log({a: a, b: b, c: c, d: 4, e: 5}) 
}

const a = 1 
const b = 2 
const c = 3 
f({a: a, b: b, c: c}) 

ES6 では以下のように省略できます。

function f(obj) {
  console.log({...obj, d: 4, e: 5}) 
}

const a = 1 
const b = 2 
const c = 3 
f({a, b, c})