❓Optional chaining ❓❓Nullish Coalescing Operator

❓Optional chaining(옵셔널 체이닝 연산자)이란?

• 옵셔널 체이닝 연산자 '?'는 객체의 속성에 접근할 때 해당 속성이 존재하지 않아도 에러를 발생시키지 않고 undefined를 반환합니다. 이는 객체의 중첩된 속성에 접근할 때 매우 유용합니다.

const user = {
  name: "John",
  address: {
    city: "Seoul"
  }
};

console.log(user.address?.street); // undefined
console.log(user.address.street); // TypeError: Cannot read properties of undefined
console.log(user.age); //undefined
console.log(user?.age); //undefined

위 예제에서 user.address?.street는 address 객체 안에 street 속성이 없으므로 undefined를 반환합니다. 만약 옵셔널 체이닝을 사용하지 않았다면, street에 접근하려고 할 때 TypeError가 발생했을 것입니다.
중첩되지 않은 객체 user에서 존재하지 않는 속성을 찾았을 때, user?.age와 user.age는 모두 undefined를 반환합니다. 이는 ? 연산자가 없어도 JavaScript가 존재하지 않는 속성에 접근하려 할 때 자동으로 undefined를 반환하기 때문입니다.

❓❓Nullish Coalescing Operator(널 병합 연산자)란?

• 널 병합 연산자 '??'는 좌측 피연산자가 null이나 undefined일 경우에만 우측 피연산자를 반환합니다. 이는 null이나 undefined 값을 기본값으로 대체할 때 유용합니다.

const userName = null;
console.log(userName ?? "Anonymous"); // "Anonymous"

const userId = 0;
console.log(userId ?? "No ID"); // 0

위 예제에서 userName은 null이므로 ?? 연산자 뒤에 오는 "Anonymous"가 반환됩니다. 반면, userId는 0이고 이는 null이나 undefined가 아니므로 userId의 값인 0이 그대로 출력됩니다.

-이 두 연산자를 사용함으로써, 자바스크립트에서 더 안전하게 데이터를 다루고, 기본값을 설정하는 등의 작업을 효율적으로 수행할 수 있습니다. 코드의 가독성과 안정성을 높이며, 개발자가 의도치 않은 에러로부터 보호받을 수 있게 도와줍니다.

출처: -코딩애플(https://www.youtube.com/watch?v=WHUvtiKy_pg), GPT-4