JavaScriptの変数の代入の基本
JavaScriptの「変数への代入（値渡しと参照渡し）」を、プログラミング初心者向けにかみ砕いて、例題を交えながら丁寧に説明します。
JavaScriptでは、変数に値を入れるときに 「値をコピーする場合」と「参照をコピーする場合」 の2種類があります。
これを理解すると、変数同士の関係や、データを変更したときの挙動が分かります。
1. プリミティブ型（基本データ型）は「値渡し」
プリミティブ型とは、次のような基本のデータです：
- 数字（Number）：
10, 3.14 - 文字列（String）:
"こんにちは" - 真偽値（Boolean）：
true/false undefinedやnull
特徴
- 変数に代入すると値そのものがコピーされます。
- コピーした後の変数を変更しても、元の変数には影響がありません。
例題 1
let x = 10;
let y = x; // xの値をyにコピー
y = 20; // yを変更しても、xは変わらない
console.log(x); // 10
console.log(y); // 20
💡 ポイント：xとyは完全に独立しています。
例題 2
let name1 = "Alice";
let name2 = name1;
name2 = "Bob";
console.log(name1); // "Alice"
console.log(name2); // "Bob"
💡 ポイント：文字列もプリミティブ型なので、コピーされた後は独立して扱われます。
2. オブジェクト型（配列やオブジェクト）は「参照渡し」
オブジェクト型とは、次のような複雑なデータです：
- 配列（Array）：
[10, 20, 30] - オブジェクト（Object）：
{name: "Alice", age: 20}
特徴
- 変数に代入すると値そのものではなく、データの「場所（参照）」がコピーされます。
- コピーした変数からデータを変更すると、元の変数のデータも変わります。
例題 3
let arr1 = [1, 2, 3];
let arr2 = arr1; // arr1の配列の場所をarr2にコピー
arr2[0] = 100; // arr2を変更すると、arr1も変わる
console.log(arr1); // [100, 2, 3]
console.log(arr2); // [100, 2, 3]
💡 ポイント：arr1とarr2は同じ配列を見ています。
つまり「参照が共有されている」ということです。
例題 4（オブジェクト版）
let obj1 = {name: "Alice", age: 20};
let obj2 = obj1;
obj2.age = 30;
console.log(obj1); // {name: "Alice", age: 30}
console.log(obj2); // {name: "Alice", age: 30}
💡 ポイント：オブジェクト型も参照渡しなので、片方を変えるともう片方も変わる！
3. まとめ表
| データ型 | 代入の仕方 | コピーされるのは | 変更の影響 |
|---|---|---|---|
| プリミティブ型 | 値渡し | 値そのもの | コピー後は独立 |
| オブジェクト型 | 参照渡し | データの場所 | コピー後も影響する |
4. 💡 初心者向けアドバイス
- 数字や文字列は安心してコピーしてOK。
- 配列やオブジェクトを代入したら、「両方とも同じデータを見ている」と考える。
- もしオブジェクトをコピーして独立させたいときは 浅いコピー (
slice()や{...obj}) を使う。
