Nullish coalescingを使ってみる

2021.05.10.月
JavaScript

溝畑です。

本当に軽いネタをこれから数記事書いていきます。

前回、Proxyオブジェクトについて書いた際、
使用例として「特定のデータのときの出力を統一したい」のようなケースを書きました。

が、似たようなケースを解消できそうなものが、ES2020で追加されていました。
ということで、「Nullish coalescing」の紹介。

Nullish coalescing

Nullish coalescing

説明を引用すると、

> Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。

ということです。
リンク先の例で、使用方法を見ていきましょう。


演算子は「??」です。

(1)は左辺が「null」なので、右のdefault stringとなります。
(2)は「0」はnull or undefinedではないので、そのまま0となります。

三項演算子とは違って、nullかundefinedという点は注意ですね。

使い所

前回Proxyでやったケースは「特定の文字なら一律で表示を変えたい」といったものでした。

単純にデータ中にnullが含まれる可能性があり、表示を変えたい場合なら、
今回のNullish coalescingで事足りそうです。


センサーから取得する値など、欠損値がnullになるようなケースは十分に考えられると思います。

単純な使用例を紹介しましたが、同じくES2020で追加された「Optional chaining」なんかとも組み合わせが効きます。
Optional chaining

ES2020と新しい構文ではありますが、使えるところは使っていきましょう。

-->