【JavaScript】nullを判定する方法|nullとundefinedの違いも解説

Web制作
悩む男性
悩む男性

nullって何?

nullを判定するにはどうしたらいいの?

nullとは、主にプログラミングやコンピュータ関係で使われる用語で、「何も示さないもの」という意味で用いられます。

しかし、nullは数列や文字列ではなく、数値である「0(ゼロ)」や「’’」「””」などで表されるような空文字とは区別されて使われます。

そのため、nullは数値や文字列との比較や演算ができないという特徴もあります。

私自身、nullの理解も微妙で、undefinedとの違いも難しいものでした。

この記事では、私もはじめ混乱していたnullについて解説したいと思います。

この記事のポイント
  • nullとは何か
  • nullとundefinedの違い
  • nullを判定する方法

【JavaScript】nullを判定する方法

nullとは

変数が意図的に値を持たないことを示すために使用されます。つまり、何かが存在しないことを示すためにnullを使います。

しかし、何もないからと言って「”” (空文字)」や「0」もnullになるかというとそうではありません。

コードでnullであるかどうか、判定してみましょう。

const test1 = ""; // 空文字を定数に代入
const test2 = 0; // 0を定数に代入
const test3 = null; // nullを定数に代入

// 判定
console.log(test1 == null); // false
console.log(test2 == null); // false
console.log(test3 == null); // true

trueの戻り値の場合、nullであるということになるので、「”” (空文字)」や「0」はnullではないことが分かります。

nullとundefinedの違い

nullは前述通り、変数が意図的に値を持たないことを示すために使用され、存在しないことを示すためにnullを使います。 例えば、ある変数に何か値が設定されるが、後でそれを削除する場合、nullを使用して値を削除します。
基本的に、開発者によって意図的に設定されることが多いです。

一方、undefinedは、変数が宣言されているが、値が割り当てられていないことを示すために使用されます。つまり、undefinedは存在しないものを指す場合に使用されます。
例えば、変数を宣言したが、値をまだ割り当てていない場合やスペルミスなどで変数が読み込めない場合で、undefinedが返されます。 開発者の意図しない動きの時に、undefinedが返されます。

下記は、nullとundefinedのコード例です。

let variable1 = null; // 変数に値を割り当てないことを示す
let variable2; // 変数が宣言されたが、値が割り当てられていないことを示す(undefined)

nullを判定する方法

厳密等価演算子による判定方法

nullを判定するためには、厳密等価演算子(===)を使用することができます。

コードの例は下記の通りです。

let myVariable = null;

if (myVariable === null) {
  console.log("myVariable is null");
} else {
  console.log("myVariable is not null");
}
// myVariable is null

typeof演算子を用いた判定方法

typeof演算子を使用することもできます。
nullのtypeof演算子の結果は”object”になります。
nullはオブジェクトではありますが、null自体がオブジェクトではないため、nullを判定するためには条件を追加する必要があり、具体的には、typeof演算子で”object”を返すことを確認し、同時にnullであることを確認する必要があります。

コードの例は下記の通りです。

let myVariable = null;

if (typeof myVariable === "object" && myVariable === null) {
  console.log("myVariable is null");
} else {
  console.log("myVariable is not null");
}

nullとundefinedを比較判定するときの注意点

変数が存在しない場合、undefinedを使用できない

変数が存在しない場合、つまり宣言されていない場合に、その変数を参照しようとすると、ReferenceErrorが発生し、undefinedを使用することができません。

例えば、以下のようなコードを実行すると、nameが宣言されていないため、ReferenceErrorが発生します。

console.log(name); // ReferenceError: myVariable is not defined

一方、以下のように変数だけが宣言されている場合には、undefinedが返されます。

let name;
console.log(name); // undefined

上記の例のように、変数が存在しない場合には、ReferenceErrorが発生するため、undefinedを使用することはできないので、注意が必要です。

比較判定する場合には、厳密等価演算子(===)を使用する

nullとundefinedは、値としては似ていますが、内部的には異なる型なので、それぞれ独自の用途があります。
JavaScriptでは、比較演算子(==)を使用する場合、型の変換が自動的に行われるため、開発者の意図しない結果が得られる可能性があります。

例えば、比較演算子を使用してnullとundefinedを比較すると、以下のような結果が得られます。

null == undefined // true

この場合、比較演算子による判定だと、両方の値が等しいと評価されてしまいます。
しかし、これは意図した結果ではありません。 nullとundefinedは、意味論的には異なる値であるため、falseを返してほしいですよね。

このような問題を回避するため、厳密等価演算子(===)を使用することがおすすめされています。
厳密等価演算子は、比較前に型の比較を行うため、型変換が自動的に行われることはありません。
そのため、厳密等価演算子を使用すると、nullとundefinedが正確に比較されます。

以下のコードを実行すると、厳密等価演算子によって、nullとundefinedが等しくないことがわかります。

null === undefined // false

JavaScript独特の型変換は便利でもありますが、このような時には注意が必要です。

したがって、nullとundefinedを比較する場合には、厳密等価演算子(===)を使用することをおすすめします。 これにより、型変換による問題を回避でき、正確な比較を行うことができます。

まとめ

今回はnullについて、比較判定方法について詳しく解説しました。
またundefinedとの違いについても解説しました。

nullを判定するには、厳密等価演算子(===)を使用するということをしっかりと覚えておきましょう。

nullをうまく使えるようになって、開発するシステムの幅を広げていきたいと思います。

タイトルとURLをコピーしました