JavaScriptのNull合体演算子(”??”)の使い方！

JavaScriptのNull合体演算子の使い方について書いています。
その後に実際に8パターンのコードで動作を検証した結果を書きました。

Null合体演算子の使い方は？

JavaScriptのNull合体演算子は、nullか判断して、nullだった場合は??の右側の値を返します。
例えば、下記のように使うことができます。

let fruits = 'banana'
let result = fruits ?? 'nullでした'
console.log(result)

最初にfruits変数に’banana’の文字列を格納しています。

次の行で、Null合体演算子を使っています。(??の箇所です）
これでfruits変数に値がある場合には、そのまま値が返って、ない場合は右側の「nullでした」という文字列になります。

result変数で返ってきた値を受け取って出力します。
結果、fruits変数はnullではないので「banana」が出力されます。

いろいろな値で、挙動がどうなるか検証してみました。

nullが入力された場合は、もちろん右側の値が返ります。
下記の出力結果は「nullでした」です。

let fruits = null
console.log(fruits ?? 'nullでした') // nullでした

undefinedが入力された場合です。
下記の出力結果は「nullでした」です。

let fruits = undefined
console.log(fruits ?? 'nullでした') // nullでした

値が未定義の変数の場合です。
appleはundefinedになります。
そのため、こちらも出力結果は「nullでした」です。

let apple;
console.log(apple ?? 'nullでした') // nullでした

文字列を入れた場合です。
下記の出力結果は「orange」になります。

let fruits = 'orange'
console.log(fruits ?? 'nullでした') // orange

空文字(”)を入れた場合です。
下記の出力結果は「”」になります。

let fruits = ''
console.log(fruits ?? 'nullでした')

0を入れた場合です。
下記の出力結果は「0」になります。

let number = 0
console.log(number ?? 'nullでした') // 0

falseを入れた場合です。
下記の出力結果は「false」になります。

let number = false
console.log(number ?? 'nullでした') // false

空配列を入れた場合です。
下記の出力結果は「[]」になります。

let emptyArray = []
console.log(emptyArray ?? 'nullでした') // []

値があると判定されて、空配列が返ってきます。

コードで確認した内容をまとめると、下記のようになりました。

nullとundefined(未定義変数含む)の場合に、null判定されて右側の値が返ってくることがわかりました。