変数への代入ってどうなるの?
JavaScriptで変数に値を入れるとき、「値そのものをコピーするのか」それとも「同じ場所を見せるのか」で挙動が変わります。
この違いを「値渡し」と「参照渡し」と言います。
1. プリミティブ型は「値渡し」
プリミティブ型とは、数値、文字列、真偽値(true/false)、null、undefined、Symbol、BigInt のことです。
特徴:
- 変数には「値そのもの」が入る。
- 別の変数に代入しても、元の変数には影響なし。
例題 1
let x = 10; // xに10を入れる
let y = x; // yにxの値をコピー
y = 20; // yを20に変更
console.log(x); // 10 → xは変わらない
console.log(y); // 20 → yは変更された
JavaScript✅ ポイント:
xとyは別々の「箱」を持っています。yを変えてもxは変わらない。
例題 2(文字列の場合)
let name1 = "Alice";
let name2 = name1;
name2 = "Bob";
console.log(name1); // "Alice"
console.log(name2); // "Bob"
JavaScript同じように、文字列も「値渡し」です。
2. オブジェクト型は「参照渡し」
オブジェクト型とは、配列やオブジェクト({…})関数などのことです。
特徴:
- 変数には「値の場所(アドレス)」が入る。
- 別の変数に代入すると、同じ場所を見ています。
- どちらかを変更すると、もう片方にも影響する。
例題 3(配列の場合)
let arr1 = [1, 2, 3];
let arr2 = arr1; // arr2も同じ配列を参照
arr2[0] = 100; // 配列の最初の値を変更
console.log(arr1); // [100, 2, 3] → arr1も変わる
console.log(arr2); // [100, 2, 3]
JavaScript例題 4(オブジェクトの場合)
let obj1 = { name: "Alice" };
let obj2 = obj1; // obj2も同じオブジェクトを参照
obj2.name = "Bob";
console.log(obj1.name); // "Bob" → obj1も変わる
console.log(obj2.name); // "Bob"
JavaScript✅ ポイント:
- オブジェクト型は「同じものを2つの変数で共有しているイメージ」です。
- 片方を変えると、もう片方も変わってしまう。
3. まとめ図(イメージ)
プリミティブ型(値渡し)
x → [10] y → [10] (別の箱)
y = 20 → xは変わらない
オブジェクト型(参照渡し)
arr1 → [1,2,3] ← arr2も同じ箱を指す
arr2[0]=100 → arr1も100になる
4. 練習問題
- 数値の場合、値渡しか参照渡しかを考えよう:
let a = 5;
let b = a;
b = 10;
console.log(a); // 何が出る?
JavaScript- 配列の場合、値渡しか参照渡しかを考えよう:
let arrA = [1,2];
let arrB = arrA;
arrB.push(3);
console.log(arrA); // 何が出る?
JavaScript- オブジェクトの場合:
let user1 = {name: "Alice"};
let user2 = user1;
user2.name = "Bob";
console.log(user1.name); // 何が出る?
JavaScript💡 覚え方のコツ
- プリミティブ型 → 「箱ごとコピー」 → 変更しても別の箱には影響なし
- オブジェクト型 → 「箱の場所だけコピー」 → 変更すると同じ箱を見ているので両方変わる
