溝畑です。
本当に軽いネタをこれから数記事書いていきます。
前回、Proxyオブジェクトについて書いた際、
使用例として「特定のデータのときの出力を統一したい」のようなケースを書きました。
が、似たようなケースを解消できそうなものが、ES2020で追加されていました。
ということで、「Nullish coalescing」の紹介。
Nullish coalescing
Nullish coalescing説明を引用すると、
> Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。
ということです。
リンク先の例で、使用方法を見ていきましょう。
|
1 2 3 4 5 6 7 |
// (1) const foo = null ?? 'default string' console.log(foo) // default string // (2) const baz = 0 ?? 42 console.log(baz) // 0 |
演算子は「??」です。
(1)は左辺が「null」なので、右のdefault stringとなります。
(2)は「0」はnull or undefinedではないので、そのまま0となります。
三項演算子とは違って、nullかundefinedという点は注意ですね。
使い所
前回Proxyでやったケースは「特定の文字なら一律で表示を変えたい」といったものでした。単純にデータ中にnullが含まれる可能性があり、表示を変えたい場合なら、
今回のNullish coalescingで事足りそうです。
|
1 2 |
// nullは空文字にする const rows = data.map(v => `<li>${v.temp ?? ''}</li>`) |
センサーから取得する値など、欠損値がnullになるようなケースは十分に考えられると思います。
単純な使用例を紹介しましたが、同じくES2020で追加された「Optional chaining」なんかとも組み合わせが効きます。
Optional chaining
ES2020と新しい構文ではありますが、使えるところは使っていきましょう。
