初心者必見！JavaScriptで未定義判定をマスターする10選

はじめに

この記事を読めば、JavaScriptで未定義判定を行う方法をマスターすることができるようになります。

未定義判定について詳しく解説し、さまざまな方法とサンプルコード、注意点を紹介します。

初心者の方でも安心して取り組める内容です。

●未定義判定とは

JavaScriptでは、変数やオブジェクトが未定義（undefined）であるかどうかを判定することがしばしば必要になります。

未定義判定を行うことで、エラーを防ぐだけでなく、プログラムの安全性や堅牢性を向上させることができます。

○undefinedとnullの違い

JavaScriptでは、未定義の変数やオブジェクトに対して「undefined」という特殊な値が割り当てられます。

また、「null」という値も似たような役割を果たしますが、nullは「値が存在しない」という意味で、開発者が明示的に設定することができます。

一方、undefinedはシステムが自動的に割り当てる値で、「変数が未定義」であることを示しています。

●未定義判定の方法10選

JavaScriptで未定義判定を行う方法はいくつかあります。

ここでは、10の方法をサンプルコードとともに紹介していきます。

○方法1：typeof演算子

typeof演算子を使用して変数の型を調べ、未定義かどうかを判定することができます。

let hoge;
if (typeof hoge === 'undefined') {
  console.log('hogeは未定義です');
}

上記のサンプルコードでは、hoge変数が未定義であることを確認し、未定義であればメッセージが表示されます。

○方法2：undefinedとの比較

変数がundefinedと同じかどうかを比較することで、未定義判定を行うことができます。

let hoge;
if (hoge === undefined) {
  console.log('hogeは未定義です');
}

このサンプルコードでも、hoge変数が未定義であるかどうかを確認しています。

○方法3：nullとの比較

変数がnullと同じかどうかを比較することで、未定義判定を行うことができます。

ただし、nullとundefinedは厳密には異なるため、この方法はあくまで参考程度に使ってください。

let hoge;
if (hoge == null) {
  console.log('hogeは未定義です');
}

○方法4：真偽値に変換

未定義の変数は、真偽値に変換するとfalseになるため、この性質を利用して未定義判定を行うことができます。

let hoge;
if (!hoge) {
  console.log('hogeは未定義です');
}

○方法5：try…catch文

try…catch文を使って、未定義の変数にアクセスしようとしたときのエラーを捕捉することで、未定義判定を行うことができます。

try {
  console.log(hoge);
} catch (e) {
  console.log('hogeは未定義です');
}

○方法6：オブジェクトのプロパティチェック

オブジェクトのプロパティが未定義かどうかをチェックするには、in演算子やhasOwnPropertyメソッドを使います。

const obj = { foo: 'bar' };
if (!('hoge' in obj)) {
  console.log('hogeプロパティは未定義です');
}

○方法7：Arrayの要素チェック

Arrayの要素が未定義かどうかをチェックするには、インデックスを使ってアクセスし、未定義判定を行います。

const arr = [1, 2, 3];
if (typeof arr[3] === 'undefined') {
  console.log('要素は未定義です');
}

上記のサンプルコードでは、配列arrのインデックス3の要素が未定義かどうかを確認しています。

○方法8：関数の引数チェック

関数の引数が未定義かどうかをチェックするには、引数にtypeof演算子を使って未定義判定を行います。

function greet(name) {
  if (typeof name === 'undefined') {
    console.log('引数が未定義です');
  } else {
    console.log('Hello, ' + name);
  }
}

greet(); // 引数が未定義です
greet('John'); // Hello, John

○方法9：ES6のデフォルト引数

ES6では、関数の引数にデフォルト値を設定することができます。

デフォルト値を設定することで、引数が未定義の場合にデフォルト値が使用されます。

function greet(name = '名無しさん') {
  console.log('Hello, ' + name);
}

greet(); // Hello, 名無しさん
greet('John'); // Hello, John

○方法10：オプショナルチェイニング演算子

オプショナルチェイニング演算子?.を使って、オブジェクトのプロパティが未定義かどうかを簡潔にチェックできます。

const user = {
  name: 'John',
  address: {
    city: 'Tokyo'
  }
};

console.log(user?.address?.country); // undefined

上記のサンプルコードでは、user.address.countryが未定義であることをオプショナルチェイニング演算子で確認しています。

●注意点と対処法

未定義判定を行う際、注意すべき点として、nullとundefinedは異なることに気をつけましょう。

nullとundefinedを区別せずに判定してしまうと、意図しない結果になる可能性があります。

また、関数の引数やオブジェクトのプロパティチェックの際には、適切な方法を選択して判定を行ってください。

まとめ

この記事では、JavaScriptで未定義判定を行う方法を10選紹介しました。

未定義判定はプログラムの安全性を向上させるために重要な要素です。

適切な方法を選択して、未定義な値に対処することで、エラーを防ぎ、コードの品質を向上させることができます。

各方法の特性を理解し、状況に応じて適切な方法を選んでください。