スプレッド構文でnullとundefinedを使う

JavaScript (ES2015) スプレッド構文のメモ - かもメモ

スプレッド構文でnullやundefinedを渡した場合どうなるか知りたかったので調べた。

結論、

[...null] // => エラー
[...undefined] // => エラー
{ ...null } // => {}
{ ...undefined } // => {}

という感じで配列だとエラー、オブジェクトだと空オブジェクトになる。

APIを叩く際のパラメーターの作成などでnullやundefinedになる変数を渡すみたいなことはあると思うので、この性質を知っておくのは大事そう。

以下知らなかったこと

配列を{...array}でオブジェクト中にコピーすると、配列のインデックスをキーとしてオブジェクトにコピーされます。

const array = ['aaa', 'bbb']
const obj = { a: 10, ...array, b: 20 }
console.log(obj) // => { '0': 'aaa', '1', 'bbb', a: 10, b: 20 }

const array = ['aaa', 'bbb']
const obj = { '0': 'hoge', '1': 'fuga', '2': 'piyo', 0: 'zero', 1: 'one', 2: 'two' }
// => { 0: 'zero', 1: 'one', 2: 'two' }
// '0'と0、'1'と1、'2'と2は同じキーになり上書きされる

console.log({ ...obj, ...array }) // => { 0: 'aaa', 1: 'bbb', 2: 'two' }

文字列(String)はArray-likeなオブジェクトなので...strで1文字づつ配列にすることができる。

const str = 'aiueo'
console.log([...str]) // => ['a', 'i', 'u', 'e', 'o']

{...null}, {...undefined}が{}になることを利用するとオブジェクトのデフォルトオプションをつくったりできる

const func = (options) => {
  return { name: 'hoge', ...options }
}
const obj1 = func() // => { name: 'hoge' }
const obj2 = func({ name: 'fuga' }) => { name: 'fuga' }