Ugo

Webエンジニアのためのプログラミング情報サイト

JavaScriptのnullとundefinedの違いを理解する！判定の方法と正しい使い分け。

JavaScriptのnullとundefinedの違いを理解する！判定の方法と正しい使い分け。

この記事では、JavaScriptのnullとundefinedの違いについてプログラミング初心者向けに説明する。

プログラミング言語の多くは変数を「null」もしくは「nullとnil」を使って表現し、nullとundefinedを用いて区別するのはJavaScriptの特徴的なポイントと言える。

このnullとundefinedはJS初心者にとってハマりやすいポイントであって、予期せぬエラーの原因となることも少なくない。

では、違いを見ていこう。

目次

JavaScriptのnullとundefined

JavaScriptのnullとundefinedの違いを一言で表現すると以下のようになる。

  • null ➡ 値が不在の変数。

    NULLという値を持つ変数。nullリテラルの一種。
    プログラムが予期できるパターン。
  • undefined ➡ 値が代入・初期化されていない変数。

    undefinedはJavaScriptの基本型のひとつであり、グローバルな定数とも言える。
    プログラムが予期出来ないパターン。関数の返り値として使われることもある。

null/undefinedの判定方法

次にnullとundefinedの判定方法について確認したい。

nullとundefinedの判定方法

nullとundefinedの両方を検出したい場合は、次のように変数の頭に「! エクスクラメーションマーク」を付けて確認するのが手っ取り早い。

if (!value) {
  console.log('nullかundefinedでは無い。');
}

ただし、この場合は変数の値が以下の場合もTRUEとして判定されてしまうので注意が必要。

  • null
  • undefined
  • NaN
  • 空のString
  • 0
  • false

undefinedのみ除外したい場合

nullは除外してundefinedのみを判定したい場合は以下のようにチェックする。

if (value !== undefined) {
  console.log('undefinedでは無い。');
}

nullのみ除外したい場合

逆にundefinedは除外してnullのみを判定したい場合は、以下のようにする。

if (value !== null) {
  console.log('nullでは無い。');
}

undefinedを代入する方法

実際に変数にundefinedを代入してif構文が想定通りに機能しているか確認したい場合は、次のように変数にundefinedを代入することができる。

let person = { name: 'Thomas' };
if (person.age === undefined) {
    console.log('値はUndefinedです。')
}

undefinedをコンソールで確認してみる

null/undefinedの条件と判定

nullとundefinedを条件がプログラム上でどのように判定されるかを知るためには以下の表を見てほしい。

条件判定
typeof null“object”
typeof undefined“undefined”
null === undefinedfalse
null == undefinedtrue
null === nulltrue
null == nulltrue
!nulltrue
isNaN(1 + null)false
isNaN(1 + undefined)true
https://developer.mozilla.orgから参照

なお、JavaScriptにおける「==」と「===」の違いは以下の通り。

  • == ➡ データ型を考慮せずに値が等しいかテストする。
  • === ➡ データ型が同じかどうかも含めて同じがチェックする。

undefinedが発生するパターン

JavaScriptで開発をおこなっていてundefinedが発生するパターンには大きく分けて以下の3つがある。

  1. 値が代入されていない
  2. オブジェクトのプロパティが存在しない
  3. 配列に指定したインデックスが存在しない

値が代入されていない

予期せぬundefinedがもっともよく発生するのが、以下のコードのように値が変数に代入されていない場合だ。

let value;
console.log(value);

ただし、こういったパターンはIDEのコンパイルチェックで検出されるので、業務においてはあまり考えなくてもいいかもしれない。

オブジェクトのプロパティが存在しない

次によく起こりうるのがオブジェクトにプロパティが存在しないパターン。

let person = { name: 'Thomas' };
console.log(person.age);

配列に指定したインデックスが存在しない

次に多いのが配列の指定したインデックスが存在していないパターン。

let cities = { 'Toko', 'Osaka' };
console.log(cities[3]);

典型的なエラーメッセージ

変数がundefinedの時に表示されるエラーメッセージにはおもに以下の2種類がある。

TypeError: ‘undefined’ is not a function
TypeError: Cannot read property ” of undefine

MENU