Zenn
🔖

【JavaScript】変数参照時のパターンについて

2024/09/27に公開
JavaScript
初心者
変数
tech

【JavaScript】変数参照時まとめ

  • 変数は、参照するより前の行で宣言も代入もしない状態だと、
    ReferenceErrorとなってしまう
  • 参照するより前の行にて宣言さえすれば、
    ReferenceErrorを回避できる(参照結果はundefinedとなる)

変数の基本については以下
https://zenn.dev/417yr/articles/9da48e5a578a8f

概要

変数は3つの操作が行われる

  1. 宣言
  2. 代入
  3. 参照

参照時のパターンA,B,Cの挙動を整理する

パターンA

  • 宣言と代入どちらも実施

パターンA-1

以下の順番

  1. 宣言
  2. 代入
  3. 参照
test.js
let status = "ok";
console.log(status);

//出力：ok

パターンA-2

以下の順番

  1. 参照
  2. 宣言
  3. 代入
test.js
console.log(status);
let status = "ok";

//出力：ReferenceError: Cannot access 'status' before initialization
  • エラー発生
  • 上の行から読み込んでいくので、
    参照前に宣言と代入をしてあげる必要がある
  • ReferenceError: Cannot access "変数" before initialization
    • 参照より後ろの行にて、宣言か代入がされてしまっていることを示すエラー
    • 参照より前の行にて、宣言か代入をすればエラーは解消する

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError

パターンB

  • 宣言はするが、代入はしない

パターンB-1

以下の順番

  1. 宣言
  2. 参照
test.js
let status;
console.log(status);

//出力：undefined
  • 参照前の行にて宣言さえしていれば、エラーは出ない
  • 宣言されただけで、まだ値が代入されていない変数は undefined 型となる

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined

パターンB-2

以下の順番

  1. 参照
  2. 宣言
test.js
console.log(status);
let status;

//出力：ReferenceError: Cannot access 'status' before initialization
  • エラー発生
  • パターンA-2と同様

パターンC

  • 宣言と代入どちらもせず、参照のみ

以下の順番

  1. 参照
test.js
console.log(status);

//出力：ReferenceError: status is not defined
  • エラー発生
  • ReferenceError: "変数名" is not defined
    • 参照より後ろの行で宣言だけでもされていたら、
      エラー文はCannot access "変数" before initializationになるため、
      どこにも宣言すらされていないということ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined

Discussion