目次
『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は『値が未定義』、nulは『値がない』を表現する値のこと
- 初期化前の変数や参照元が存在しない場合はundefinedになる
- 検索や正規表現などで該当する値がない場合はnullになる
さいごに
Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです!