MENU

JavaScriptの演算子??の理解と使用例

JavaScriptのググラビリティ最低ワード??についての記事。この点の演算子周りはわからない時にGoogleが無力の極みで困りがち。

以下、||とかにも触れつつChatGPT-4にまとめさせた。

目次

イントロ

JavaScriptのNullish Coalescing Operator (??) は、値がnullまたはundefinedであるかどうかをチェックする際に非常に便利な演算子です。この記事では、?? 演算子の使い方、|| 演算子との違い、および他の代替方法との比較について解説します。

?? 演算子の基本

JavaScriptの ?? 演算子はNullish Coalescing Operator(ヌリッシュ・コアレシング演算子)と呼ばれます。この演算子は、左側のオペランドがnullまたはundefinedの場合に、右側のオペランドを返します。左側のオペランドがnullやundefined以外であれば、左側の値がそのまま返されます。

以下は ?? 演算子の使用例です。

const x = null;
const y = "default value";
const z = x ?? y; // z は "default value"

もし x がnullかundefinedでなければ、z の値は x と同じになります。

この演算子は、変数にデフォルト値を設定する際などに便利で、特にオブジェクトのプロパティにデフォルト値を設定する場合によく使用されます。

|| 演算子との違い

?? 演算子と似ている || 演算子との違いは重要です。 ?? (Nullish Coalescing Operator)と || (論理OR演算子)との主な違いは、どのように「偽」と評価されるかにあります。

  • ?? 演算子は、左側のオペランドがnullかundefinedの場合にのみ右側のオペランドを返します。
  • || 演算子は、左側のオペランドがfalsy(偽と評価される値)である場合に右側のオペランドを返します。falsyな値には、null、undefined、0、空文字列("")、NaNなどが含まれます。

この違いにより、0や空文字列などの値が意図された値として使用されるべき場合でも、|| 演算子を使うとデフォルト値に置き換えられてしまうことがあります。一方、?? 演算子はnullかundefinedの場合のみデフォルト値に置き換えるので、この問題が回避されます。

以下は例です。

const value1 = 0;
const result1 = value1 || "default"; // result1は "default"

const value2 = 0;
const result2 = value2 ?? "default"; // result2は 0

この例では、value1 が0であるため、|| 演算子は "default" を返します。一方、?? 演算子は0がnullやundefinedではないため、0を返します。このように、?? 演算子はnullやundefinedの場合のみデフォルト値に置き換える動作をします。

他の代替方法

JavaScriptでnullまたはundefinedの値をチェックして、デフォルト値に置き換えるために使用できる他の方法もいくつかあります。以下はその一部です。

三項演算子

三項演算子を使って値がnullまたはundefinedかどうかをチェックすることができます。

const value = null;
const result = value === null || value === undefined ? "default" : value;

if文を使った方法

もう少し冗長な方法として、if文を使って同じことを実現することもできます。

let value = null;
if (value === null || value === undefined) {
  value = "default";
}

関数を使った方法

このロジックを頻繁に使用する場合、関数にまとめることもできます。

function defaultValue(value, defaultVal) {
  return value === null || value === undefined ? defaultVal : value;
}

const result = defaultValue(null, "default");

結論

?? 演算子は、値がnullまたはundefinedかどうかを素早く評価するための効率的な方法です。特に、0や空文字列など、他のfalsyな値を有効な値として扱いたい場合に威力を発揮します。三項演算子、if文、関数などの他の方法と比較して、コードの簡潔さと明確さが優れています。多くの場合、この演算子はコードの可読性と効率性を高める優れた選択肢となるでしょう。

寸評

記事にしたものの、前述のとおりググらビリティは最悪なので、検索からはたどり着けなさそう。JavaScript系の記事を一覧にしてまとめたほうが良いかしら。せめてページ検索じゃないと機能しなさそう。

目次