javascriptで簡単なストップウォッチにつくるのに、わからないところがあります

Question

(function(){
  'use strict';

var start = document.getElementById('start')
var stop = document.getElementById('stop')
var startTime;
var isStarted = false;

start.addEventListener('click', function(){
    if(isStarted === true){
    return;
  }
    isStarted = true;
    startTime = Date.now();
    console.log(startTime);
});

stop.addEventListener('click', function(){
  var elapsedTime;
  if(isStarted === false){
    return;
  }
    isStarted = false;
    elapsedTime = (Date.now() - startTime) / 1000;
    console.log(elapsedTime);
});

})();

「startボタン」と「stopボタン」で簡単なストップウォッチをコンソールに表示させるコードです。

「start」をクリックする前に「stop」を押すとコンソールに「NaN」と表示されるので、
それをさせないように、7行目に「var isStarted = false;」というクローバル変数を定義しているのですが
この7行目の変数に false をつけずに「var isStarted;」としてしまうと、
最初の一回目に「stopボタン」を押すと「NaN」が表示されます。

これはどういう理屈でそうなるのでしょうか？
7行目のグローバル変数で、「false」の値を入れなくても、23行目で「isStarted = false;」としているので、
「stopボタン」を押した時にリターンされるのではないかと思うのですが、
何故、最初に「var isStarted = false;」と定義する必要があるのでしょうか。

Answer 1

if(isStarted === false) では isStarted が undefined のときにtrueになりません。

【JavaScript 忘れがちな　=== と == の違い - Qiita】
https://qiita.com/PianoScoreJP/items/e43d70ec188c6fed73ed

【[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita】
https://qiita.com/phi/items/723aa59851b0716a87e3

Comments

[退会済みユーザー]

すいません、単純な勘違いをしていました。
スタートボタンは連続でクリックしても2回目以降は無効にするという設定でした(^^;
そして、ストップボタンは、スタートボタンがクリックされる前に、ストップボタンを
ボタンをクリックしても無効にして、かつ、連続でクリックしても2回目以降は無効にするというものでした。