JavaScript の Errors: Cant use nullish coalescing unparenthesized の詳細解説

JavaScriptのErrors: Cant use nullish coalescing unparenthesizedについて

しかし、この演算子を使用する際に、**"Cant use nullish coalescing unparenthesized"**というエラーが発生する場合があります。これは、nullish coalescing演算子の優先順位が他の演算子よりも低いことが原因です。

例：

const x = null;
const y = 10;

const result = x ?? y; // エラーが発生

console.log(result); // undefined

このコードでは、xはnullなので、nullish coalescing演算子によってyが返されるはずです。しかし、実際にはエラーが発生します。

これは、nullish coalescing演算子の優先順位が比較演算子よりも低いからです。そのため、上記のコードは以下のように解釈されます。

const result = (x ?? y) === undefined;

つまり、x ?? yがundefinedかどうかを比較しています。しかし、xはnullなので、x ?? yは常にnullになります。そのため、上記のコードは常にfalseとなり、エラーが発生します。

解決策：

このエラーを解決するには、nullish coalescing演算子を括弧で囲みます。

const result = (x ?? y);

console.log(result); // 10

括弧で囲むことで、nullish coalescing演算子の優先順位が上がり、比較演算子よりも優先的に実行されます。

その他の解決策：

nullish coalescing演算子の代わりに、三項演算子を使用することもできます。

const result = x === null || x === undefined ? y : x;

console.log(result); // 10

三項演算子は、nullish coalescing演算子よりも優先順位が高いため、括弧で囲む必要はありません。

• nullish coalescing演算子の優先順位は、比較演算子よりも低い。
• nullish coalescing演算子を括弧で囲むことで、優先順位を上げることができる。
• nullish coalescing演算子の代わりに、三項演算子を使用することもできる。

JavaScriptのNullish Coalescing演算子（??）のサンプルコード

ここでは、nullish coalescing演算子の使い方をいくつかのサンプルコードで説明します。

変数の初期値設定

const name = null;

const displayName = name ?? "名無し";

console.log(displayName); // "名無し"

上記のコードでは、name変数はnullなので、nullish coalescing演算子によってdisplayName変数には"名無し"という値が設定されます。

オブジェクトのプロパティの値取得

const user = {
  name: null,
  age: 20,
};

const userName = user.name ?? "匿名";

console.log(userName); // "匿名"

上記のコードでは、userオブジェクトのnameプロパティはnullなので、nullish coalescing演算子によってuserName変数には"匿名"という値が設定されます。

関数の引数のデフォルト値設定

function greet(name) {
  const message = name ?? "こんにちは";

  console.log(message);
}

greet(); // "こんにちは"
greet("John"); // "こんにちは John"

上記のコードでは、greet関数のname引数は省略可能です。引数が省略された場合は、nullish coalescing演算子によってmessage変数には"こんにちは"という値が設定されます。

ネストされたnullish coalescing演算子

const user = {
  name: null,
  profile: {
    email: undefined,
  },
};

const email = user.name ?? user.profile.email ?? "no email";

console.log(email); // "no email"

上記のコードでは、userオブジェクトのnameプロパティとprofile.emailプロパティはどちらもnullまたはundefinedなので、nullish coalescing演算子によってemail変数には"no email"という値が設定されます。

nullish coalescing演算子と三項演算子の比較

const name = null;

const displayName1 = name ?? "名無し";
const displayName2 = name === null || name === undefined ? "名無し" : name;

console.log(displayName1); // "名無し"
console.log(displayName2); // "名無し"

上記のコードでは、nullish coalescing演算子と三項演算子を使用して、同じ結果を出力しています。

JavaScript の Nullish Coalescing 演算子 (??) の代替方法

論理 OR 演算子 (||)

Nullish Coalescing 演算子と同様に、論理 OR 演算子 (||) も左辺が falsy 値の場合に右辺の値を返します。ただし、Nullish Coalescing 演算子とは異なり、0 や "" などの falsy 値も右辺の値を返すことに注意が必要です。

const name = "";
const displayName = name || "名無し";

console.log(displayName); // "名無し"

上記のコードでは、name 変数は空文字列なので、論理 OR 演算子によって displayName 変数には "名無し" という値が設定されます。

三項演算子は、条件式に基づいて 2 つの値のうち 1 つの値を返す演算子です。Nullish Coalescing 演算子の代わりに三項演算子を使用することもできます。

const name = null;
const displayName = name === null || name === undefined ? "名無し" : name;

console.log(displayName); // "名無し"

上記のコードでは、三項演算子を使用して、name 変数が null または undefined の場合に "名無し" という値を、それ以外の場合は name 変数の値を displayName 変数に設定しています。

Optional Chaining は、プロパティやメソッドが存在しない場合でもエラーが発生せずにアクセスできる構文です。Nullish Coalescing 演算子と組み合わせて、ネストされたオブジェクトのプロパティの値を取得する際に役立ちます。

const user = {
  profile: {
    email: null,
  },
};

const email = user?.profile?.email ?? "no email";

console.log(email); // "no email"

上記のコードでは、Optional Chaining と Nullish Coalescing 演算子を使用して、user オブジェクトの profile プロパティと email プロパティが存在しない場合でも、エラーが発生せずに "no email" という値を取得しています。

Default 値の関数引数

関数の引数にデフォルト値を設定することもできます。

function greet(name = "名無し") {
  console.log(`こんにちは、${name} さん！`);
}

greet(); // "こんにちは、名無し さん！"
greet("John"); // "こんにちは、John さん！"

上記のコードでは、greet 関数の name 引数にはデフォルト値として "名無し" が設定されています。引数が省略された場合は、デフォルト値が使用されます。

.reduce() メソッドを使用して、配列の要素を累積的に処理し、最終的な値を取得することもできます。

const emails = [null, "", undefined, "[email protected]"];

const email = emails.reduce((acc, email) => email ?? acc, "no email");

console.log(email); // "[email protected]"

上記のコードでは、.reduce() メソッドを使用して、emails 配列の要素をループ処理し、最初の null または undefined ではない要素を email 変数に設定しています。

どの方法を使うべきかは、状況によって異なります。以下のような点を考慮する必要があります。

• コードの簡潔性
• 読みやすさ
• 互換性

Nullish Coalescing 演算子は簡潔なコードを書くことができますが、ブラウザによってはまだ対応していない場合があります。論理 OR 演算子や三項演算子は汎用性がありますが、Nullish Coalescing 演算子よりも冗長なコードになります。Optional Chaining はネストされたオブジェクトのプロパティの値を取得する際に役立ちますが、古いブラウザでは対応していない場合があります。