JavaScript初心者向けに、関数に値を渡すときの「イミュータブル」と「ミュータブル」の違いを、わかりやすく例を交えて詳しく解説します。
1. 基本の考え方
🔹 イミュータブル（変更できないもの）
- 数字や文字列など
- 関数の中で値を変えても、元の変数は変わらない
🔹 ミュータブル（変更できるもの）
- 配列やオブジェクト
- 関数の中で値を変えると、元の変数も一緒に変わる
2. イミュータブルの例（数字）
function doubleNumber(num) {
num = num * 2; // 関数の中で値を変える
console.log("関数内:", num);
}
let myNumber = 5;
doubleNumber(myNumber); // 関数内: 10
console.log("関数外:", myNumber); // 関数外: 5（元の値は変わらない）
💡 ポイント
myNumberは関数に渡されても「コピー」が渡されるイメージ- 関数内で変えても、元の変数には影響なし
3. ミュータブルの例（配列）
function doubleArray(arr) {
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] * 2; // 配列の中身を書き換える
}
console.log("関数内:", arr);
}
let myArray = [1, 2, 3];
doubleArray(myArray); // 関数内: [2, 4, 6]
console.log("関数外:", myArray); // 関数外: [2, 4, 6]（元の配列も変わっている）
💡 ポイント
- 配列は「参照」で渡される
- 関数内で変更すると、元の配列にも反映される
4. 元の配列を変えたくないときの対策
配列のコピーを作って渡すと、関数内で変えても元の配列は変わらない
function doubleArraySafe(arr) {
let copy = [...arr]; // 配列のコピーを作る
for (let i = 0; i < copy.length; i++) {
copy[i] = copy[i] * 2;
}
console.log("関数内:", copy);
}
let myArray2 = [1, 2, 3];
doubleArraySafe(myArray2); // 関数内: [2, 4, 6]
console.log("関数外:", myArray2); // 関数外: [1, 2, 3]（元の配列は変わらない）
💡 ポイント
[...]は「スプレッド構文」と呼ばれ、配列のコピーを作る- 元の配列を安全に保ちつつ、関数内で自由に操作できる
まとめ
| データ型 | 関数内で変更すると元に影響？ | 例 |
|---|---|---|
| 数字・文字列（イミュータブル） | × | let num = 5; |
| 配列・オブジェクト（ミュータブル） | 〇 | let arr = [1,2,3]; |
- イミュータブル → 安心して渡せる
- ミュータブル → 注意が必要、必要ならコピーを使う
💡 初心者向けの感覚イメージ
- 数字や文字列 → 「手紙のコピーを渡す」
- 配列やオブジェクト → 「家の鍵を渡す」
→ 中身をいじると元の家も変わる