[JavaScript] Null 병합 연산자와 옵셔널 체이닝 연산자의 용도 차이

요약

?? 연산자는 값이 null 또는 undefined인 경우에만 대체값을 지정하는 데 사용되고,
?. 연산자는 속성이나 메소드에 안전하게 접근할 수 있도록 할때 사용한다.

null 병합 연산자(??)와 옵셔널 체이닝 연산자(?.)

모두 JavaScript의 상대적으로 최신의 기능으로,
둘 다 코드를 더욱 안전하고 간결하게 만드는 데 도움을 준다.
그러나 각각의 역할과 사용법은 다르다.

Nullish 병합 연산자 (??)

?? 연산자는 좌항 피연산자가 null 또는 undefined일 때 우항 피연산자를 반환한다.

즉, 왼쪽 피연산자가 null 또는 undefined일 때만 우측 피연산자가 반환된다.
다른 falsy한 값 (0, '', false 등)은 ?? 연산자에서는 null 또는 undefined와 구별하지 않는다.

주로 변수나 객체 속성을 가져올 때 사용하며,
그 값이 null 또는 undefined인 경우 대체값을 지정할 수 있다.

const defaultValue = 'Hello';
const userInput = null;

const result = userInput ?? defaultValue; // userInput이 null이므로 defaultValue가 할당됨
console.log(result); // 출력: "Hello"

옵셔널 체이닝 연산자 (?.)

?. 연산자는 객체의 속성에 안전하게 접근할 수 있게 해준다.
객체가 존재하지 않거나 속성이 없는 경우에도 에러를 방지하고 undefined를 반환한다.

어느 하나라도 null 또는 undefined가 될 가능성이 있는 경우 사용된다.

const user = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

const cityName = user.address?.city; // user.address가 존재하면 city 속성에 접근하고, 그렇지 않으면 undefined를 반환
console.log(cityName); // 출력: "New York"

const age = user.age?.years; // user.age가 존재하지 않으므로 undefined를 반환
console.log(age); // 출력: undefined