JavaScriptでのグローバル変数を定義していると、ある関数内で定義したインスタンスを別の関数で使用できるのかが分からない

Question

以下のコードでstartをグローバル変数として定義していますが、DateオブジェクトのインスタンスはstartClick関数内で定義しています。
それにも関わらず、startClick関数内で定義したDateオブジェクトのインスタンスをgoTimer関数内で使用しても処理が動いてしまう理由がわかりません。
DateオブジェクトのインスタンスはstartClick関数内で定義しているのでstartClick関数外では再定義しないと使用できないという理解だったのですが。。。

startClick関数内で定義したDateオブジェクトのインスタンスをgoTimer関数内で使用しても処理が動いてしまう理由をご教授しただけると幸いです。

var start;

var startClick = function() {
                var start = new Date();
            
                setInterval(goTimer, 1000);
}
         

 document.getElementById('start_stop').addEventListener('click', startClick, true);

            var goTimer = function() {
                var now = new Date();
                document.getElementById('timer').innerHTML = now.getTime() - start.getTime();
            }

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、start が未定義であるエラーが発生しました。つまり、問題が再現しませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

[Matsumon0104]

動作するプログラムのstartClick内の「var start = new Date()」には「var」はついていないのではないでしょうか？

Answer 1

スコープに合わせた参照をするということでしょう

const num1=1;
const num2=1;
{
const num1=2;
const a=()=>{
  const num1=3;
  const c=()=>{
    console.log([num1,num2]);
  }
  b();//[2,1]
  c();//[3,1]
}
const b=()=>{
  console.log([num1,num2]);
}
a();
}

Answer 2

どのように動くか、処理がうまく読み解けていないのだと思います。

処理順序は、下記のようになっています。

1.「#start_stop」をクリックする。
2.「startClick()」が実行される。
2-1.変数ブローバル「start」にDateインスタンスが作成される。
2-2.1000msに1度、goTimerが実行される。
3.「goTimer()」が実行される。(2-2より)
3-1.変数「now」にDateインスタンスが作成される。
3-2.変数「now」とグローバル変数「start」の差を求める。

var start; 

var startClick = function() {   // 2
    start = new Date();         // 2-1
    setInterval(goTimer, 1000); // 2-2
}

document.getElementById('start_stop').addEventListener('click', startClick, true); // 1

var goTimer = function() {      // 3
    var now = new Date();       // 3-1
    document.getElementById('timer').innerHTML = now.getTime() - start.getTime(); // 3-2
}

グローバル変数はスコープが限定されないため、startClickでもgoTimerでも同じ条件で変数が利用されます。
startClickだけ、goTimerだけといったようにスコープを限定することも可能です。
let

Comments

[1mzmk]

指摘いただいた通り、まさにどのように動くか、処理がうまく読み解けていませんでした。
理解することができました。
本当にありがとうございました。