JavaScriptで意図しないグローバル変数に気を付ける

こんにちは。SESエンジニアのつくねん。です。
現場で開発中相談を受けて、こんなパターンあるんだ！という気づきをいただいたので残します。内容は「コードに意図しないグローバル変数が現れる」という話です。

関数内での変数がグローバル変数として扱われる

早速、該当のコード例を。
この状態で動作を確認すると

function func(){
    variable = "関数内で定義"　　// variable は関数内で初めて登場
　　
　　// 処理が続く
}

func()
console.log(variable)　// 関数内で定義 が出力

変数variableが関数内で初めて宣言されているにもかかわらず
関数呼び出し後にvariableが使えてしまいます。
通常であれば、関数内で定義されたものは関数内のみ有効になるはずなのにおかしいですよね。

実はこれ、variableがグローバル変数 として扱われているからです。
※グローバル変数は簡単にいうとスコープ外に宣言されている変数です。
（if文や関数など{}やつに囲まれてないやつ。）

関数内で let を使わずに変数宣言した場合、グローバル変数になる
ということです。
こんな仕様なんですね、恥ずかしながら全然知りませんでした。。

関数内で let で 宣言した場合は以下のように

function func(){
    let variable = "関数内で定義"
　　
　　// 処理が続く
}

func()
console.log(variable)　// Uncaught ReferenceError: variable is not defined

Uncaught ReferenceError: variable is not defined がエラーがちゃんと出ます
ばっちり、スコープが効いている証拠ですね。

let自体書き忘れも稀ですが、もし忘れるとかなりめんどそうだなと思いました。以後念頭に置いて気をつけたいものです。。