Logical Assignment Operators

일단 아래의 코드를 보자

const rest1 = {
  name: 'Capri',
  numGuests: 20,
};

const rest2 = {
  name: 'La Piazza',
  owner: 'Giovanni Rossi'
}

//OR assignment operator
rest1.numGuests = rest1.numGuests || 10;
rest2.numGuests = rest2.numGuests || 10;

console.log(rest1) 
//{name: 'Capri', numGuests: 20}
console.log(rest2) 
//{name: 'La Piazza', owner: 'Giovanni Rossi', numGuests: 10}

이렇게 객체 rest1, rest2가 있을 때 OR operator로 rest1와 rest2에 numGuests가 있으면 그 값이 나오게 하고 아니면 default로 10으로 나오게 설정해 줄 수 있다. 이건 저번 포스트에서 정리한건데, 이걸 최신 문법으로 이렇게 쓸 수 있다.

rest1.numGuests ||= 10;
rest2.numGuests ||= 10;

이렇게 쓰는것을 Logical Assignment Operators 라고 한다. or 뿐만 아니라 and(&&) 연산자도 이렇게 사용할 수 있다.

// rest2.owner = rest1.owner && '<ANONYMOUS>'; //undefined
// rest2.owner = rest2.owner && '<ANONYMOUS>';//<ANONYMOUS>
rest1.owner &&= '<ANONYMOUS>';
rest2.owner &&= '<ANONYMOUS>'

rest1.owner은 존재하지 않으므로 undefined가 나오게 되고 rest2.owner는 존재하므로 뒤의 값인 가 나오게 된다. 그리고 최신문법으로 &&=로 간략하게 써줄 수 있다.

  const rest1 = {
  name: 'Capri',
  numGuests: 0,
};

const rest2 = {
  name: 'La Piazza',
  owner: 'Giovanni Rossi'
}
  
rest1.numGuests = rest1.numGuests || 10;
rest2.numGuests = rest2.numGuests || 10;

rest1 객체의 numGuests 값을 0으로 설정하면, 0이 falsy 값이므로 0 대신 다음 값(10)이 나오게 된다. 이를 해결하기 위해 Nullish Coalescing Operator (??)도 간략하게 사용할 수 있다:

rest1.numGuests ??= 10;
rest2.numGuests ??= 10;