変数宣言の位置について

javascript初学者です。
現在以下のurlの動画にて学習中です。
https://www.youtube.com/watch?v=fAluwAmHrws

成果物はできたのですが、その過程で疑問点が生じたので質問させていただきます。

以下のjavascriptのコードのsetup_quizという関数にあるbutton_index という変数を関数の外に出すと、クリックイベント後に選択肢のanswersが切り替わりません。---

私の認識では、関数の外にある変数についてはグローバル変数になるので、関数内にも適用されると考えていました。
なぜこのような事象が起こるのでしょうか？

javascript
1const quiz=[
2  {
3    question:"ゲーム市場最も売れたゲーム機は次の内どれ？",
4    answers:[
5      "スーパーファミコン",
6      "プレイステーション２",
7      "ニンテンドースイッチ",
8      "ニンテンドーDS"
9    ],
10    correct:"ニンテンドーDS"
11  },
12  {
13    question:"糸井重里が企画に関った、任天堂のゲームといえば？",
14    answers:[
15      "MOTHER2",
16      "スーパーマリオブラザーズ3",
17      "スーパードンキーコング",
18      "星のカービィ"
19    ],
20    correct:"MOTHER2"
21  },
22  {
23    question:"ファイナルファンタジーIVの主人公の名前は？",
24    answers:[
25      "フリオニール",
26      "クラウド",
27      "ティーダ",
28      "セシル"
29    ],
30    correct:"セシル"
31  }
32];
33
34const quiz_length = quiz.length;
35let quiz_index = 0;
36
37
38
39//ボタンを定数に格納
40const $button = document.getElementsByTagName("button");
41
42//クイズの問題文,選択肢を定義
43let button_length = $button.length
44
45const setup_quiz = ()=>{
46  document.getElementById("js-question").textContent = quiz[quiz_index].question
47  let button_index = 0
48  while(button_index < button_length){
49    $button[button_index].textContent = quiz[quiz_index].answers[button_index];
50    button_index++;
51  }
52}
53setup_quiz();
54
55//正誤判定
56const click_handler = (e)=>{
57  if(quiz[quiz_index].correct === e.target.textContent){
58    alert("正解!");
59  }else{
60    alert("不正解!");
61  }
62
63  quiz_index++;
64  
65  if(quiz_index < quiz_length){
66    setup_quiz();
67  }else{
68    alert("終了");
69  }
70}
71
72//クリックイベント
73let handle_index = 0;
74while(handle_index < button_length){
75  $button[handle_index].addEventListener("click", (e)=>{
76    click_handler(e);
77  });
78  handle_index++;
79}
80

html
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  
10  <link rel="manifest" href="site.webmanifest">
11  <link rel="apple-touch-icon" href="icon.png">
12  <!-- Place favicon.ico in the root directory -->
13  
14  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
15  
16  <meta name="theme-color" content="#fafafa">
17</head>
18
19<body>
20  
21  <div class="container">
22    
23    <div class="jumbotron mt-5">
24      <div class="d-flex justify-content-center">
25        <div id="js-question" class="alert alert-primary" role="alert">
26          A simple primary alert—check it out!
27        </div>
28      </div>
29      
30      <div id="js-items" class="d-flex justify-content-center">
31        <div class="m-2">
32          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
33        </div>
34        <div class="m-2">
35          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
36        </div>
37        <div class="m-2">
38          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
39        </div>
40        <div class="m-2">
41          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
42        </div>
43      </div>
44    </div>
45  </div>
46  
47  <script src="app.js"></script>
48</body>
49
50</html>

m.ts10806

2021/02/16 10:00

「変数のスコープ」とかで調べてみると理解につながるかもしれません

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

回答1件

ベストアンサー

もし、let button_index = 0; をそのまま関数の外に移動したとすると、

最初に setup_quiz() が呼ばれたとき、button_index は 0 から始まり 4 になって関数を抜けます。
click_handler から再び setup_quiz() が呼ばれたとき、button_index は既に4なので、while ループの中を1回も通らずに関数を抜けます。

button_index = 0 は setup_quiz() の中に残す必要があります。

投稿2021/02/16 09:39