関数宣言後に関数内で利用する配列を定義しても良い理由が分かりません

Question

下記コードの「chechResult関数」の中で使われている「panels[0]」「panels[1]」「panels[2]」は関数宣言後に出てくる配列なので、関数宣言時には定義されておらずエラーが出ると思ったのですが、どうしてエラーが出ないのでしょうか？

もう考えても頭がこんがらがり過ぎて頭がおかしくなってしまいました
どなたか教えて頂けると幸いですm(__)m

'use strict';

{
  class Panel {
    constructor() {
      const section = document.createElement('section');
      section.classList.add('panel');

      this.img = document.createElement('img');
      this.img.src = this.getRandomImage();

      this.timeoutId = undefined;

      this.stop = document.createElement('div');
      this.stop.textContent = 'STOP';
      this.stop.classList.add('stop');
      this.stop.addEventListener('click', () => {
        clearTimeout(this.timeoutId);

        panelsLeft--;

        if (panelsLeft === 0) {
          checkResult();
        }
      });

      section.appendChild(this.img);
      section.appendChild(this.stop);

      const main = document.querySelector('main');
      main.appendChild(section);
    }

    getRandomImage() {
      const images = [
        'img/seven.png',
        'img/bell.png',
        'img/cherry.png',
      ];
      return images[Math.floor(Math.random() * images.length)];
    }

    spin() {
      this.img.src = this.getRandomImage();
      this.timeoutId = setTimeout(() => {
        this.spin();
      }, 50);
    }
  }

  function checkResult() {
    if (panels[0].isUnmatched(panels[1], panels[2])) {
      panels[0].unmatch();
    }
    if (panels[1].isUnmatched(panels[0], panels[2])) {
      panels[1].unmatch();
    }
    if (panels[2].isUnmatched(panels[0], panels[1])) {
      panels[2].unmatch();
    }
  }

  const panels = [
    new Panel(),
    new Panel(),
    new Panel(),
  ];

  let panelsLeft = 3;

  const spin = document.getElementById('spin');
  spin.addEventListener('click', () => {
    panels.forEach(panel => {
      panel.spin();
    });
  });
}

Answer 1

これも巻き上げです。

constの巻き上げの場合は、

• 宣言としては同じスコープで有効
• 値へのアクセスは、アクセスするまでのタイミングで代入が行われていれば有効

ということになります。

checkResultが実行されるのはイベントハンドラ経由なので、panelsへの代入が済んでからになります。

Comments

[tanakashouzoux]

本当に何十回もご回答ありがとうございますm(__)m

「宣言としては同じスコープで有効」ということは、このconst panels配列も最初に宣言されているのと同じという事なのでしょうか？？

「値へのアクセスは、アクセスするまでのタイミングで代入が行われていれば有効」ということは、checkResult関数内でpanels[0]、panels[1]、panels[2]が記述された時にはpanelsが宣言されていなくても、const panels実行時までに宣言がされていればエラーが出ずにそのまま使えるということなのでしょうか？？

[maisumakun]

> 「宣言としては同じスコープで有効」ということは、このconst panels配列も最初に宣言されているのと同じという事なのでしょうか？？

そうですね、ただしconstの代入前のタイミングで値を読もうとするとReferenceErrorとなります。

後半もそのとおりです。

[tanakashouzoux]

何度も何度も本当にありがとうございますm(__)m

お陰様で理解が深まりました！！！

ちなみに「constの代入前のタイミングで値を読もうとするとReferenceErrorとなります。」とのことですが、ということはcheckResult関数内でpanels[0]、panels[1]、panels[2]が記述された時にはエラーとなる値が読み込まれているということなのでしょうか？？

[maisumakun]

> checkResult関数内でpanels[0]、panels[1]、panels[2]が記述された時にはエラーとなる値が読み込まれているということなのでしょうか？？

関数宣言だけでは実行されないので、値は読み込まれません。

[tanakashouzoux]

ご丁寧にありがとうございますm(__)m

「関数宣言だけでは実行されないので、値は読み込まれません。」ということは、関数の中で使う値は宣言時には読み込まれず、実行時に初めて読み込まれるということで合ってますでしょうか？

[maisumakun]

そうですね。

[tanakashouzoux]

何度も本当にありがとうございます

maisumakunさんもし良ければ上記知識が得られる書籍やサイト等ご存知であれば教えて頂けないでしょうか？

自分なりに調べたり本を読んだりしているつもりなのですが、上記の様な知識は得られなかったもので...

Answer 2

Panelが宣言されていて、その後でnew Panelで3つインスタンスをつくっている
だけのように見えます。Panelクラスの中でpanels配列は参照されていませんよね？

Comments

[tanakashouzoux]

ご回答ありがとうございますm(__)m

「Panelが宣言されていて、その後でnew Panelで3つインスタンスをつくっている
だけのように見えます。」これは私もその様に考えることが出来ます

Panelクラスの中のfunction checkResult(){};の中でpanels配列は参照していることにならないのでしょうか？？？

Answer 3

const panelsの前でcheckResult();を実行すればエラーになると思いますが、試されましたか？

Comments

[tanakashouzoux]

早速のご回答ありがとうございますm(__)m

恥ずかしながら試しておりませんで、kei344さんに教えて頂いてから試したところエラーになりました

どうしてcheckResult();だとエラーで、function checkResult(){};だとエラーが出ないのでしょうか？？

function checkResult(){};の処理内を読み込んだ時点では同様にpanelsは定義されていないと思うのですが・・・

[kei344]

function checkResult(){}は関数を定義しているだけで中身の実行はされないからです。
たとえば、function checkResult(){alert('!!!');} とか定義するだけでalertが実行されないでしょう。

[tanakashouzoux]

何度もご回答ありがとうございます！

定義の段階では未定義の変数や配列を使っても大丈夫で、実行の段階では未定義の変数や配列を使ったらダメということなのでしょうか...？？

[kei344]

そうですね。コードが実行される時点で評価されます。

[tanakashouzoux]

わざわざ繰り返しご回答頂きありがとうございますm(__)m

全然知りませんでした・・・
そういった知識はどこで学ぶことが出来るのでしょうか？
私が今まで読んだ本やサイトにはここまで詳しい話が載っていなくて...

[kei344]

・コードは基本的に上から順番（書いてある順番）に処理される
・関数は呼び出すまで実行されない
・関数は呼び出されたら関数コードの上から順番に処理される
・JavaScriptはイベントで動くので、イベントが起こる前に関数を登録しておく
・イベントが起こると、登録した関数群が上から順番に処理される
という話であれば、「プログラムってどうやって動く？」みたいな部分で触れられているかもしれません。

非同期処理などが加わると、「今その変数に値があるか」は意識する必要があるので、そのあたりで（私は）学習した可能性もあります。

[tanakashouzoux]

わざわざご丁寧にありがとうございます

教えて頂いた「プログラムってどうやって動く？」「非同期処理」この辺りをもっと勉強してみようと思います！

本当にありがとうございますm(__)m