スプレッド構文と非破壊的処理について｜エンジニアBLOG

現在開発を行っている案件にてスプレッド構文と非破壊的処理について意識してコーディングを行うようになったのでまとめたいと思います。

破壊的処理と非破壊的処理

破壊的処理
元の要素自体を変更する処理のことです。

const mutable = [
  { label: 'mutable0', mutableValue: 0 },
  { label: 'mutable1', mutableValue: 1 },
  { label: 'mutable2', mutableValue: 2 },
];
mutable.push({ label: 'mutable3', mutableValue: 3 });
// 出力
console.log(mutable);
[
  { label: 'mutable0', mutableValue: 0 },
  { label: 'mutable1', mutableValue: 1 },
  { label: 'mutable2', mutableValue: 2 },
  { label: 'mutable3', mutableValue: 3 }
]

非破壊的処理
元の要素自体は変更されず、新しい要素の作成を行います。

const immutable = [
  { label: 'immutable0', immutableValue: 0 },
  { label: 'immutable1', immutableValue: 1 },
  { label: 'immutable2', immutableValue: 2 },
];
const addImmutable = [
  ...immutable,
  { label: 'immutable3', immutableValue: 3 },
];
// 出力
console.log(immutable);
[
  { label: 'immutable0', immutableValue: 0 },
  { label: 'immutable1', immutableValue: 1 },
  { label: 'immutable2', immutableValue: 2 }
]
console.log(addImmutable);
[
  { label: 'immutable0', immutableValue: 0 },
  { label: 'immutable1', immutableValue: 1 },
  { label: 'immutable2', immutableValue: 2 },
  { label: 'immutable3', immutableValue: 3 }
]

上記、破壊的処理と非破壊的処理の違いとしては見ての通り元の要素が変更されるかされないかの違いになります。
個人的には、API等のデータをフロント側で加工する場合には元の要素を変更しない非破壊的処理のほうがバグに繋がらず安全だと考えています。

スプレッド構文と非破壊的処理

ここではスプレッド構文と非破壊的処理について紹介したいと思います。

スプレッド構文とは
非破壊的処理のソースコードの際に使っていたのですが、【...imutable】このドットが3つ並んでいる書き方のことです。
簡単に説明するとオブジェクトや配列の要素を展開してくれる便利な構文になります。
詳しくはこちらを参照ください

const array = [0, 1, 2, 3];
console.log(...array);
// 出力
0 1 2 3

const object = { isOpen: false, stateValue: 'test' };
console.log({ ...object });
// 出力
{ isOpen: false, stateValue: 'test' }

スプレッド構文を使用することで破壊的処理を非破壊的処理に変換することができます。
下記、参考程度の例になります。
例：ある特定の箇所に要素の追加を行います。

破壊的処理

const months = ['Jan', 'March', 'April', 'May'];
months.splice(1, 0, 'Feb');
console.log(months);
// 出力
[ 'Jan', 'Feb', 'March', 'April', 'May' ]

非破壊的処理

// 非破壊的処理
const months = ['Jan', 'March', 'April', 'May'];
const imutableMonths = [
  ...months.slice(0, 1),
  'Feb',
  ...months.slice(1),
];
console.log(imutableMonths);
// 出力
[ 'Jan', 'Feb', 'March', 'April', 'May' ]

上記のようにスプレッド構文と非破壊的メソッドのslice()を使用して破壊的処理から非破壊的処理に置き換えることができました。

最後に

個人的に非破壊的処理を行うことで安全に配列やオブジェクトの操作を行えると考えています。
ただし、破壊的処理がダメで非破壊的処理が良いといったことではなくそれぞれにメリット、デメリットがあるのでどちらの処理を使用する場合にも意図をもって実装することが大切だと考えます。