JavaScriptの a ?? b とか condition ? a : b とか

はじめに

JavaScriptを書いていると、
a ?? b
だとか、
a ? b : c;
のようなコードをよく書くじゃないですか
この2つ、似ているようで若干違うんですよね。しかもミスると割と危ないです！！
ということで、この2つについての説明と、注意ポイントを書きたいと思います。

Null合体演算子

a ?? b

こんな感じのやつが、Null合体演算子です。

この演算子は、
aがnull or undefinedであれば、右辺(b)を返す。そうでなければ、aを返す。
という処理になってます。

注意点

null or undefined以外のfalsyな値は、左辺を返すので注意！
例えば、0や空文字列は、左辺になります。
0とか空文字列も、右辺を返しそうな雰囲気ありません？違うんですよね。
ここが割と注意点です。

関数と使う時

ちなみに関数をa / bに入れるとこんな感じの処理になります。

function A() {
  console.log("Aの処理が通る");
  return undefined;
}
function B() {
  console.log("Bの処理が通る");
  return "foo";
}

console.log(A() ?? B());
// "Aの処理が通る"、 "Bの処理が通る" のあと "foo" と出力
// A() は undefined を返すため、Bの処理自体は通ってしまう。

return文とかに使えそう

返したい変数の値が、nullかundefinedの場合のみ特定の値を返したい時などにも使えそうですね。

三項演算子

condition ? Iftrue : IfFalse;

これが、三項演算子です。
この演算子は、左辺の条件がtrueのときIfTrueを、falseのときIfFalseを実行します。

Null合体演算子との違い

conditionが、null or undefinedだけでなく、falsyの時にIfFalseになります。
falsyとは null, NaN, 0, 空文字列 (""), undefined のことを指します。

変わった例

一応三項演算子の連鎖もできます。

function example() {
	return condition1 ? value1
	: condition2 ? value2
	: condition3 ? value3
	: value4;
}

上記は、以下と同じ意味になります。

function example(…) {
	if (condition1) { return value1; }
	else if (condition2) { return value2; }
	else if (condition3) { return value3; }
	else { return value4; }
}

あまり使われませんし、返って見づらいかもなんで使うことはないかな〜と思います。(というか、なるべくelse if使いたくない。。)

注意点

三項演算子の場合、falsyの場合、falseの判定になりますが、
null合体演算子の場合、null or undefinedの場合のみ、falseの判定になります。

ここの違いがわからないと、大きなミスにつながるので、気をつけましょう。

例えば、以下の違いになりますね。

null合体演算子の場合

const zero = 0;
const foo = zero ?? null;
console.log(foo);
// 0
// fooは、nullではなく、0になる

三項演算子の場合

const zero = 0;
const foo = zero ? zero : null;
console.log(foo);
// null

最後に

Nuxt3 / TypeScriptでWebアプリケーション開発をして半年が経ち、
漠然と課題感を感じていまして、何かできることはないかな〜と思っていたところ、
「初心に立ち返って、JSの基礎をやったら何か変わるかもしれない。」と思い、mdnでよく使う演算子などを改めて読むことにしました。

今回のように、調べてみたら意外と思っていたのと違うものがありそうなので、勉強になりますね。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator