JavaScript 論理代入演算子

概要: このチュートリアルでは、論理OR代入演算子（||=）、論理AND代入演算子（&&=）、およびnullish代入演算子（??=）を含む、JavaScriptの論理代入演算子について学習します。

ES2021では、以下の3つの論理代入演算子が導入されました。

• 論理OR代入演算子（||=）
• 論理AND代入演算子（&&=）
• Nullish 合体代入演算子（??=）

次の表は、論理代入演算子の等価物を示しています。

論理OR代入演算子

論理OR代入演算子（||=）は2つのオペランドを受け取り、左オペランドが偽の値の場合に、右オペランドを左オペランドに代入します。

x ||= y

この構文では、||=演算子はxが偽の値の場合にのみyをxに代入します。例：

let title;
title ||= 'untitled';

console.log(title);Code language: JavaScript (javascript)

出力

untitled

この例では、title変数はundefinedであるため、偽の値です。titleが偽の値であるため、||=演算子は'untitled'をtitleに代入します。出力は期待通りuntitledとなります。

別の例を見てみましょう。

let title = 'JavaScript Awesome';
title ||= 'untitled';

console.log(title);Code language: JavaScript (javascript)

出力

'JavaScript Awesome'Code language: JavaScript (javascript)

この例では、titleは'JavaScript Awesome'であるため、真の値です。そのため、論理OR代入演算子（||=）は文字列'untitled'をtitle変数に代入しません。

論理OR代入演算子

x ||= y

は、論理OR演算子を使用する次のステートメントと同等です。

x || (x = y)

論理OR演算子と同様に、論理OR代入もショートサーキットします。つまり、論理OR代入演算子はxが偽の値の場合にのみ代入を実行します。

次の例では、論理代入演算子を使用して、検索結果要素が空の場合にデフォルトメッセージを表示します。

document.querySelector('.search-result').textContent ||= 'Sorry! No result found';Code language: JavaScript (javascript)

論理AND代入演算子

論理AND代入演算子は、xが真の値の場合にのみyをxに代入します。

x &&= y;

論理AND代入演算子もショートサーキットします。つまり、

x &&= y;

は次のものと同等です。

x && (x = y);

次の例では、論理AND代入演算子を使用して、personオブジェクトの姓が真の値の場合に姓を変更します。

let person = {
    firstName: 'Jane',
    lastName: 'Doe',
};

person.lastName &&= 'Smith';

console.log(person);Code language: JavaScript (javascript)

出力

{firstName: 'Jane', lastName: 'Smith'}Code language: CSS (css)

Nullish 合体代入演算子

Nullish 合体代入演算子は、xがnullまたはundefinedの場合にのみyをxに代入します。

x ??= y;

これは、Nullish 合体演算子を使用する次のステートメントと同等です。

x ?? (x = y);

次の例では、Nullish 合体代入演算子を使用して、オブジェクトに欠落しているプロパティを追加します。

let user = {
    username: 'Satoshi'
};
user.nickname ??= 'anonymous';

console.log(user);Code language: JavaScript (javascript)

出力

{username: 'Satoshi', nickname:'anonymous'}Code language: CSS (css)

この例では、user.nicknameはundefinedであるため、nullishです。Nullish 合体代入演算子は文字列'anonymous'をuser.nicknameプロパティに代入します。

次の表は、論理代入演算子の動作を示しています。

まとめ

• 論理OR代入（x ||= y）演算子は、xが偽の値の場合にのみyをxに代入します。
• 論理AND代入（x &&= y）演算子は、xが真の値の場合にのみyをxに代入します。
• Nullish 合体代入（x ??= y）演算子は、xがnullishの場合にのみyをxに代入します。