導入

JavaScript は最も人気のあるプログラミング言語の 1 つであり、さまざまな論理演算を処理するためのさまざまな演算子を開発者に提供します。これらの中で、論理 OR (||) 演算子と Nullish Coalescing (??) 演算子は、デフォルト値を管理し、Nullish 値を処理するための基本的なツールです。この記事では、これら 2 つの演算子の違い、使用例、および使用法を説明する実際的で複雑な例について詳しく説明します。

論理和 (||) 演算子について

JavaScript の論理 OR (||) 演算子は、オペランドの中で最初の真実の値を返すか、真実でない値がない場合は最後の値を返すために広く使用されています。これは主にデフォルト値を設定するために使用されます。

構文

result = operand1 || operand2;

使い方

||演算子は左から右に評価し、真の場合は最初のオペランドを返します。それ以外の場合は、2 番目のオペランドを評価して返します。

例 1: デフォルト値の設定

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

この例では、userInput は空の文字列 (falsy) であるため、defaultText が返されます。

例 2: 複数の値の処理

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

ここでは、firstName が null (偽) なので、lastName がそのまま返されます。

論理和 (||) 演算子の制限事項

|| の主な制限事項演算子の特徴は、0、NaN、''、false、null、unknown などのいくつかの値を false として扱うことです。これらの値が有効であることを意図している場合、これにより予期しない結果が生じる可能性があります。

Nullish Coalescing (??) オペレーターの紹介

Nullish Coalescing (??) 演算子は、JavaScript に最近追加されたもので、ES2020 で導入されました。これは、考慮される唯一の null 値であることが明示的に意図されている null または未定義のケースを処理するように設計されています。

構文

result = operand1 ?? operand2;

使い方

??演算子は、左側のオペランドが null または未定義の場合に右側のオペランドを返します。それ以外の場合は、左側のオペランドを返します。

例 1: デフォルト値の設定

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

この例では、userInput は空の文字列であり、null または未定義ではないため、それが返されます。

例 2: NULL 値の処理

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

ここでは、firstName が null であるため、null でも未定義でもない lastName が返されます。

論理和演算子 (||) とヌル結合演算子 (??) の比較

例 1: 偽の値の比較

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

この例では、0 は || によって偽であると見なされます。演算子ですが、?? の有効な値です。オペレーター。

例 2: 両方の演算子を一緒に使用する

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

ここでは、userInput が null であるため、fallbackText が ?? によって使用されます。オペレーター。次に、結果は || によってチェックされます。演算子ですが、fallbackText が true であるため、それが返されます。

論理和 (||) およびヌル合体 (??) 演算子の複雑な例

例 3: オブジェクトを使用したネストされた操作

ネストされたオブジェクトのプロパティにデフォルト値を設定する必要があるシナリオを考えてみましょう。

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

この例では、userSettings.theme.color が空の文字列であるため、defaultSettings.theme.color が使用されます。 userSettings.theme.font が null であるため、defaultSettings.theme.font が使用されます。

例 4: デフォルトを使用した関数パラメータ

関数のパラメータを扱うとき、欠落している引数にデフォルト値を指定したい場合があります。

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

この例では、name パラメーターに ?? name が null または未定義の場合、演算子を使用してデフォルト値「Guest」を設定します。挨拶パラメータは || を使用します。演算子は、挨拶が null または未定義以外の偽の値である場合、デフォルト値「Hello」を設定します。

例 5: オプションのチェーンとの組み合わせ

オプションのチェーン (?.) は || と組み合わせることができます。そして ？？深くネストされたオブジェクトのプロパティを安全に処理するため。

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

この例では、オプションの連鎖により、プロパティ パスの一部が存在しない場合は unknown が返され、エラーが防止されます。 ||そして ？？次に、演算子は適切なデフォルト値を提供します。

ベストプラクティスとユースケース

1. 使用 ||広範なデフォルトの場合:

   • さまざまな偽の条件 (空の文字列、0、NaN など) に対してデフォルト値を指定する必要がある場合。

2. 使用 ？？正確なヌルチェックの場合:

   • 他の偽の値に影響を与えずに、特に null または未定義を処理したい場合。

3. 両方の組み合わせ:

   • || の組み合わせを使用します。そして ？？真/偽値と NULL 値の両方を区別して処理する必要がある複雑なシナリオ向け。

よくある質問

論理和 (||) 演算子は何をしますか?
論理 OR (||) 演算子は、オペランドの最初の真の値を返すか、真でない値がない場合は最後のオペランドを返します。

Nullish Coalescing (??) 演算子はどのような場合に使用すればよいですか?
0 や空の文字列などの他の偽の値を null として扱うことなく、null または未定義を特別に処理する必要がある場合は、Nullish Coalescing (??) 演算子を使用します。

両方の演算子を一緒に使用できますか?
はい、両方を使用できます ||そして ？？を組み合わせてさまざまなタイプの値を処理し、コード ロジックがさまざまなケースを効果的にカバーできるようにします。

|| はどうですか?空の文字列を処理しますか?
||演算子は空の文字列を false として扱うため、最初のオペランドが空の文字列の場合は次のオペランドを返します。

Nullish Coalescing (??) 演算子はすべてのブラウザでサポートされていますか?
?? Operator は、ES2020 をサポートする最新のブラウザーと環境でサポートされています。古い環境の場合は、Babel などのトランスパイラーを使用する必要がある場合があります。

|| の違いは何ですか?そして ？？演算子?
主な違いは || ということです。 ?? はいくつかの値を偽 (0、''、false など) とみなします。 null と unknown のみを null 値として扱います。

結論

JavaScript の論理 OR (||) 演算子と Nullish Coalescing (??) 演算子の違いを理解することは、堅牢でバグのないコードを作成するために重要です。 ||演算子は広範なデフォルトのシナリオに最適ですが、?? null 値を正確に処理するのに最適です。これらの演算子を適切に使用することで、コードがさまざまなデータ状態を効果的に処理し、シームレスなユーザー エクスペリエンスを提供できるようになります。