null と undefined を見分ける
このレッスンで分かること
undefinedは「まだ値が入っていない」、nullは「意図的に空にした」を表しますtypeof nullは"object"になるため、typeofではnullを見分けられません
空欄が 2 種類あって見分けがつかない
プロフィールの項目を確認していると、値が入っていない欄に undefined と出たり null と出たりします。多くの言語では「値が無い」を表す値は 1 つですが、JavaScript には 2 つあり、意味も生まれ方も違います。
undefined は、まだ値が入っていない状態です。JavaScript が自動的に置いていきます。null は、意図的に空にした状態です。誰かが自分の手で書かないと現れません。
JavaScript
let avatarUrl;
console.log(avatarUrl); // undefined 宣言しただけの状態
avatarUrl = null; // 画像は設定しないと自分で決めた
console.log(avatarUrl); // nullundefined が現れるのは、変数を宣言して値を入れていないとき、関数の引数を渡さなかったとき、そしてオブジェクトに無い項目を読み出したときです。どれもエラーにはならず、静かに undefined が入ります。
null が現れるのは、開発者が書いたときと、一部の組み込み機能が「見つからなかった」を返すときです。画面から要素を探す機能は、該当する要素が無いと null を返します。
自己紹介の欄をまだ作っていないなら undefined、欄はあるけれど入力しないと決めたなら null です。前者はシステムの都合、後者は人の意思です。
覚え方
undefinedは JavaScript が置いていくもの、nullは開発者が置くもの。この視点で区別すると迷いません。
typeof では見分けられない
型を調べる typeof は、この 2 つのうち片方でつまずきます。
JavaScript
console.log(typeof undefined); // "undefined" 素直な結果
console.log(typeof null); // "object" オブジェクトと同じ結果typeof null が "object" になるのは、JavaScript が生まれた初期の実装上の間違いです。直すと既存のサイトが壊れてしまうため、互換性のために残されました。仕様として直せなかった、という歴史的な事情による例外です。
この 1 点があるせいで、typeof では null とオブジェクトを区別できません。null かどうかを知りたいときは、型名ではなく値そのものを === null で確かめます。
JavaScript
const avatarUrl = null;
console.log(avatarUrl === null); // true
console.log("" === null); // false 空文字は null ではない
console.log(0 === null); // false 0 も null ではない空文字も 0 も、真偽値としては偽になる仲間ですが、null そのものではありません。前のレッスンの falsy 判定と null の判定は、別の質問だと考えてください。
自分で書くときはどちらを選ぶか
| 場面 | 使う値 | 理由 |
|---|---|---|
| 値をまだ決めていない | undefined | 自然に発生する状態に任せる |
| 空だと決めた | null | 意思を持って空にしたと伝わる |
| サーバーに送る | null | JSON では undefined が消える |
最後の行は実務でよく効きます。JSON.stringify() は undefined の項目を出力から取り除きますが、null はそのまま残します。サーバーに「この項目を空にする」と伝えたいなら null を使う必要があります。
よくある間違い
多いのは、undefined を文字列の "undefined" と混同するケースです。
JavaScript
let bio;
console.log(bio === "undefined"); // false 文字列ではない
console.log(bio === undefined); // trueconsole.log の表示は同じ見た目でも、引用符が付いていない undefined は値そのものです。画面に出た文字だけで判断せず、typeof で型を確かめる習慣を付けてください。
要件
- 関数名は isNullField、引数は value (任意の値) の 1 つ
- value = null の結果をそのまま返す。 は使わない
- 戻り値は true または false の真偽値
入出力例
isNullField(null) → true
isNullField() → false
isNullField("") → false
isNullField(0) → false
isNullField("山田 太郎") → falseヒント
