JavaScriptでundefind・null判定を完璧に理解する5つの方法

はじめに

この記事を読めば、JavaScriptでundefind・null判定を完璧に理解することができるようになります。

初心者の方でもわかりやすく、実用的なサンプルコードを交えて説明しますので、ぜひ最後までお読みください。

●JavaScriptのundefindとnullについて

まずは、JavaScriptでよく使われるundefindとnullについて簡単に説明します。

○undefindとは

JavaScriptでは、宣言されているものの値がまだ代入されていない変数や、存在しないオブジェクトのプロパティにアクセスした際に、値としてundefindが返されます。

○nullとは

nullは、変数に値が存在しないことを明示的に示すために使用される特殊な値です。

開発者が意図的に変数にnullを代入することで、変数が空であることを示すことができます。

●undefind・null判定の方法

ここでは、JavaScriptでundefindとnullを判定する5つの方法をサンプルコードとともに紹介します。

○サンプルコード1：typeofを使った判定

このコードでは、typeof演算子を使って変数がundefindかどうかを判定しています。

この例では、変数aが宣言されていないため、結果はtrueになります。

// 変数aが未定義の場合
if (typeof a === 'undefined') {
  console.log('変数aはundefinedです。');
}

○サンプルコード2：nullチェック

このコードでは、変数がnullかどうかを判定しています。

この例では、変数bにnullが代入されているため、結果はtrueになります。

let b = null;

if (b === null) {
  console.log('変数bはnullです。');
}

○サンプルコード3：undefinedとnullの一括チェック

このコードでは、undefinedとnullを同時に判定しています。

この例では、変数cがnullであるため、結果はtrueになります。

let c = null;

if (c == null) {
  console.log('変数cはundefinedまたはnullです。');
}

○サンプルコード4：truthy・falsy値を利用した判定

このコードでは、変数がtruthy（真として扱われる値）かfalsy（偽として扱われる値）で判定しています。

この例では、変数dがundefinedであるため、結果はtrueになります。

let d;

if (!d) {
  console.log('変数dはfalsyな値です。'); // undefinedやnullなど
}

○サンプルコード5：Optional Chainingを使った判定

このコードでは、Optional Chaining（?.）を使って、オブジェクトのプロパティがundefinedかnullかを判定しています。

この例では、オブジェクトeのプロパティfが存在しないため、結果はundefinedになります。

let e = {};

if (e?.f === undefined) {
  console.log('オブジェクトeのプロパティfはundefinedです。');
}

●応用例とサンプルコード

ここでは、undefind・null判定を応用した実用的なサンプルコードを紹介します。

○サンプルコード6：関数の引数にデフォルト値を設定

このコードでは、関数の引数にデフォルト値を設定しています。

この例では、引数がundefinedの場合、デフォルト値が適用されます。

function greet(name = '未設定') {
  console.log(`こんにちは、${name}さん!`);
}

greet(); // "こんにちは、未設定さん!"と出力される

○サンプルコード7：オブジェクトのプロパティチェック

このコードでは、オブジェクトのプロパティが存在するかどうかをチェックしています。

この例では、オブジェクトgのプロパティhがnullであるため、結果はtrueになります。

let g = {
  h: null
};

if ('h' in g && g.h === null) {
  console.log('オブジェクトgのプロパティhはnullです。');
}

●注意点と対処法

JavaScriptでは、undefinedとnullは別の値ですが、非厳密な比較（==）では同じとみなされます。

そのため、厳密な比較（===）を使用して判定することが推奨されます。

ただし、undefinedとnullの両方を同時にチェックしたい場合は、非厳密な比較（==）を使用しても問題ありません。

●カスタマイズ方法

undefind・null判定をカスタマイズすることで、JavaScriptプログラムの安全性や柔軟性を向上させることができます。

ここでは、カスタマイズの方法をいくつか紹介します。

1. オブジェクトのプロパティにアクセスする際にOptional Chaining（?.）を活用することで、プロパティが存在しない場合にエラーを回避できます。
2. 関数の引数がundefind・nullの場合に適切なデフォルト値を設定することで、コードの安定性を向上させることができます。
3. オブジェクトや配列の要素がundefind・nullであることを確認してから処理を行うことで、実行時エラーを防ぐことができます。
4. カスタムエラー処理を実装することで、特定の状況でundefind・nullが発生した際に適切な対応ができるようになります。

これらのカスタマイズ方法を適切に組み合わせることで、より堅牢なJavaScriptプログラムを実現することができます。

まとめ

この記事では、JavaScriptのundefindとnullについて説明し、それらを判定する方法と応用例をサンプルコードを用いて紹介しました。また、カスタマイズ方法についても触れました。

undefind・null判定は、日常的にJavaScriptを使用する際に避けて通れない重要なテーマです。

これらの知識をしっかりと理解しておくことで、より安全で堅牢なコードを書くことができるでしょう。