質問: 0; console.log(num); //初期化直後の変数の値をコンソールに表示・・・結果は0 }); ``` ### 試したこと スタートボタン押下し、カウントが進んだ後にストップボタン→リセットボタンの順で押下しました。 するとカウント中はコンソールに増加しながら数値が表示されるのですが、その後、ストップボタン→リセットボタンを 押下するとコンソールには0が表示されます。 変数numはグローバルですし、定義時以外でnumに0を代入していないのに、なぜストップ/リセットボタン押下時にnumの値が0となってしまっているのか教えて頂きたいです。 私の理解ではカウントの際に`num++`が行われているので、その値が最後まで引継がれるものと考えていました。 よろしくお願いします。
回答: ``` function countup(num){ // <- この num は、 countup() の中でだけ使える num box.textContent = num; // <- すでにグローバル変数を参照していない num++; // <- 「countup の中の num」をインクリメントしている。グローバル変数は更新されない console.log(num); //カウントが進むにあわせて1ずつ増えながらコンソールに表示 timerId = setTimeout(() => { countup(num); // ↑ インクリメントされた「countup の中の num」を渡している // 次のcountupは1を受け取り、「次の countup の中の num」をインクリメントして2を渡し、 // 次の次のcountupは2を受け取り、「次の次の countup の中の num」をインクリメントして3を渡し、 // ... },1000); }; start.addEventListener('click',() => { countup(num); // <- この時点で渡しているのはグローバル変数のnum (=0) }); ``` 上記の理由で、countupの中では独自のnumを参照していて、グローバル変数のnumは一向に更新されていません。 イベントリスナではグローバル変数を参照しているので、初期値で0がセットされたまま、0が出力されます。