変数の参照の仕組みが分かりません。

Question

前提

実行部分のaddEventListenerをソースコードの一番最後に記述するつもりでしたが、
勘違いして一番最初に書いたままで、作動してしまいました。
変数と関数宣言が後になるため、エラーが発生すると思うのですが、
実際には問題なく作動しました。
動いてくれたからいいものの、なぜエラーにならないのかが分かりません。

実現したいこと

1. ロードイベントが発火するタイミングが関係あるのでしょうか。
2. 安全なコードを書くには、定義部分を先に書いてから実行部分を記述した方がいいのでしょうか？

よろしくお願い致します。

発生している問題・エラーメッセージ

該当のソースコード

// グローバル汚染を避けるために即時関数を使って全体を囲う。
(() => {

/**
 * ページのロードが完了したときに発火するloadイベント
 */
addEventListener('load', () => {

  // まず最初に画像の読み込みを開始する
  imgLoader('img/color.jpg', loadedImg => {

    // 引数経由で画像を受け取り変数に代入しておく
    img = loadedImg;

    // 初期化処理を行う
    initialize();

    // 描画処理を行う
    render();
  });
}, false);



/**
 * 描画対象となるCanvas Element
 * @type {HTMLCanvasElement}
 */
let canvas = null;

/**
 * Canvas2D APIのコンテキスト
 * @type {CanvasRenderingContext2D}
 */
let ctx = null;

/**
 * イメージのインスタンス
 * @type {Image}
 */
let img = null;

/**
 * 画像をロードしてコールバック関数にロードした画像を与え呼び出す
 * @param {string}   path       - 画像ファイルのパス
 * @param {function} [callback] - コールバック関数
 */
function imgLoader(path, callback) {

  // 画像のインスタンスを生成する。
  let target = new Image();

  // 画像がロード完了したときの処理を先に記述する。
  target.addEventListener('load', () => {

    // もしコールバックがあれば呼び出す。
    if (callback != null) {

      // コールバック関数の引数に画像を渡す。
      callback(target);
    }
  }, false);

  // 画像のロードを開始するためにパスを指定する。
  target.src = path;
}

/**
 * canvasやコンテキストを初期化する
 */
function initialize() {
  canvas = document.getElementById('mainCanvas');

  // canvasの大きさをウィンドウ全体を覆うように変更する。
  canvas.width  = innerWidth;  // 幅
  canvas.height = innerHeight; // 高さ

  // canvasからコンテキストを取得する。
  ctx = canvas.getContext('2d');
}

/**
 * 描画処理を行う
 */
function render() {

  // 画像を描画する（等倍）
  ctx.drawImage(img, 100, 100);

  // 画像を描画する（大きさを指定）
  ctx.drawImage(img, 300, 100, 200, 200);

  // 画像を描画する（一部を切り出し＋大きさを指定）
  ctx.drawImage(img, 16, 16, 96, 96, 100, 300, 50, 50);
}
})();

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

addEventListener() 実行時にはまだイベントが発火していないので、コールバック関数は呼び出されません。
直後に dispatchEvent() でイベントを発火させれば、taka_oct092018さんが想定した通り、ReferenceErrorが発生するでしょう。

「コードの順番」と「実行の順番」は同じではありません。
関数呼び出しされる時に、関数コード内で参照する変数が定義されていれば、ReferenceErrorは発生しません。

const showMsg = () => console.log(msg);
const msg = 'Hello, World!';

showMsg();

Re: taka_oct092018 さん

Comments

[taka_oct092018]

think49様、返信ありがとうございます。
具体的に解説して頂いてよく分かりました。

Answer 2

巻き上げという現象ではないでしょうか。

関数宣言と巻き上げ

// グローバル汚染を避けるために即時関数を使って全体を囲う。
(() => {

//中略

})();

上記の即時関数内で関数が宣言されているので、即時関数の先頭に巻き上げられます。
つまり、function はどこで宣言しても、スコープ内の先頭で宣言したと解釈されるということです。

---

コードをよくみたら、let宣言している変数がありますね。
let変数は巻き上げがないので、変数宣言より前に関数実行したらエラーになりますね。
提示のコードでエラーにならないのは、loadイベントは、jsの読み込みが終わってから実行されるからということですね。

Comments

[taka_oct092018]

hatena19様、返信ありがとうございます。