メモログ

Optional chaining and Nullish coalescing

ES2020 で新しく追加された機能(ECMAScript 2016+ compatibility tableの画面の下の方にある)はどれもわりと実用的で、なくても大丈夫なんだけどあると便利といったものが並んでいる。Bigint は日常的には使わないとは思うけど。

その中で、Nullish coalescingOptional chaining はかなり便利。なくても大丈夫だし、使わなくても良いんだけど、便利だから日常的に書かれる JavaScript の書き方を変えるものになると思う。

まず、Nullish とは何かというと、値が null か undefined になるものを言う。Falsyの場合、数値の 0 とか NaN、空文字列などが含まれるけど、Nullish は値が存在しない場合(null と undefined)だけを扱う。

論理演算子の&&||論理演算子)は、Falsy な値ははすべて False として扱うので、

const foo = 0;
const bar = foo || 100;

としたとき、0 のような Falsy な値をbarに渡したい場合でも、||の右側の値が使われてしまう。こういったときに従来なら

const foo = 0;
const bar = typeof foo === "undefined" || foo === null ? 100 : foo;

みたいな感じにしないといけなかった。(Strict モードなら undefined が別の値になることはないので、foo === undefinedと書いても大丈夫)。

Nullish coalescing なら undefined か null の場合だけ扱うようになるので、以下のように簡単に書く事ができる。

const foo = 0;
const bar = foo ?? 100;

これは便利。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。