普通の人のための Nullish Coalescing (JS) チュートリアル

ちょっと、そこ！ JavaScript コードで null または未定義の値を処理しようとしてイライラしたことはありませんか? Nullish Coalescing は、それを非常に簡単にする新機能です。この記事では、ヌリッシュ合体について説明します。

つまり、簡単な用語、楽しい例、そして複雑な専門用語はありません。最後には、すぐにきれいで簡潔な JS コードを作成できるようになります。

では、ヌリッシュ合体とは一体何でしょうか?基本的に、これは、何かが null または未定義の場合にデフォルト値を提供する短くて簡単な方法です。乱雑にネストされた三項または論理 OR ステートメントを使用する代わりに、二重疑問符演算子 (??) を使用してデフォルトに結合できます。

わかりにくいと思いませんか？心配しないでください。わかりやすい例をいくつか示して、その仕組みを説明します。バックルを締めて、楽しいドライブになるでしょう！

Nullish Coalescing Operator とは一体何ですか??

JavaScript での null 値の処理に行き詰まったことがありますか?知っています。さて、友よ、ヌリッシュ合体演算子 (??) を紹介しましょう。この小さな男はあなたの人生をとても楽にしてくれるでしょう。

では、nullish 合体演算子とは正確には何でしょうか?基本的に、これは、何かが null または未定義の可能性がある場合にデフォルト値を提供するためのショートカットです。書く代わりに:

 let name = obj.name || 'default name';

これで、次のように簡単に書くことができます。

 let name = obj.name ?? 'default name';

??演算子は、null でない (null または未定義を意味する) 場合は左側を返し、それ以外の場合は右側を返します。したがって、上記の例では、 obj.nameが null または未定義でない場合、 name はobj.nameに設定されます。ただし、 obj.nameが null または未定義の場合、name は「デフォルト名」になります。

かなり便利ですよね？他の例:

 let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25 let email = user.email ?? 'no email provided'; let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array

これが JavaScript の条件ロジックの一部を簡素化するのに役立つことを願っています。

誰もが共感できる現実世界の例

何かの代金を支払いに行ったものの、数ドル足りないことに気づいたという経験はありませんか?私たちは皆、そこに行ったことがある。無意味な合体は、実際に買いたいものを買う余裕があるように、ポケットに数ドルの余分なお金を見つけるようなものです。

いつもの朝のコーヒーを飲みにお気に入りのコーヒーショップに向かうとします。あなたは 3 ドルを手にカウンターに行き、注文する準備ができています。しかし、バリスタが合計金額を告げると、税引き後は 3.50 ドルになります。

ヌルい合体は、ポケットにもう 1 ドルがあることを突然思い出して、まだコーヒーを飲めるようなものです。ふう！

