[JavaScript] Nullish coalescing operator 이랑 || 차이점

• 코테 진행중 javascript의 문법에 의문점이 생겼다

const friends = ['muzi', 'ryan', 'frodo', 'neo']
const gifts = ['muzi frodo', 'muzi frodo', 'ryan muzi', 'ryan muzi', 'ryan muzi', 'frodo muzi', 'frodo ryan', 'neo muzi'],

  let giftRecords = gifts.reduce((acc, cur) => {
    let [giver, receiver] = cur.split(' ');
    
    acc[giver] = acc[giver] || { given: 0, received: 0 };
    // acc[giver] = acc[giver] ?? { given: 0, received: 0 };
    
    acc[receiver] = acc[receiver] || { given: 0, received: 0 };
    // acc[receiver] = acc[receiver] ?? { given: 0, received: 0 };
    
    acc[giver].given++;
    acc[receiver].received++;
    return acc;
  }, {});

• 주석처리된 부분을 보면 차이점은 || 이랑 ?? 차이점 이다.

일단 결론은 acc[giver] 의 값이 undefined, null 일 때 값을 { given: 0, received: 0 }으로 할당해준다는 것은 동일하다

• 다만 차이점은

  • ?? (Nullish coalescing operator)는 acc[giver] 값이 undefined 또는 null 일때만 { given: 0, received: 0 }으로 할당을 해준다.

  • || (Logical OR)은 acc[giver] 값이 undefiend, null, false, 0, "", NaN 일때도 { given: 0, received: 0 }으로 할당을 해준다.

• 만약 acc[giver] 또는 acc[receiver]가 다른 falsy 값 (예: 0, false 등)을 가질 수 있다면, || 연산자를 사용하는 것이 적합하다.

이걸 왜 사용하는가??

if(!acc[giver]){
	...
}

• if 문으로 존재하는지 확인 할 필요가 없어진다