論理演算子を用いた代入記法

論理和代入

論理和代入演算子（||=）は、左辺がFalsyな値の場合、右辺の値を代入するという記法になります。

const fruitsColor =　{ apple: 'red', banana: '', peach: 'pink' };

fruitsColor.banana ||= 'yellow';
console.log(fruitsColor.banana); // yellow

fruitsColor.apple ||= 'yellow';
console.log(fruitsColor.apple); // red

論理積代入

論理積代入演算子（&&=）は、左辺がTruthyな値の場合、右辺の値を代入するという記法になります。

const fruitsColor =　{ apple: 'red', banana: '', peach: 'pink' };

fruitsColor.banana &&= 'yellow';
console.log(fruitsColor.banana); // ''

fruitsColor.apple &&= 'green';
console.log(fruitsColor.apple); // green

Null合体代入

Null合体代入演算子（??=）は、左辺がNullish（nullもしくはundefined）な値の場合、右辺の値を代入するという記法になります。

const name = { firstName: 'taro' };

name.firstName ??= 'ken';
console.log(name.firstName); // taro

name.lastName ??= 'yamada';
console.log(name.lastName); // yamada

console.log(name); // { firstName: "taro", lastName: "yamada" }

書き換え例

上記の記法を利用することで、今まで条件分岐やショートハンドを使用し記述していた部分を書き換えることが可能です。

// before1
let beforeFullName;

if (!beforeFullName) {
  beforeFullName = 'No Name';
}

console.log(beforeFullName); // No Name

// after1
let fullName;
fullName ||= 'No Name';

console.log(fullName); // No Name

// before2
let beforeNumber = 10;
beforeNumber && (beforeNumber *= 10);

console.log(beforeNumber); // 100

// after2
let number = 10;
number &&= number * 10;

console.log(number); // 100

// before3
let beforePhoneNumber3;

beforePhoneNumber3 = beforePhoneNumber3 ?? '01234567８９'

console.log(beforePhoneNumber3); // 0123456789

// after3
let phoneNumber;

phoneNumber ??= '0123456789'

console.log(phoneNumber); // 0123456789