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

Java
スポンサーリンク

変数への代入ってどうなるの?

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

✅ ポイント:

  • xy は別々の「箱」を持っています。
  • 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. 練習問題

  1. 数値の場合、値渡しか参照渡しかを考えよう:
let a = 5;
let b = a;
b = 10;
console.log(a); // 何が出る?
JavaScript
  1. 配列の場合、値渡しか参照渡しかを考えよう:
let arrA = [1,2];
let arrB = arrA;
arrB.push(3);
console.log(arrA); // 何が出る?
JavaScript
  1. オブジェクトの場合:
let user1 = {name: "Alice"};
let user2 = user1;
user2.name = "Bob";
console.log(user1.name); // 何が出る?
JavaScript

💡 覚え方のコツ

  • プリミティブ型 → 「箱ごとコピー」 → 変更しても別の箱には影響なし
  • オブジェクト型 → 「箱の場所だけコピー」 → 変更すると同じ箱を見ているので両方変わる
タイトルとURLをコピーしました