ESLint airbnbを使用している環境下でObject.assignを使うとスプレッド構文に修正される

ESlint JavaScript

備忘録

環境

  • vscode
  • linterにESLintのairbnbを使用
  • ファイルの保存時にauto fixを設定

上記の環境下で

// code1
Object.assign({}, state, {
  datas: []
});

を書くと、

// code2
{ ...state, datas: [] };

に、自動で修正される。

Object.assignとは

Object.assign() メソッドは、すべての列挙可能なプロパティの値を、1つ以上のコピー元オブジェクトからコピー先オブジェクトにコピーするために使用されます。戻り値としてコピー先オブジェクトを返します。

引用元：MDN

オブジェクトのコピーを行うメソッド。
Reduxではstateがイミュータブルなため、別オブジェクトとしてstateを更新するためによく使う。

スプレッド構文(...)とは

スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

引用元：MDN

code2の例ではstateオブジェクトの中身を展開している。
さらに{}で囲われているため、ES9で追加されたObjectリテラルとして使用されるので、
新たなObjectとしてコピーが生成されている。
MDNにも書かれているがこちらのほうがObject.assign()を使うよりも短く書くことができる。

なぜauto fixされるのか

自動で修正されるのはスプレッド構文がdeep copyでObject.assignがshallow copyだと思っていたが、全然違った。
改めてMDNを読み直していたらスプレッド構文のObjectリテラルもshallow copyだった。

検索すると、こんな記事も

bambielli.com

Airbnb JavaScript スタイルガイドを読むと（あたりまえだが）ちゃんと書いてあった。。

mitsuruog.github.io

3.8 オブジェクトをshallow-copyする場合は...

結局、なぜauto fixされるのかと言うと、
短く書けるからというだけなんだろう。

ちょっと気になって調べたが、スプレッド構文の誤った認識を正せて良かった。
公式ドキュメントの読み込みをサボりがちなため戒めに。。