JavaScript では、 null 合体は、何かが null または未定義に解決された場合にデフォルト値を提供する方法です。たとえば、値を返す場合と返さない場合がある関数があるとします。

 function getCoffeePrice() { // Returns $3.50 or undefined } let price = getCoffeePrice() ?? '$3.50';

ここで、 getCoffeePrice()未定義を返した場合、 ??のおかげで、 priceデフォルトで'$3.50'になります。 null 合体演算子。したがって、どちらの方法でもコーヒーの価格が保証されます。

Nullish Coalescing を使用すると、変数が null または未定義の場合にフォールバックのデフォルト値が提供されるため、コードの回復力が高まります。コーヒーショップでポケットの中に余分なお金があるのを見つけるのと同じように、取引を完了するために必要なものが確実に揃っていることがわかります。かなり便利ですよね？

これで、プロのようにヌル合体を理解できたので、安心してください。コーディングを楽しんで、コーヒーをお楽しみください。

JavaScript でのヌル結合の使用

NULL 合体演算子 (??) は、NULL でない場合は左オペランドを返します。それ以外の場合は、右側のオペランドを返します。

混乱している？それを詳しく見てみましょう。 「nullish」値は、null または未定義のいずれかです。それで??演算子は、左側の値が NULL であるかどうかをチェックし、NULL である場合は、代わりに右側の値を返します。

例えば：

 const name = bob ?? 'anonymous';

bob が定義されている場合、これにより name の値が 'bob' に割り当てられます。 bob が未定義または null の場合、代わりに文字列「anonymous」が割り当てられます。

これが役立つ理由

??なしでオペレーターの場合は、次のようにする必要があります。

 const name = bob !== null && bob !== undefined ? bob : 'anonymous';

??演算子は、本質的に同じことを行うための、より短くクリーンな構文を提供します。

これは、変数、 関数の引数、オブジェクトのプロパティなど、JavaScript のどこでも使用できます。デフォルト値の (または) 演算子、?? を使用できるようになりました。 「ヌル」デフォルト値の場合。

いくつかの例:

 const foo = null ?? 'default string'; // foo is 'default string' const bar = 0 ?? 42; // bar is 0 const qux = 0 || 42; // qux is 42 - || returns first truthy value function doSomething(x = 0) { x = x ?? 10; // If x is nullish, set default of 10 console.log(x); } doSomething(null); // Prints 10 doSomething(5); // Prints 5

これがヌル合体演算子の説明に役立つことを願っています。

ヌル合体が OR よりも優れている理由 (||)

OR (||) 演算子は最初の真の値を返します。

OR (||) 演算子は、最初に見つかった真の値を返すことによって機能します。両方の値が false の場合は、最後の値が返されます。例えば：

 let name = null; let user = name || 'John'; // user is 'John'

ここでは、 nameが null (偽) であるため、 user 2 番目の値「John」を取得します。

Nullish Coalescing Operator (??) はより賢いです。

Nullish Coalescing Operator (??) は ES2020 で導入され、OR (||) よりも少し賢くなっています。最初に定義された値 (null/未定義ではない) を返します。したがって、最初の値が空の文字列、0、または false の場合は、その値が返されます。例えば：

 let name = ''; let user = name ?? 'John'; // user is ''

ここで、 nameは空の文字列であるため、 user name (最初に定義された値) を取得します。

Nullish Coalescing Operator を使用すると、よりクリーンな方法でデフォルト値を提供できます。 0、空の文字列、false などの誤った値を気にせずに、null/未定義の値のデフォルト値を設定できます。

たとえば、ユーザーの年齢を返す関数があるとしますが、年齢が null になる場合があります。

 function getAge() { return age; // could be null } let userAge = getAge() || 30; // Uses OR, not ideal

ここで、 ageが 0、''、または false の場合、 userAge誤って 30 になります。

Nullish Coalescing Operator を使用すると、この問題が修正されます。

 let userAge = getAge() ?? 30; // Uses ??

今後は、 ageが null または未定義の場合、 userAge 30 のみになります。 0 などの他の偽の値が使用されます。

つまり、null/未定義のデフォルト値を提供するが、0、空の文字列、または false などの偽の値を提供しない場合は、OR (||) の代わりに Nullish Coalescing Operator (??) を使用します。

コードはよりクリーンになり、バグが発生しにくくなります。

ヌルリッシュ合体に関するよくある質問

さて、あなたは JavaScript のこの派手な新しい Nullish Coalescing 演算子 (??) について聞いたことがあるでしょう、そしていくつかの質問があります。心配しないでください、私がサポートします!

Nullish Coalescing はどのようなデータ型で機能しますか?

• Nullish Coalescing は、次のような JavaScript のあらゆるデータ型で機能します。
• 数字: 0 ?? 1 // 1を返します
• 文字列: '' ?? 'Hello' // 'Hello' を返します
• ブール値: false ?? true // trueを返します
• オブジェクト: {} ?? {name: 'John'} // {name: 'John'} を返します
• 配列: [] ?? [1, 2, 3] // [1, 2, 3] を返します
• もっと！

|| の違いは何ですか? （または ？？ (ヌリッシュ合体) 演算子?

|| (OR) 演算子は、左側のオペランドが false (false、0、空の文字列、null、未定義、NaN) の場合に右側のオペランドを返します。

?? (Nullish Coalescing) 演算子は、左側のオペランドが null または未定義の場合にのみ右側のオペランドを返します。

では、主な違いは次のとおりです?? || は 0 と空の文字列を有効な値と見なしますが、 ||ではない。

いつ使用すればよいですか?? || 終わった?

使う?? null または未定義のデフォルト値を指定したいが、0 と空の文字列を有効な値とみなしたい場合。

|| を使用します。 「偽」の値に対するフォールバックを提供したい場合。

これが、Nullish Coalescing オペレーターに関して抱いていた熱い疑問のいくつかを解決するのに役立つことを願っています。他にご質問がございましたらお知らせください。

結論

これで、nullish 合体とそれが JavaScript でどのように機能するかについてすべて理解できました。とてもシンプルですよね？この小さな演算子は、簡潔な方法でデフォルト値を提供することで時間を節約し、コードをクリーンにすることができます。

さあ、心ゆくまでヌルな価値観を合体させてください!最新の JavaScript 機能をマスターできるよう、順調に進んでいます。

コーディングを楽しんでください!