JavaScript | 変数への値の代入と変数の初期化

JavaScript
2020.04.12
スポンサーリンク

1. 「宣言」と「代入（初期化）」の違い

  • 宣言（declare）：変数の名前を作ること。例：let x;
    → この時点では値は入っておらず、undefined が入っています。
  • 代入（assign）/ 初期化（initialize）：実際に値を入れること。例：x = 5; または let x = 5;（宣言と同時に初期化）
let score;             // 宣言だけ
console.log(score);    // -> undefined

score = 10;            // 値を代入（初期化）
console.log(score);    // -> 10
JavaScript

2. let / const / var の基本ルール（よく使う順）

  • const
    • 宣言と同時に必ず初期化する必要がある：const a = 1;
    • 再代入できない（つまり a = 2 はエラー）。
    • ただしオブジェクトの場合は「変数が指す参照」を変えられないだけで、オブジェクトの内部は変更できる。
const pi = 3.14;
pi = 3; // TypeError: Assignment to constant variable.

const obj = {x:1};
obj.x = 2; // OK（obj自体を別のオブジェクトに置き換えるのは不可）
obj = {};  // エラー
JavaScript
  • let
    • 再代入できる：let count = 0; count = 1;
    • ブロックスコープ（{ ... } の中だけ有効）。
  • var（古いスタイル）
    • 再代入・再宣言が可能で、関数スコープ。
    • hoisting（宣言が持ち上がる）の挙動があるため、予期せぬバグの原因になりやすい。現在は基本的に let / const を使うのが推奨です。

3. 代入演算子 = のしくみ（右から左へ）

let a, b;
a = b = 5;  // まず右の 5 が b に入り、その後 b の値が a に入る
console.log(a, b); // -> 5 5
JavaScript

4. 「取り出す（読む）」と「上書きする」

  • 変数名を書くと中の値を参照（読む）できます。
  • 既に値がある変数に別の値を代入すると上書きされます。
let x = 1;
let y = x;   // y に x の値（1）がコピーされる（プリミティブ型の場合）
x = 2;
console.log(x, y); // -> 2 1  （y は 1 のまま）
JavaScript

5. プリミティブと参照型（初心者が押さえておく重要ポイント）

  • プリミティブ型（数値・文字列・真偽値・null・undefined・symbol・bigint）は 値そのものをコピーします。
    • つまり let b = a; とすると b は a の「コピー」を持つので、あとで a を変えても b に影響ない。
  • 参照型（オブジェクト・配列・関数）は 参照（ポインタ）をコピーします。
    • 変数 A と B が同じオブジェクトを参照していると、どちらかからオブジェクトを変更すると両方に影響が出ます。
// プリミティブの例
let p = 10;
let q = p;
p = 20;
console.log(p, q); // -> 20 10

// 参照型の例
let arr1 = [1,2];
let arr2 = arr1;
arr2.push(3);
console.log(arr1); // -> [1,2,3]  （arr1 も変わっている）
JavaScript
  • 参照型を“コピー”したいときは浅いコピーや深いコピーの手段を使う（配列なら [...]、オブジェクトなら {...obj} や Object.assign() など）。初心者はまず浅いコピー（スプレッド構文）を覚えると便利です。
let arrA = [1,2];
let arrB = [...arrA]; // 新しい配列を作る（コピー）
arrB.push(3);
console.log(arrA, arrB); // -> [1,2] [1,2,3]
JavaScript

6. 注意点（よくあるミス）

  • const にあとから代入しようとする → エラー
  • 宣言せずに代入（x = 5;）すると、strict mode ではエラー、非strict ではグローバル変数になってしまう ⇒ 必ず宣言する。
  • var のスコープや hoisting による思わぬ挙動（予測しづらい） ⇒ let / const を使う。
  • オブジェクトの代入は参照コピーだと理解していないとバグになる。

7. 実務での簡単なルール（初心者向け推奨）

  1. まず const を使う（再代入が必要になったら let にする）。
  2. var は使わない（古いコードを読むと出てくるが、新規コードでは避ける）。
  3. 宣言と同時に初期化して undefined による混乱を避ける。
  4. 変数名は意味のある名前に（例：score, userName）にする。

8. まとめ

  • 宣言は「箱を作る」、初期化は「箱に入れる」。
  • const = 再代入不可（でもオブジェクト中身は変更可）、let = 再代入可、var = 古い（使わない）。
  • プリミティブは値がコピーされる、オブジェクトは参照がコピーされる（両者は挙動が違う）。
前へ次へ
1234
スポンサーリンク
タイトルとURLをコピーしました