JavaScript の Nullish Coalescing 演算子を理解する (??)

Nullish Coalescing Operator (??) は、ECMAScript 2020 で導入された JavaScript の機能です。この演算子を使用すると、Null または未定義の可能性がある変数のデフォルト値を処理できます。

導入前は、論理 OR 演算子 (||) がこの目的によく使用されていましたが、すべての偽の値を処理するため、常に適切であるとは限りませんでした。 ??演算子は、より正確かつ明確な代替案を提供します。

この記事では、Nullish Coalescing Operator の概念、その利点、使用方法、およびいくつかの例について学びます。

早速始めましょう!?

Nullish Coalescing Operator (??) とは何ですか?

ヌル合体 (??) 演算子は論理演算子であり、値がヌルか未定義かをチェックするために使用されます。

左側のオペランドが null または未定義の場合、右側のオペランド (フォールバック値) を返します。

左側のオペランドが null または未定義でない場合は、左側のオペランドを返します。

例:

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

この例では、userInput が null であるため、??演算子はフォールバック値「default」を返します。

さて、論理 OR || とどう違うのかと考えているかもしれません。オペレーター??

これは論理 OR とは異なります || || 演算子なので、演算子は、左側のオペランドが null や未定義だけでなく、偽の値 (false、0、''、NaN など) の場合に右側のオペランドを返します。その間、??演算子は、null または未定義のみに焦点を当てます。

論理 OR (||) 演算子の代わりに Nullish Coalescing (??) 演算子を使用するのはなぜですか?

?? || 演算子は null と未定義の値のみに焦点を当てます。演算子は、予期しない結果につながる可能性があるすべての偽の値 (false、0、''、NaN など) をチェックします。

例:

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

この例では、オブジェクト内で年齢が定義されていないため、??演算子はフォールバック値「デフォルト値」を返します。

ここで、これをよりよく理解するために別の例を見てみましょう。

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

この例では、userInput は空の文字列であり、これは偽の値であり、null や未定義ではないため、??演算子は <空の文字列>を返します。

それでは || を使用すると何が起こるか見てみましょう??の代わりに。

let userInput = '';
let inputValue = userInput || 'default';
console.log(inputValue); // Output: default

ここでは ||演算子は偽の値をチェックするため、デフォルトを返します。

使用するもう 1 つの理由 ?? || の代わりに演算子は読みやすさです。

?? を使用したコードその目的は null と未定義の処理に直接リンクしているため、一般に、より明確で読みやすくなります。変数が null または未定義の場合にフォールバック値を提供するため、コードが読みやすくなり、エラーが発生しにくくなります。

ヌル演算子 ??論理演算子 AND/OR を使用

?? も使用できます。演算子を他の論理演算子と組み合わせて複数の条件をチェックします。

例:

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

この例では、左側のオペランド (userInput) が null であるため、inputValue は値「default」を取得します。

次に、userInput が null でない場合に何が起こるかを見てみましょう。

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

おっと!!これはエラーをスローします??

でも、なぜこんなことが起こるのでしょうか??

これは、Nullish Coalescing Operator (??) を || のような論理演算子内で直接使用できないために発生します。 OR と && AND を適切な括弧で囲んでいない。

その理由は、JavaScript には演算子の優先順位に関する特定のルールがあるためです。演算子の優先順位とは、さまざまな演算子の優先順位レベルを指し、演算が評価される順序を意味します。

例: ?? || よりも優先順位が低くなります。と && を括弧内に置くと、論理式内で最初に評価されるようになります。

では、正しい使い方は??論理演算子を直接使用:

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

ここで、かっこは JavaScript に ?? を強制的に評価させます。最初に演算を実行し、その後、その結果が 'alternative' との論理 OR 演算で使用されます。

結論

JavaScript では、Nullish Coalescing Operator (??) により、null と unknown のデフォルト値を処理する、より明確で一貫した方法が提供されます。 || の落とし穴を回避します。意図しない偽の値を返さないようにすることで、演算子を保護します。 Nullish Coalescing Operator (??) を使用すると、特にオプションの値に関して、コードがクリーンで読みやすくなり、エラーが発生しにくくなります。 Nullish Coalescing Operator (??) を理解して使用すると、コードをより効率的で保守しやすくすることができます。

今日はここまでです。

お役に立てば幸いです。

読んでいただきありがとうございます。

ここでは、開発者向けの JavaScript に関する 45 のヒントとテクニックを紹介します。

このようなコンテンツをさらにご覧になりたい場合は、ここをクリックしてください。

X(Twitter) で私をフォローして、毎日の Web 開発のヒントを入手してください。

コーディングを続けてください!!

toast.log を確認してください。これは、ブラウザのコンソールを開かなくても、サイトで発生したエラー、警告、ログを確認できるブラウザ拡張機能です - 。ここをクリックすると、toast.log が 25% 割引になります。

以上がJavaScript の Nullish Coalescing 演算子を理解する (??)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。