JavaScriptのnullとundefinedの違いを理解する!判定の方法と正しい使い分け。APIコラム海外エンジニアエンジニア論PC機器・書籍HOMEJavaScriptJavaScript入門JavaScriptのnullとundefinedの違いを理解する!判定の方法と正しい使い分け。JavaScriptのnullとundefinedの違いを理解する!判定の方法と正しい使い分け。経験者向けこの記事では、JavaScriptのnullとundefinedの違いについてプログラミング初心者向けに説明する。プログラミング言語の多くは変数を「null」もしくは「nullとnil」を使って表現し、nullとundefinedを用いて区別するのはJavaScriptの特徴的なポイントと言える。このnullとundefinedはJS初心者にとってハマりやすいポイントであって、予期せぬエラーの原因となることも少なくない。典型的なエラーメッセージJavaScriptのnullとundefinedJavaScriptのnullとundefinedの違いを一言で表現すると以下のようになる。NULLという値を持つ変数。nullリテラルの一種。プログラムが予期できるパターン。値が代入・初期化されていない変数。undefinedはJavaScriptの基本型のひとつであり、グローバルな定数とも言える。プログラムが予期出来ないパターン。関数の返り値として使われることもある。次にnullとundefinedの判定方法について確認したい。エクスクラメーションマーク」を付けて確認するのが手っ取り早い。console.log('nullかundefinedでは無い。');}ただし、この場合は変数の値が以下の場合もTRUEとして判定されてしまうので注意が必要。nullundefinedNaN空のString0falseundefinedのみ除外したい場合nullは除外してundefinedのみを判定したい場合は以下のようにチェックする。console.log('undefinedでは無い。逆にundefinedは除外してnullのみを判定したい場合は、以下のようにする。console.log('nullでは無い。実際に変数にundefinedを代入してif構文が想定通りに機能しているか確認したい場合は、次のように変数にundefinedを代入することができる。console.log('値はUndefinedです。')}undefinedをコンソールで確認してみるnull/undefinedの条件と判定nullとundefinedを条件がプログラム上でどのように判定されるかを知るためには以下の表を見てほしい。truehttps://developer.mozilla.orgから参照なお、JavaScriptにおける「==」と「===」の違いは以下の通り。データ型を考慮せずに値が等しいかテストする。データ型が同じかどうかも含めて同じがチェックする。undefinedが発生するパターンJavaScriptで開発をおこなっていてundefinedが発生するパターンには大きく分けて以下の3つがある。値が代入されていないオブジェクトのプロパティが存在しない配列に指定したインデックスが存在しない値が代入されていない予期せぬundefinedがもっともよく発生するのが、以下のコードのように値が変数に代入されていない場合だ。value;console.log(value);ただし、こういったパターンはIDEのコンパイルチェックで検出されるので、業務においてはあまり考えなくてもいいかもしれない。オブジェクトのプロパティが存在しない次によく起こりうるのがオブジェクトにプロパティが存在しないパターン。};console.log(person.age);配列に指定したインデックスが存在しない次に多いのが配列の指定したインデックスが存在していないパターン。};console.log(cities[3]);典型的なエラーメッセージ変数がundefinedの時に表示されるエラーメッセージにはおもに以下の2種類がある。undefine執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事JavaScriptの関数(function)を習う!高階関数や無名関数についても解説。2021.08.05この記事では、JavaScriptの関数(function)について説明していく。この記事は以下のような人たちに向けて書いている。プログラミング初[...]JavaScriptの開発環境を準備する!jsに対応したオススメのIDEも紹介。2021.07.15この記事では、これからJavaScriptを使ってWebサイトやWebアプリケーションの開発をしたいという人に向けて、必要な準備を解説していきたい。2021.07.10この記事では、現在もっとも人気あるプログラミング言語となったJavaScriptについて、その特徴と歴史を中心に解説していきたい。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。