ミュータブルとイミュータブルとは？破壊的と非破壊的とは？ - React.js や Vue.js を学ぶ前に知っておいたほうが良い JavaScript のこと

20210105

JavaScript のデータ型には プリミティブ型 と オブジェクト がある。

プリミティブ型

プリミティブ型は一度作成したら変更できない。つまりイミュータブルである。

オブジェクト型

オブジェクト型は一度作成しても値自体は変更できる。つまりミュータブルである。

破壊的と非破壊的とは

オブジェクト型は一度作成しても値自体は変更できてしまうので、 const で宣言しても変更可能。

const obj = { key: "value" };
obj.key = "Hi!";
console.log(obj.key); // => "Hi!"

これが破壊的な変更。

変数は一度代入したら変更しないほうが良い。破壊的な変更を行ってしまうと予期せぬバグを生んでしまう原因となる。

ではどうするか。オブジェクトを複製して新しいオブジェクトを作って変更する。

`Object.assing()` を使う方法

const obj = { key: "value" };
const newObj = Object.assign({}, obj, { key: "Hi!" });
console.log(obj.key); // => "value"
console.log(newObj.key);  // => "Hi!"

Spread 構文を使う方法

const obj = { key: "value" };
const newObj = { ...obj,  key: "Hi!" };
console.log(obj.key); // => "value"
console.log(newObj.key);  // => "Hi!"

破壊的に変更してしまうと値が変わったことが検知できなくなってしまう。

参考サイト

JavaScript Primer データ型とリテラル
 Why Immutability Is Important - React Tutorial