グローバル変数が更新されない

前提・実現したいこと

グローバル変数を定義し、複数のブロック（関数）で変数の値を更新していきたいのですが、
一部のブロックでは定義時の初期値が適用されてしまう理由を教えていただきたいです。

以下のコードでは、カウントアップで検証しました。

該当のソースコード

HTML
1<body>
2	<div class="box">0</div>
3	<button id="start">START</button>
4	<button id="stop">STOP</button>
5	<button id="reset">RESET</button>
6	<script src="js/main.js"></script>
7</body>

CSS
1.box{
2	width: 400px;
3	height: 300px;
4	box-sizing: content-box;
5	background:rgb(120, 25, 228);
6	color: #fff;
7	font-size: 30px;
8	line-height: 300px;
9	text-align: center;
10	transition: 2s cubic-bezier(0, 0.64, 0.96, 0.38);
11}
12
13#button{
14	width: 400px;
15	text-align: center;
16	margin: 0 auto;
17}

JS
1const box = document.querySelector('.box');
2  const start = document.getElementById('start');
3  const stop = document.getElementById('stop');
4  const reset = document.getElementById('reset');
5
6  let num = 0; //ここでグローバル変数を定義しています。初期値として0を設定しました。
7  let timerId;
8
9  function countup(num){
10    box.textContent = num;
11    num++;
12
13    console.log(num); //カウントが進むにあわせて１ずつ増えながらコンソールに表示
14
15    timerId = setTimeout(() => {
16      countup(num);
17    },1000);
18  };
19  
20  start.addEventListener('click',() => {
21    countup(num);
22  });
23
24  stop.addEventListener('click', ()=>{
25    console.log(num); //ストップボタンを押下直後の変数の値をコンソールに表示・・・結果は0
26    clearTimeout(timerId);
27    console.log(num); //タイマーが止まった直後の変数の値をコンソールに表示・・・結果は0
28  });
29  
30  reset.addEventListener('click', ()=>{
31    console.log(num); //リセットボタンを押下直後の変数の値をコンソールに表示・・・結果は0
32    box.textContent = 0;
33    console.log(num); //初期化直後の変数の値をコンソールに表示・・・結果は0
34  });

試したこと

スタートボタン押下し、カウントが進んだ後にストップボタン→リセットボタンの順で押下しました。
するとカウント中はコンソールに増加しながら数値が表示されるのですが、その後、ストップボタン→リセットボタンを
押下するとコンソールには０が表示されます。
変数numはグローバルですし、定義時以外でnumに０を代入していないのに、なぜストップ/リセットボタン押下時にnumの値が０となってしまっているのか教えて頂きたいです。
私の理解ではカウントの際にnum++が行われているので、その値が最後まで引継がれるものと考えていました。

よろしくお願いします。

takasima20

2019/07/19 14:15

グローバル変数使うなら、なんで countup(num) ってやってるんスか?

T.Takeda

2019/07/19 14:49

アドバイスありがとうございます。そもそも引数で渡しているnumはグローバル変数ではなかったことが理解できました。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1function countup(num){ // <- この num は、 countup() の中でだけ使える num
2  box.textContent = num; // <- すでにグローバル変数を参照していない
3  num++; // <- 「countup の中の num」をインクリメントしている。グローバル変数は更新されない
4
5  console.log(num); //カウントが進むにあわせて１ずつ増えながらコンソールに表示
6
7  timerId = setTimeout(() => {
8    countup(num);
9    // ↑ インクリメントされた「countup の中の num」を渡している
10    //    次のcountupは1を受け取り、「次の countup の中の num」をインクリメントして2を渡し、
11    //    次の次のcountupは2を受け取り、「次の次の countup の中の num」をインクリメントして3を渡し、
12    //    ...
13  },1000);
14};
15
16start.addEventListener('click',() => {
17  countup(num); // <- この時点で渡しているのはグローバル変数のnum (=0)
18});