[解決済み] ある関数内でletを使って宣言した変数が、他の関数で利用可能になる場合と、参照エラーになる場合があるのはなぜですか？

疑問点

関数内で宣言すると、なぜ変数が奇妙な動作をするのか理解できません。

1. の中で first 関数で宣言しています。 let は、変数 b と c という値で 10 :

   b = c = 10;
   
   

   で second 関数を示しています。

   b + ", " + c
   
   

   そして、これは示しています。

   10, 10
   
   

2. にもあります。 first 関数で a という値で 10 :

   let a = b = c = 10;
   
   

   しかし、その中の second 関数はエラーを表示します。

   変数が見つかりません。 a

3. では first 関数を宣言します。 d 値付き 20 :

   var d = 20;
   
   

   しかし、その中の second 関数では、前と同じエラーが表示されますが、変数 d :

   変数が見つかりません。 d

例

function first() {
  let a = b = c = 10;
  var d = 20;
  second();
}

function second() {
  console.log(b + ", " + c); //shows "10, 10"

  try{ console.log(a); }  // Rreference error
  catch(e){ console.error(e.message) }

  try{ console.log(d); } // Reference error
  catch(e){ console.error(e.message) }
}
first()

解決方法は？

実際に言っているからです。

c = 10;
b = c;
let a = b;

そして、あなたが考えているようなことではない、ということです。

let a = 10;
let b = 10;
let c = 10;

いくら変数を追加しても、エラーを起こすのは最初の(a)だけであることにお気づきでしょう。

これは "let" が変数を宣言したブロック（または "locally" 多かれ少なかれ "in the brackets" を意味します）にスコープしているためです。

もし、"let" を使わずに変数を宣言すると、その変数はグローバルにスコープされます。

つまり、変数を設定した関数では、すべてが値10になります（デバッガでブレークポイントを設定すれば、このことがわかります）。最初の関数でa,b,cのコンソールログを出せば、すべてうまくいきます。

しかし、その関数を離れるとすぐに、最初の1つ（a）--もう一度言いますが、技術的には代入順では最後の1つです--が "消える" （これも、2番目の関数にブレークポイントを設定すればデバッガで確認できます）、他の2つ（またはいくつ追加しても）はまだ利用可能です。

これは、"let" が最初の変数にのみ適用される（つまりローカルにのみスコープされる）ためで、繰り返しますが、技術的にはチェーンの中で最後に宣言され値が割り当てられた変数になります。残りの変数には技術的に "let" が前に付いていません。つまり、これらは技術的にはグローバルに（つまり、グローバルオブジェクトに）宣言されており、それが2番目の関数に表示される理由です。

試しに、"let" のキーワードを削除してみてください。これで、すべての変数が利用可能になります。

var" も同様のローカルスコープ効果を持ちますが、変数がどのように "hoisted" されるかが異なります。これは絶対に理解しておくべきことですが、ご質問には直接関係ありません。

(ちなみに、この質問はプロのJS開発者を十分に困らせるでしょう)。

キーワードなし、let"、var"といった、JSにおける変数の宣言方法の違いに時間をかけることを強くお勧めします。