複合代入演算子 (+=, -=, *=, /=…)

複合代入演算子は、演算を行い、その結果を変数に代入する演算子です。記述を簡潔にし、可読性を向上させます。

加算代入 (+=)

変数に値を加算し、その結果を再代入します。

let x = 5;
x += 3; // xは8になります
console.log(x); // 出力: 8
    

文字列でも使用できます。

let str = "こんにちは";
str += " 世界";
console.log(str); // 出力: こんにちは 世界
    

減算代入 (-=)

変数から値を減算し、その結果を再代入します。

let y = 10;
y -= 4; // yは6になります
console.log(y); // 出力: 6
    

乗算代入 (*=)

変数に値を乗算し、その結果を再代入します。

let z = 7;
z *= 2; // zは14になります
console.log(z); // 出力: 14
    

除算代入 (/=)

変数を値で割り、その結果を再代入します。

let a = 20;
a /= 4; // aは5になります
console.log(a); // 出力: 5
    

剰余代入 (%=)

変数を値で割った余りを再代入します。

let b = 15;
b %= 4; // bは3になります
console.log(b); // 出力: 3
    

べき乗代入 (**=)

変数を指定した値でべき乗し、その結果を再代入します。

let c = 3;
c **= 2; // cは9になります
console.log(c); // 出力: 9
    

ヌル値関連演算子 (??, ?.)

ヌル値関連演算子は、nullまたはundefinedを扱う際に役立ちます。これにより、安全なコードを書くことができます。

ヌル合体演算子 (??)

左側のオペランドがnullまたはundefinedの場合に右側の値を返します。それ以外の場合は左側の値を返します。

let value = null;
let result = value ?? "デフォルト値";
console.log(result); // 出力: デフォルト値

value = 0;
result = value ?? "デフォルト値";
console.log(result); // 出力: 0
    

オプショナルチェイニング演算子 (?.)

オブジェクトまたは配列のプロパティにアクセスする際に安全にチェインを行います。オブジェクトがnullまたはundefinedの場合、エラーを出さずにundefinedを返します。

let user = {
    name: "太郎",
    address: {
        city: "東京"
    }
};

console.log(user?.address?.city); // 出力: 東京
console.log(user?.phone?.number); // 出力: undefined

user = null;
console.log(user?.name); // 出力: undefined
    

ヌル合体演算子とオプショナルチェイニングの組み合わせ

両方の演算子を組み合わせることで、さらに安全なコードを実現できます。

let settings = null;
let theme = settings?.theme ?? "デフォルトテーマ";
console.log(theme); // 出力: デフォルトテーマ