JavaScript Nullish 合体演算子

概要: このチュートリアルでは、2 つの値を受け取り、最初の値が null または undefined の場合に 2 番目の値を返す JavaScript Nullish 合体演算子 (??) について学習します。

JavaScript Nullish 合体演算子の紹介

ES2020 では、二重の疑問符 (??) で示される Nullish 合体演算子が導入されました。Nullish 合体演算子は、2 つの値を受け取る論理演算子です。

value1 ?? value2

Nullish 合体演算子は、最初の値 (value1) が null または undefined の場合に、2 番目の値 (value2) を返します。技術的には、Nullish 合体演算子は次のブロックと同等です。

const result = value1;
if(result === null || result === undefined) {
   result = value2;
}Code language: JavaScript (javascript)

Nullish 値とは、null または undefined のいずれかの値です。

次の例では、Nullish 合体演算子 (??) を使用して、最初の値が null であるため、文字列 'John' を返しています。

const name = null ?? 'John';
console.log(name); // 'John'Code language: JavaScript (javascript)

そして、この例では、最初の値が undefined であるため、28 を返します。

const age = undefined ?? 28;
console.log(age);Code language: JavaScript (javascript)

変数にデフォルト値を割り当てる場合、多くの場合、論理 OR 演算子 (||) を使用します。例えば

let count;
let result = count || 1 ;
console.log(result); // 1Code language: JavaScript (javascript)

この例では、count 変数は undefined であり、false に強制変換されます。したがって、result は 1 になります。

しかし、論理 OR 演算子 (||) は、0 や空文字列 '' を有効な値とみなす場合、次の例のように分かりにくいことがあります。

let count = 0;
let result = count || 1;Code language: JavaScript (javascript)

結果は 1 になり、0 ではありません。これは予期しない結果かもしれません。

Nullish 合体演算子を使用すると、この落とし穴を回避できます。最初の値が null または undefined の場合にのみ、2 番目の値を返します。

論理 OR と AND 演算子と同様に、Nullish 合体演算子は、最初のオペランドが undefined でも null でもない場合、2 番目の値を評価しません。

例えば

let result = 1 ?? console.log('Hi');Code language: JavaScript (javascript)

この例では、最初の値は 1 であり、null でも undefined でもないので、?? 演算子は "Hi" をコンソールに表示する 2 番目の式を評価しません。

次の例では、最初の値が undefined であるため、2 番目の式が評価されます。

let result = undefined ?? console.log('Hi');Code language: JavaScript (javascript)

出力

'Hi'Code language: JavaScript (javascript)

次の例のように、論理 AND 演算子または OR 演算子を Nullish 合体演算子と直接組み合わせると、SyntaxError が発生します。

const result = null || undefined ?? 'OK'; // SyntaxErrorCode language: JavaScript (javascript)

しかし、?? 演算子の左側の式を括弧で囲んで演算子の優先順位を明示的に指定することで、このエラーを回避できます。

const result = (null || undefined) ?? 'OK'; 
console.log(result); // 'OK'Code language: JavaScript (javascript)

Nullish 合体演算子 (??) は、2 つの値を受け取り、最初の値が null または undefined の場合に 2 番目の値を返す論理演算子です。
Nullish 合体演算子は短絡評価され、論理 AND 演算子または OR 演算子と直接組み合わせることはできません。

このチュートリアルは役に立ちましたか？