オブジェクトの残余プロパティとスプレッドプロパティ

オブジェクトの残余プロパティとスプレッドプロパティについて説明する前に、非常に似た機能を思い出してみましょう。

ES2015 配列の残余要素とスプレッド要素

古き良きECMAScript 2015は、配列の分割代入における残余要素と配列リテラルにおけるスプレッド要素を導入しました。

// 配列の分割代入における残余要素:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// 配列リテラルにおけるスプレッド要素:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: オブジェクトの残余プロパティとスプレッドプロパティ 🆕

それでは、何が新しいのでしょうか？ 提案により、オブジェクトリテラルにも残余プロパティとスプレッドプロパティが使用可能になります。

// オブジェクトの分割代入における残余プロパティ:
const person = {
    firstName: 'Sebastian',
    lastName: 'Markbåge',
    country: 'USA',
    state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }

<!--truncate-->
// オブジェクトリテラルにおけるスプレッドプロパティ:
const personCopy = { firstName, lastName, ...rest };
console.log(personCopy);
// { firstName: 'Sebastian', lastName: 'Markbåge', country: 'USA', state: 'CA' }

スプレッドプロパティは多くの状況でObject.assign()よりもエレガントな代替手段を提供します。

// オブジェクトを浅くクローニングする:
const data = { x: 42, y: 27, label: 'Treasure' };
// 従来の方法:
const clone1 = Object.assign({}, data);
// 新しい方法:
const clone2 = { ...data };
// どちらも以下の結果になります:
// { x: 42, y: 27, label: 'Treasure' }

// 二つのオブジェクトを統合する:
const defaultSettings = { logWarnings: false, logErrors: false };
const userSettings = { logErrors: true };
// 従来の方法:
const settings1 = Object.assign({}, defaultSettings, userSettings);
// 新しい方法:
const settings2 = { ...defaultSettings, ...userSettings };
// どちらも以下の結果になります:
// { logWarnings: false, logErrors: true }

ただし、スプレッドがセッターを扱う方法にはいくつか微妙な違いがあります。

1. Object.assign()はセッターをトリガーしますが、スプレッドはしません。
2. 継承された読み取り専用プロパティを介してObject.assign()が独自プロパティの作成を防ぐことができますが、スプレッド演算子では防げません。

Axel Rauschmayerの詳細な解説にこれらの注意点がより詳しく説明されています。