letの仕様に関する知識を問うJavaScriptの問題

先日、とあるSNSを見ていたら、JavaScriptの問題が出されていた。

さて、ここで問題

let a = 10

if(true) {
    let a = 20
    console.log(a, 'inside')
}
console.log(a, 'outside')

// Q. What is the output of thie below code?
// 1. 20, 'inside' and 20, 'output
// 2. 20, 'inside' and 10, 'output
// 3. 10, 'inside' and 10, 'output
// 4. 10, 'inside' and 20, 'output

このコードを実行した結果、どのような結果が求められるでしょう。

予想

面白そうなので実行する前に推測してみる。 まず、If文がtrueなので当然のようにIfの中身が実行される。 ここでLetの仕様の話になるのだが、Letは関数内でスコープされるので、先頭で定義されたLetとIf文の中のLetは違うものだということになる。

結果、If文の中のaは20となり、outsideのaはどこからも影響を受けずに10のままになる。

つまり2が正解になると予想される。

結果

[LOG]: 20,  "inside"
[LOG]: 10,  "outside"

正しいと証明された。

たぶん予想の仮説も正しいが、念のためChat Gptに聞いてみる。

このコードの出力は、以下のようになります：

20, 'inside' and 10, 'output
理由は次のとおりです：

最初の行で、変数 a に値 10 を代入します。

次に、if 文の中に入りますが、条件式は true なので、ブロック内のコードが実行されます。

ブロック内で、変数 a に値 20 を代入します。これは新しいスコープ内で宣言されたローカル変数です。

console.log(a, 'inside') を実行すると、20, 'inside' が出力されます。

if 文のブロックを抜けると、元のスコープに戻ります。

console.log(a, 'outside') を実行すると、10, 'outside' が出力されます。これは、最初に宣言されたグローバル変数 a の値が表示されています。

したがって、最終的な出力は 20, 'inside' と 10, 'outside' になります。

うん、同じことを言っているので一安心した。

Var or Const

Var

ちなみにVarで定義すると、aが毎回上書きされるので、

[LOG]: 20,  "inside"
[LOG]: 20,  "outside"

になる。

Const

ConstもLetと同様の結果になる。