初めに

JavaScriptを学習するにあたってイミュータブル・ミュータブルという言葉の意味が曖昧だったので特徴や違いなどについて学習した際の備忘録になります。

初学者のため間違いがある場合があります。
その際はご指摘いただけると嬉しいです。

イミュータブル

JavaScriptにおいて、プリミティブ型（文字列、数値、真偽値など）は変更不可能、つまりイミュータブルと言えます。

例えば下記のように変数aの値を変更することを考えます。

let a = 'apple';
a = 'orange';

let a = 'apple';からa = 'orange';に変更する場合、appleという文字列自体は変更されず、変数aの参照先が変わるだけです。
appleはメモリ上に残り、orangeは新しい場所に作成されます。これが文字列がイミュータブルである理由です。

変数aが持つ参照の値を変更することができて、変数の値（参照するアドレス）は変更可能だが、
プリミティブ型の値自体は変更不可能なため（appleという値自体が入っているメモリ自体を上書きできないため)文字列はイミュータブルと言えます。

ミュータブル

一方で、オブジェクトはミュータブル（変更可能）です。
オブジェクトはプロパティ名とプロパティ値を持ち、これらのプロパティや値は変更可能であるため、オブジェクトはミュータブルであると言えます。

下記の例で考えてみます。

let value = {
 fruit: 'apple'
};

value['fruit'] = 'orange';

上記の例では、fruitプロパティの値が'apple'から'orange'に変わります。
appleとorangeはメモリ上の異なる場所に格納され、fruitプロパティは新しい値orangeを指すようになります。
これにより、オブジェクトのプロパティや参照する値を変更できるため、オブジェクトはミュータブルと言えます。

※ただし、Object.freeze()メソッドなどを使用することで、オブジェクトをイミュータブル（変更不可能）にすることも可能です。
これは、一定の条件下でオブジェクトの変更を防ぎたい場合に便利なものとなっています。

終わりに

今回はイミュータブル、ミュータブルという曖昧に理解してしまっていた概念を整理しました。この記事が少しでも役立てたら嬉しいです。

参考