【JavaScript】undefinedとnullの違い・判別方法を具体例で理解する

JavaScript

『undefinedとnullの違い』の結論

undefinedは、そもそも値が設定されていないので返す値自体が存在しないときに『値が未定義』を表現する値のこと。
nullは、本来は何か値を返すべきだけど返す値がないときに『値がない』を表現する値のこと。

undefinedの意味についてもう少し詳しく

宣言した変数に値をセットしていなかったり、存在しないプロパティを参照したりする場合、取得できる値は存在しません。
取得できる値がそもそも存在しない場合、つまり値が未定義の場合はundefinedになります。

変数の初期化ができていなかったり参照するプロパティ名を間違えてたりすると、本来値が取得できるはずの変数がundefinedになります。

nullの意味についてもう少し詳しく

例えばAPIへの問い合わせ等で検索をした結果なにも値が取得できなかった場合、値が未定義なのではなく該当する値が存在しなかったといえます。
該当する値が存在しない、つまり『値がない』を表現する場合はnullになります。
nullは値がないことを伝えるための値ですので、意図的にセットされる値ともいえます。

値の取得ロジックにバグがあると、本来値がセットされているはずの変数がnullになります。

undefinedとnullの定義について

JavaScriptにおけるnullとundefinedの定義について説明します。

undefinedもnullもプリミティブ型

JavaScriptのデータ型にはプリミティブ型とオブジェクトがあります。
プリミティブ型とは真偽値や数値など基本的な値の型です。nullもundefiniedもプリミティブ型に属します。

データ型やプリミティブ型の詳細解説は【JavaScript】データ型（プリミティブ型とオブジェクト）、リテラルに関する基礎知識で紹介しています。

undefinedはグローバル変数、nullはリテラル

リテラルとはプリミティブ型やオブジェクトを定義するための記法のことをいいます。
具体的には真偽値を表すtrue・falseや、文字列を表す"などです。

nullも、nullという値を表すリテラルです。
一方でundefinedはリテラルではなくグローバル変数です。

リテラルは変数名に利用できないのでnullという変数名は定義できません。一方でundefinedはグローバル変数ですので、undefinedというローカル変数を定義できます。

// nullという変数が定義できない例
let null; // SyntaxError: Unexpected token 'null'

// undefinedというローカル変数が定義できる例
const undefinedFunction = () => {
  const undefined = "This is undefined"; // nullとは違い、エラーにならない
  console.log(undefined);
};

undefinedFunction(); // This is undefined

undefinedやnullになるケースの具体例

undefinedやnullになる例について紹介します。

undefinedになる例

値が未定義の場合undefinedになります。値が未定義になるパターンは以下の通りです。

  • 変数の初期化が終わっていない場合
  • 参照元が存在しない場合

以下ではそれぞれの場合について紹介します。

変数の初期化が終わっていない場合

初期化とは宣言した変数に対して値を設定することです。

// hogeを宣言しただけで、初期化は完了していない
let hoge;
console.log(hoge); // undefined

参照元が存在しない場合

例えば、未定義のプロパティや存在しないインデックスを参照するとundefinedになります。

// 未定義のプロパティを参照する
let obj = {};
console.log(obj.hoge); // undefined

// 存在しないインデックスを参照する
let array = [1, 2, 3];
console.log(array[10]); // undefined

nullになる例

値がない場合nullになります。

例えば、検索APIの結果や正規表現のマッチ結果などがnullになるケースとして挙げられます。
以下は指定した正規表現にマッチする文字列が存在しなかった場合の例です。

const numberPattern = /\d+/; // 数字に関する正規表現

const alphabetsStr = "abc"
const alphabetsResult = str.match(numberPattern)

console.log(alphabetsResult[0]) // null（「該当する値がない」ということを表現している）

現実世界を例にあげると、令和時代に『令和が終わる年』を参照する場合も『年号はいずれ終わるから値はある。しかし現時点では返す値がない』という意味ではnullになります。
一方で、存在しない年号の終わる年を参照した場合、そもそも未定義の年号なので結果はundefinedとして扱われるのが適切です。
なお、年号を例にしたnullとundefinedの比較は【JS】令和でわかるnullとundefinedの違いの記事がわかりやすいです。

undefined判定とnull判定について

undefinedとnullは等価演算(==)において等価、厳密等価演算(===)において不等価です。

等価演算と厳密等価の違いの詳細解説は【JavaScript】厳密等価演算子（===, イコール3つ）と等価演算子（==, イコール2つ）の違いで紹介しています。

以下は等価演算と厳密等価演算におけるundefinedとnullの真偽値結果です。

undefined === undefined // true
null === null // true
undefined === null // false
undefined == null // true

undefinedのみを判定したい場合はvalue === undefined、nullのみを判定したい場合はvalue === nullとなります。

以下は厳密等価によってundefinedとnullを識別する例です。

const distinguishUndefinedOrNull = (value) => {
  if (value === undefined) {
    console.log('This is undefined')
  } else if (value === null) {
    console.log('This is null')
  } else {
    console.log('This is not undefined nor null')
  };
};

let undefinedValue;
distinguishUndefinedOrNull(undefinedValue); // This is undefined

const nullValue = null;
distinguishUndefinedOrNull(nullValue); // This is null

undefinedあるいはnull以外に対して処理をしたい場合はvalue != nullとなります。value != undefinedでも同様の結果になります。
一般的にundefinedとnullを区別する必要はないので、== nullを使ってnullとundefinedをまとめてチェックするとよいです。1

以下はvalue != nullの挙動を確認する例です。

const undefinedOrNullChecker = (value) => {
  if (value != null) {
    console.log('This is not undefined nor null')
  } else {
    console.log('This is undefined or null')
  };
};


let undefinedValue;
undefinedOrNullChecker(undefinedValue); // This is undefined or null

const nullValue = null;
undefinedOrNullChecker(nullValue); // This is undefined or null

const str = 'hoge'
undefinedOrNullChecker(str); // This is not undefined nor null

まとめ

undefinedとnullのまとめ
  • undefinedは『値が未定義』、nulは『値がない』を表現する値のこと
  • 初期化前の変数や参照元が存在しない場合はundefinedになる
  • 検索や正規表現などで該当する値がない場合はnullになる

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考

  1. TypeScript Deep Dive 日本語版『nullとundefined』 ↩
RECOMMEND