letで宣言した変数がスコープ内で参照できません。

Question

前提・実現したいこと

letで宣言した変数がスコープ内で参照できません
他のletで宣言した変数は利用できるのですが理由を知りたいです。

発生している問題・エラーメッセージ

ReferenceError :Can't find variable:startTime

該当のソースコード

{
  let timer = document.getElementById('timer');
  let start = document.getElementById('start');
  let stop = document.getElementById('stop');
  let reset = document.getElementById('reset');

  let startTime;// setTimeout内の関数でなぜか呼べない
  let elapsedTime = 0;
  function countUp(){
    setTimeout(function(){
      elapsedTime = Date.now() - startTime;
      console.log(elapsedTime);
      countUp();
    },10);
  }
  start.addEventListener('touchstart',function(){
    startTime = Date.now();
    countUp();
  });
}

試したこと

• startTimeをvarにすればできる
• elapsedTime はletのままでもOK
• addEventListenerの時点ではstartTime はとれている（console.logで確認）
• startTimeを0で初期化してもNG
• 変数名を変更（startTime→aaa等）にしてもNG
• エラー箇所はデバッグログの行番号で特定済み

補足情報（FW/ツールのバージョンなど）

monacaで開発中
JavaScript初心者です。
varを使えばできるのですが、他の変数はletを使っているのでできればそろえたくて・・・。

Comments

[dice142]

エラー文およびソースコードは実際のもののコピペですか？
それとも投稿時に実際のものを見ながら手打ちしましたか？

[nikkori]

コピペしたものにコメントを加えました

[nikkori]

あ、すみません、エラー分は手打ちです。

[papinianus]

仕様を確認したわけではないですが、letで参照できず、varで参照できることが、スコープ外ということの意味じゃないかと思うのですが。

[dice142]

エラー文もコピペのほうが良いです。
というのも読み間違えて打っていたら解決が困難になるからです。
ソースコード同様にコードブロックで囲んでもらえると見やすいです。

[nikkori]

>dice142さん
すみません、MonacaというクラウドIDEではデバッガーのエラーログがコピペできないので…
方法はあるのかもしれないので別件で調べてみます。

[nikkori]

＞papinianusさん
そうおもったのですが…おなじスコープで宣言している変数（elapsedTime ）が参照できるのに
startTimeは参照できないんです。。。setTimeoutという関数がなにか特殊なスコープを持っているとかなんでしょうか・・・

[dice142]

ちなみに提示されたコードをコピペして（呼び出し部分だけ外に出して）やってみましたが、正常に動作しました。

[dice142]

後は本当にエラーの箇所がそこなのかも確認したほうが良いかと思います。
（本当は他でstartTimeを使っていてそこだったとか。）

[nikkori]

elapsedTime = Date.now() - startTime;
↑この部分を外に出してということでしょうか？

[nikkori]

コピペはできないのですが、デバッガにでている行番号からこの箇所であることは特定しています。
サンプルソースにちかいものなので、ソースもこれでほぼすべてです。。。

[dice142]

