【JavaScript】イミュータブル・ミュータブル - 値の変更可否

JavaScriptのイミュータブルとミュータブルをご紹介します。

値の種類

値は型の分類がありますが、値の変更可否による分類もあります。
変更不可能な値をイミュータブルな値、変更可能な値をミュータブルな値と呼びます。

イミュータブル

イミュータブルな値は変更できません。
代表的な値は数値や文字列などです。

次のコードをご覧ください。

let num = 8;

console.log(num);

num = 10;

console.log(num);

8
10

変数numの値は変わっていますが、これは8から10に入れ替わったイメージです。
8という値そのものが10に変わったということではないことに注意してください。

ミュータブル

ミュータブルな値は変更できます。
代表的な値はArrayオブジェクト（配列）やObjectオブジェクトです。

let data = [ 3, 8, 11, 14 ];

console.log(data);

data[0] = 5;

console.log(data);

(4) [3, 8, 11, 14]
(4) [5, 8, 11, 14]

変数dataの配列の値を変更しました。
イミュータブルと異なり、こちらは値そのもののデータが変更されています。

引数の処理

イミュータブルとミュータブルで引数に使ったときの処理が異なります。

関数の処理で仮引数の値を変更した場合、イミュータブルは呼び出し元の値に影響はありませんが、ミュータブルな値は呼び出し元の値も変更されます。

先ずはイミュータブルな値を確認します。

function test( data ) {
    data *= 2;
    console.log(data);
}

let data = 10;

console.log(data);

test(data);

console.log(data);

10
20
10

関数の処理で仮引数の値を変更した後に、呼び出し元の変数を出力しています。
コンソール結果から値が変わっておらず、影響していないことが分かります。

次にミュータブルな値を確認します。

function test( data ) {
    data[0] *= 2;
    console.log(data);
}

let data = [ 3, 8, 11, 14 ];

console.log(data);

test(data);

console.log(data);

(4) [3, 8, 11, 14]
(4) [6, 8, 11, 14]
(4) [6, 8, 11, 14]

関数の処理で仮引数の値を変更した後に、呼び出し元の変数を出力しています。
コンソール結果から呼び出し元の配列の値も変更されたことが分かります。

このように値はイミュータブルかミュータブルで処理の影響を受けるかどうかが変わりますので注意してください。