構文

【JavaScript】論理和・倫理積・Null合体代入演算子とは

更新日:2024/02/27

ECMAScript2021から、論理和代入演算子、論理和代入演算子、Null合体代入演算子が導入されました。
以前からある加算代入演算子と同じように、演算結果を変数やプロパティに直接代入できるものです。

これだけで解説が終わってる気がしますが、もう少し詳しくお伝えします。

 

論理和代入演算子(||=)

論理和代入演算子(||=)は、論理和演算の結果を加算代入演算子(+=)のように、直接代入できる演算子です。

let a = "abc";
let b = undefined;

a ||= b;
console.log( a ); // "abc"

a ||= b; 」は、論理和演算結果の代入「a = a || b;」 と同じ処理です。

■おさらい:JavaScriptの論理和演算子

C言語等の論理演算子は演算結果として真偽値を返します。
しかしJavaScriptは、左辺が偽と判断できる値(false,null,undefined,0,空文字(""),Nan)の時は右辺のを、真と判断できるときは左辺のを返します。

例:

100   || 200 → 100
0     || 200 → 200
"abc" || "def"  → "abc"
""    || "def"  → "def"

論理和は if文等の条件式で使用することが多いので、結果を代入するケースがあまり無いような気がします。
使い道を考えてみると、オプション等に値がセットされていない時に初期値をセットするような目的で使用できそうです。

const option ={
    value1:500
};

const initialOption = (opt)=>{
    opt.value1 ||= 100;
    opt.text1 ||= "abc";
    return opt;
};
console.log( initialOption(option) ); // { value1: 500, text1: 'abc' }

ただし、0や空文字""は値がセットされていないと判断されてしまうため、初期値で上書きされます。

次の例のように、3項演算子やNull合体代入演算子を使った方がいいかもしれません。

        // 3項演算子
    opt.value1 = opt.value1 === undefined ? 100 : opt.value1;

        // Null合体演算子: nullまたはundefinedでチェック
    opt.text1 ??= "abc";

 

論理積代入演算子(&&=)

論理積代入演算子は、論理積演算の結果を直接代入できる演算子です。

let a=null;
let b="abc";

a &&= b;
console.log( a ); // "abc"

a &&= b;」 は、論理積演算結果の代入「a = a && b; 」と同じ処理です。

■おさらい:JavaScriptの論理積演算子

JavaScriptの論理積は、左辺が偽と判断できる値(false,null,undefined,0,空文字(""),NaN)の時は左辺のを、真と判断できるときは右辺のを返します。

例:

100   && 200 → 200
0     && 200 → 0
"abc" && "def"  → "def"
""    && "def"  → ""

使い道は…思いつきません。

 

Null合体代入演算子(??=)

Null合体代入演算子は、Null合体演算の結果を直接代入できる演算子です。

let a=null;
let b="abc";

a ??=b;
console.log(a);

a ??= b; 」は、Null合体演算結果の代入「a = a ?? b;」 と同じ処理です。

■おさらい:JavaScriptのNull合体演算子

Null合体演算子は、左辺がnullまたはundefinedの時、右辺のを返します。
それ以外の時は、左辺のを返します。

例:

100        ?? 200 → 100
0          ?? 200 → 0
undefined  ?? 200 → 200
"abc"      ?? "def"  → "abc"
""         ?? "def"  → ""
null       ?? "def"  → "def"

論理和代入演算子の解説でも書いていますが、オプションの初期値設定で使うと便利です。

const option ={
    text1:""
};

const initialOption = (opt)=>{
    const initialData = {value1:100,text1:"abc"};
    Object.entries(initialData).forEach(e=>opt[e[0]] ??=e[1]);
    return opt;
};
console.log( initialOption(option) );

更新日:2024/02/27

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。