start = addEventListener(... の以下の部分です。
===
startTime = Date.now();
countUp();
===
startという変数がなかったので、とりあえず呼び出せるように外に出して確認しただけですね。

[nikkori]

ちなみに元ソースはドットインストールの
「 JavaScriptでストップウォッチを作ろう #03 カウントアップ機能を実装しよう」
https://dotinstall.com/lessons/stop_watch_js_v4/41203
です。
varではなくなるべくletを使うようにしていたので、変更して記載したらエラーになりました。

[dice142]

> コピペはできないのですが、デバッガにでている行番号からこの箇所であることは特定しています。
通常のJSではできているので、環境の問題でしょうかね。

[papinianus]

> おなじスコープで宣言している変数（elapsedTime ）が参照できる
おっしゃるとおりですね。他にstartTimeがいないですかね。もしくはlet startTime = 0;とする。
(もしくはの意図は、宣言のみで代入がないので、最適化の都合などで省略された可能性を想定してます)
もしくはstartTimeは変動するものではないので、みんなletだからletじゃなくて、宣言時に`const startTime = Date.now()`とする

[nikkori]

＞startという変数がなかったので
失礼しました。ソース修正しました。
＞通常のJSではできているので、環境の問題でしょうかね。
ありがとうございます。
環境の問題であれば、あきらめてvarで書くことにします。
まだJSソースを見慣れていないので、なにか見落としているのかと悩んでいました。
助かりました！！

[nikkori]

＞papinianus
ありがとうございます。初期化はいま試したみましたが、同じ結果でした。。
開発環境がちょっと特殊(Monaca）なので、環境の問題のような気がします。

[papinianus]

環境が無関係だとは思いませんが、ご自身で書いた、elapsedがいけて、startができないは環境ではないと思いますが…
ブロックスコープが作用するブロック全体を提示して、有識者をまつ、が妥当だと思います。

[nikkori]

ソースコードを修正してみます。ありがとうございます。

[nikkori]

一番外側の{}を外したら動きました・・・
理由はよくわからずにおまじない的にいつも{}を付けていたのですが…
とりあえず自己解決のところに書いてみます。

[papinianus]

分かりました。
{}はブロックスコープをつくります。従って、let startTimeはglobalじゃなくてその無名の{}の中にしか存在しません。
startTime = Date.now();
のstartTimeや
elapsedTime = Date.now() - startTime;
のelapsedTimeでエラーが起こらないのは、その場で変数宣言が起きているからです。(elapsedTime = Date.now() - startTimeの直前にconsole.log(elapsedTime);とするとエラーになるはず)

[nikkori]

＞その場で変数宣言が起きているから
startTime = Date.now();
こういう書き方をすると暗黙的に変数が宣言されるということなのでしょうか・・・？
全然知りませんでした。勉強不足なので自分でも調べて理解してみます。
でも、解決の道が見えました！ありがとうございます。

[papinianus]

いますぐブラウザのF12を押してコンソールに`neverexists = "somestring"`とやってエラーが**起こらない**ことを確認しましょう。宣言したことになります。

[nikkori]

>`neverexists = "somestring"`
こちらではうまく動かずでした。クラウドIDEでスマホのハイブリッドアプリを作っているので
ブラウザで確認できないのです…ややこしくてすみません
ただ、理由がわかったので自分で調べてみようと思います。
ベストアンサーを付けたいのですが、どうすればいいでしょうか？（初めての質問で勝手がわからず）

[papinianus]

私のコメントは{}を外した理由の説明でしかないので、{}をはずしたら動きましたの自己解決でいいと思います。

[nikkori]

ありがとうございます。自己解決欄に記載します。
おまじないの部分もきちんと理解して書かなきゃですね。。

[madoka9393]

ほぼ解決しているみたいですが、「let」「var」(「const」)の使い分けについては以下等が参考になるかと。
var/let/constの使い分けのメモ
https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27
JavaScript var/let/constによる変数宣言
https://qiita.com/wannabe/items/b2a0d63fc786eab13c48

[nikkori]

ありがとうございます・・！
記事読みました。理解できてきたので、実際に試しながら使い方をマスターしていきたいです！

Answer 1

一番外側の{}をはずしたら解決しました。
以下、papinianusさんからのコメントでいただいた内容です。

{}はブロックスコープをつくります。従って、let startTimeはglobalじゃなくてその無名の{}の中にしか存在しません。

startTime = Date.now();
のstartTimeや
elapsedTime = Date.now() - startTime;
のelapsedTimeでエラーが起こらないのは、その場で変数宣言が起きているからです。(elapsedTime = Date.now() - startTimeの直前にconsole.log(elapsedTime);とするとエラーになるはず)

私の場合、(function(){})();で書くところを、深く考えず{}にしていたのがNGだったようです。
意味を理解して書こうと思います。