値渡しと参照渡しのアニメーションイメージ
1. プリミティブ型（値渡し）
let x = 10;
let y = x;
y = 20;
アニメーション図イメージ
x: [10] y: [10] ← ① コピー直後
y = 20 ← ② yを変更
x: [10] y: [20] ← xは変わらない
- 🔹ポイント：
- 「値そのもの」をコピーする。
- それぞれ独立した箱（メモリ）を持つ。
2. オブジェクト型（参照渡し）
let arr1 = [1,2,3];
let arr2 = arr1;
arr2[0] = 100;
アニメーション図イメージ
arr1: ┌─────┐
│ 1 2 3 │ ← ① 同じ箱をarr2も参照
arr2: └─────┘
arr2[0] = 100 ← ② 値を変更
arr1: ┌─────┐
│ 100 2 3 │ ← arr1も変わる
arr2: └─────┘
- 🔹ポイント：
- 「箱の場所（参照）」だけコピー。
- 同じ箱を見ているため、片方を変えると両方変わる。
3. 覚え方のコツ（アニメでイメージ）
- プリミティブ型：💌 箱ごとコピー → 変更しても影響なし
- オブジェクト型：📦 箱の場所だけコピー → 変更すると両方に影響
4. 練習問題（動きを想像しながら）
1️⃣ 数値の場合：
let a = 5;
let b = a;
b = 10;
→ aの値は？
2️⃣ 配列の場合：
let arrA = [1,2];
let arrB = arrA;
arrB.push(3);
→ arrAはどうなる？
3️⃣ オブジェクトの場合：
let user1 = {name: "Alice"};
let user2 = user1;
user2.name = "Bob";
→ user1.nameはどうなる？
💡 まとめ
| 型 | コピーされるもの | 変化の影響 |
|---|---|---|
| プリミティブ型 | 値そのもの | コピー後の変更は元に影響なし |
| オブジェクト型 | 参照（箱の場所） | コピー後の変更も元に影響する |
See the Pen Pass-by-value and pass-by-reference animation by MONO365 -Color your days- (@monoqlo365) on CodePen.
使い方
- 「yを20に変更」ボタン → プリミティブ型の挙動を確認
- 「arr2[0]を100に変更」ボタン → オブジェクト型の挙動を確認
ポイント
- プリミティブ型は「値そのものをコピー」するので、元の変数は変わらない
- オブジェクト型は「参照をコピー」するので、元の変数も変わる
See the Pen Pass-by-value and pass-by-reference animation #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.
説明
- プリミティブ型：
- 上からコピーされる箱がyに移動するアニメーション
- コピー完了後、yだけ値が変わり、xは変わらないことを視覚化
- オブジェクト型：
- 上から参照をコピーするアニメーション
- 参照共有のため、arr1とarr2両方の値が変わることを視覚化