JavaScript | 「値渡し」と「参照渡し」

値渡しと参照渡しを図で理解しよう

1. プリミティブ型は「値渡し」

イメージ図

let x = 10;
let y = x;

x → [10]    y → [10]  （別々の箱）

y = 20;

x → [10]    y → [20]  （別々の箱なのでxは変わらない）

• 箱の中に値そのものが入っているイメージです。
• 変数をコピーすると新しい箱が作られるので、片方を変えてももう片方は変わりません。

例：文字列

let name1 = "Alice";
let name2 = name1;

name2 = "Bob";

console.log(name1); // "Alice"
console.log(name2); // "Bob"

let name1 = "Alice";
let name2 = name1;

name2 = "Bob";

console.log(name1); // "Alice"
console.log(name2); // "Bob"

✅ ポイント：プリミティブ型は常に値そのものをコピーする。

2. オブジェクト型は「参照渡し」

イメージ図

let arr1 = [1, 2, 3];
let arr2 = arr1;

arr1, arr2 → [1, 2, 3]  （同じ箱を両方が指す）

arr2[0] = 100;

arr1, arr2 → [100, 2, 3]  （同じ箱だから両方に反映される）

• 箱の場所（参照）だけをコピーするイメージ。
• どちらかを変更すると、同じ箱を見ているため両方変わる。

例：オブジェクト

let user1 = {name: "Alice"};
let user2 = user1;

user2.name = "Bob";

console.log(user1.name); // "Bob"
console.log(user2.name); // "Bob"

let user1 = {name: "Alice"};
let user2 = user1;

user2.name = "Bob";

console.log(user1.name); // "Bob"
console.log(user2.name); // "Bob"

✅ ポイント：オブジェクト型は常に参照をコピーする。

3. 覚え方のコツ

4. 練習問題（図を思い浮かべながらやってみよう）

1️⃣ 数値の場合：

let a = 5;
let b = a;
b = 10;
console.log(a); // 何が出る？

let a = 5;
let b = a;
b = 10;
console.log(a); // 何が出る？

2️⃣ 配列の場合：

let arrA = [1,2];
let arrB = arrA;
arrB.push(3);
console.log(arrA); // 何が出る？

let arrA = [1,2];
let arrB = arrA;
arrB.push(3);
console.log(arrA); // 何が出る？

3️⃣ オブジェクトの場合：

let user1 = {name: "Alice"};
let user2 = user1;
user2.name = "Bob";
console.log(user1.name); // 何が出る？

let user1 = {name: "Alice"};
let user2 = user1;
user2.name = "Bob";
console.log(user1.name); // 何が出る？

💡 ポイントまとめ

• プリミティブ型 → 「新しい箱にコピー」 → 元は変わらない
• オブジェクト型 → 「箱の場所だけコピー」 → 元も変わる