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

JavaScript

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

PR

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

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

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

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

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

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

PR

Null合体演算子を使った8パターン検証

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

Nullの入力

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

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

Undefinedの入力

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を入れた場合です。
下記の出力結果は「0」になります。

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

falseの入力

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

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

空配列の入力

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

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

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

Null合体演算子の挙動まとめ

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

入力値Null判定
nulltrue
undefinedtrue
apple(未定義)true
‘orange’false
false
0false
falsefalse
false

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

コメント

Ads Blocker Image Powered by Code Help Pro

広告ブロッカーが検出されました。

ブラウザの拡張機能を使用して広告ブロックをしていることが確認できました。 ブラウザの広告ブロッカー機能を無効にしていただくか、codelikes.comをホワイトリストに追加し、更新をクリックしてください。 お手数ですが、よろしくお願いします🙇‍♂️
タイトルとURLをコピーしました