【JavaScript】ES6における変数の null チェック

JavaScript

2023.07.202023.12.11

この記事は約3分で読めます。

記事内に広告が含まれています。

JavaScript に限らず、どの言語でも null チェックは必ずと言って良いほど付きまとう必須の処理です。

本記事では、JavaScript での null チェックについての紹介です。

シンプルな書き方含め、いくつか紹介します。

null とは？のような初心者向けの情報は流石に割愛するのでその上でお読みください。

シンプルな if 分岐による null チェック

JavaScriptでは、最も直接的なnullチェックはifステートメントを使用することです。

これが「きほんのき」ですし、使用場面は多いでしょう。

let value = null;

if (value === null) {
  console.log("valueはnullです");
} else {
  console.log("valueはnullではありません");
}

この方法は直感的でわかりやすいですが、コードが長くなる傾向があります。

例えば、null ではなく undefined の場合でもロジックに不都合が生じることは多々あるので、併せて確認すると冗長になりがちです。

if (value === null || value === undefined) {
  // 処理
}

この、「null または undefined」であれば、シンプルに書くこともできます。

if (value) {
  // 処理
}

三項演算子を使って、もっと短く null （または undefined）かどうかをチェックすることもできます。

let value = null;
let message = value ? "valueはnullではありません" : "valueはnullです";
console.log(message); // "valueはnullです"

この方法は変数が null または undefined の場合に特定の値を返すような短いコードを書くのに便利です。

ロジカルOR演算子 (||) を使って null または undefined の変数にデフォルト値を設定することができます。

let value = null;
let defaultValue = "デフォルトの値";
let result = value || defaultValue;
console.log(result); // "デフォルトの値"

この方法は変数が null または undefined の場合にデフォルト値を提供するのに便利です。

ES2020から導入されたNull合体演算子 (??) を使うと、変数が null または undefined の場合に限り、デフォルト値を提供することができます。

これはロジカルOR演算子 (||) とは異なり、空文字列や 0 といった"偽"の値を保持します。

let value = 0;
let defaultValue = "デフォルトの値";
let result = value ?? defaultValue;
console.log(result); // 0

Null合体演算子 (??) は、変数が null または undefined の場合のみにデフォルト値を提供する場合に有用です。

当たり前のことを当たり前にコード上に書くのは難しいですね。