JavaScriptで開発を行っていると、「変数が定義されているか確認したい」「配列が空かどうか調べたい」「オブジェクトに特定のキーがあるか知りたい」といった存在チェックを行う場面が頻繁にあります。
undefined や null といった「値がない」状態が複数存在し、さらに配列やオブジェクトの判定方法はそれぞれ異なるため、「どの方法を使えばいいのかわからない」と迷ってしまうことも少なくありません。この記事では、JavaScriptにおけるあらゆる存在チェックの方法を、基本の変数から配列、オブジェクト、関数まで、現在のモダンな記述方法(オプショナルチェーンなど)を含めて徹底解説します。
![]() 執筆者:マヒロ |
|
- OS:Windows 11 / macOS Sequoia
- IDE:Visual Studio / VS Code / IntelliJ IDEA
- その他:Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
変数の存在チェック(undefined / null の判定)
まずは最も基本的な、変数が「定義されているか」「値が入っているか」を確認する方法です。
基本的な判定方法(if文)
JavaScriptでは、undefined、null、0、""(空文字)、false はすべて falsy(偽として扱われる値) となります。
そのため、単に「値があるかどうか」を知りたいだけであれば、if文にそのまま変数を渡すのが最も簡単です。
let value = "Hello";
if (value) {
console.log("値が存在します");
} else {
console.log("値が存在しません(undefined, null, 0, 空文字など)");
}
if (value) と書くだけで、変数が undefined や null の場合は false と判定され、else ブロックが実行されます。
ただし、数値の 0 や空文字 "" も「存在しない」とみなされる点に注意が必要です。
「0」を有効な値として扱いたい場合は、次の厳密な判定を使います。
厳密な判定(null と undefined を区別する)
「0」や「空文字」は有効な値として扱い、null や undefined だけを弾きたい場合は、比較演算子を使います。
let value = 0;
// null または undefined でないことを確認
if (value != null) {
console.log("値は有効です(0や空文字も含む)");
}
value != null(緩やかな比較)を使うと、null と undefined の両方を一度に弾くことができます。
これはJavaScriptの仕様を利用した便利なテクニックです。
より厳密に undefined だけを判定したい場合は typeof value === "undefined" を使います。
モダンな書き方:Null合体演算子 (??)
変数が null または undefined の場合にデフォルト値を使いたいなら、Null合体演算子 ?? が便利です。
let input;
// input が null/undefined なら "デフォルト" を代入
let result = input ?? "デフォルト";
console.log(result); // "デフォルト"
配列(Array)の存在チェック
配列の場合は、「配列そのものが存在するか」と「配列の中身が空でないか」の2つのチェックが必要です。
配列が空でないか確認する (.length)
配列が存在している(undefined 等ではない)前提であれば、.length プロパティを使って要素数を確認します。
const list = [1, 2, 3];
// 配列が存在し、かつ要素数が1以上か
if (list && list.length > 0) {
console.log("配列には要素が入っています");
} else {
console.log("配列は空か、存在しません");
}
list.length は要素数を返します。
これが 0 より大きければ、配列は空ではありません。
もし list 自体が null の可能性がある場合は、先に list && で存在確認をするか、オプショナルチェーン list?.length を使うと安全です。
特定の値が含まれているか確認する (.includes)
配列の中に特定の値があるかを確認するには、includes() メソッドを使います。
const fruits = ["apple", "banana", "orange"];
if (fruits.includes("banana")) {
console.log("バナナが含まれています");
}
オブジェクト(Object)のキー・プロパティ存在チェック
オブジェクト(連想配列)の中に、特定のキーやプロパティが存在するかを確認する方法です。
in 演算子を使う(推奨)
プロパティの存在を確認する最も確実な方法は in 演算子です。
const user = { name: "Tanaka", age: 25 };
if ("age" in user) {
console.log("ageプロパティは存在します");
}
if ("email" in user) {
console.log("emailプロパティは存在します");
} else {
console.log("emailプロパティはありません");
}
"キー名" in オブジェクト という構文で、そのキーが存在すれば true を返します。
値が undefined であっても、キーさえあれば「存在する」と判定されます。
オプショナルチェーン (?.) で安全にアクセス
ネスト(入れ子)されたオブジェクトの深い階層にあるプロパティを確認する場合、途中のプロパティが存在しないとエラーになってしまいます。
これを防ぐために、オプショナルチェーン ?. を使います。
const user = {
profile: {
name: "Suzuki"
}
};
// profileが存在しなくてもエラーにならず、undefinedが返る
if (user.profile?.name) {
console.log("名前は " + user.profile.name + " です");
}
user.profile?.name と書くことで、もし user.profile が null や undefined だった場合、そこで処理を止めて undefined を返してくれます。
「存在すれば取得する」という処理が非常にシンプルに書けるため、現代のJavaScript開発では必須のテクニックです。
関数の存在チェック
コールバック関数などで「渡された変数が関数かどうか」を確認してから実行したい場合があります。
typeof 演算子を使う
変数の型を調べる typeof 演算子を使います。
function executeCallback(callback) {
// 関数かどうか判定
if (typeof callback === "function") {
callback(); // 安全に実行
} else {
console.log("関数ではありません");
}
}
executeCallback(() => console.log("実行されました!"));
typeof 変数 === "function" とすることで、その変数が関数オブジェクトであるかを判定できます。
ライブラリの作成や、オプション引数として関数を受け取る際によく使用されます。
JavaScriptのスキルを活かして年収を上げる方法
以上、JavaScriptでの存在チェックについて詳しく解説してきました。
| 年収アップにこだわりたい方 (平均アップ額138万円の実績) | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |



