こんにちは、にんじんです！

（執筆時点では）ひどい暑さの今日このごろ、「暑すぎて頭が回らず、小さいミスが増える」なんてことの無いようにしたいですね。

今回は、JavaScriptの基礎／基本についてお話しようと思います。

こちらは何を隠そう、先日、私が参画している案件にて、実際に不具合を起こしてしまった内容となります（涙）¹⁾なおテスト期間だったので難は逃れたもよう

さぁ、私はどんな不具合を起こしたのか、まずはクイズから始めましょうか。

この違い、アナタはわかる？

さて、下の２つ、どう違うでしょう？

var aaa;

if (!aaa) {

  return false;

}

if (!bbb) {

  return false;

}

・

・

・

・

・

え、同じじゃないの？と思ったそこのあなた、残念ながら私の仲間です（笑）
このコード、Aはfalseを返してくれますが、Bはエラーになります。

Bだとこんな感じで真っ赤に（悲しい）

解説しようぜ

そもそもundefinedって何？

undefinedは、宣言のみが行われた変数、あるいは実引数が存在しない仮引数に自動的に割り当てられるプリミティブ値のことです。
参考：undefined – MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

私がJavaScriptについて調べるときに愛用しているMDNさんによると、「プリミティブ型の一種」と書かれていますね。

つまり、intやstringと仲間ということになります。

「未定義が型の仲間」ってなんやねん？！って感じですが、それがJavaScriptだと思って覚えるしか無いですね（笑）

それじゃあnot definedは？

こちらもMDNさんに答えを聞きましょう。

どこかで定義されていない変数を参照しています。この変数は、定義されている必要があります。または、現在のスクリプトか scope で利用可能か確認する必要があります。
参考：ReferenceError: “x” is not defined – JavaScript | MDN

未定義は未定義でも、undefinedは値が一度も格納されていない状態。

こちらは、「本当にまったく宣言されていない」 もしくは 「宣言されているがスコープの範囲外」ということだそうです。

Javaだとundefinedの状態で使おうとしたら、コンパイルエラーになるのでなかなか掴みづらいところです。

とりあえず、「自由度の高いJavaScriptでもまったく宣言せずには使えない」ってことですね。

伝わったかな、問題のエラーの原因

というわけで、冒頭のエラーの原因はご理解いただけたでしょうか。

Bのソースでは変数bbbが一度も宣言されていないため、実行時エラーになってしまったのでした。

余談ですが、私が実際に発生させてしまった不具合をご紹介しましょう。

冒頭Bのようなソースを書いた上で、必要な場合のみ別ファイルのグローバル変数としてbbbを宣言する形にしていました。

Aのようにundefinedとして扱われて、if文でfalseになるかと思いきや、別ファイルを読み込んでいない画面ではエラーになってしまい、無関係な機能に影響を及ぼしてしまったのでした。

まとめ

いかがでしたか？

「今回はじめて知った」という方がいて、私と同じ不具合の発生がひとつでも減らせたのであれば幸いです。

私は普段バックエンドメインの仕事しているので、JavaScriptは思わぬところの罠に引っかかりがちです。

今後は思い込みで作業せずに、リファレンス見ながら実装したいところ。

そんな自戒を込めた記事でした。それでは。