[JavaScript] ?.(Optional Chaining) / ??(Nullish Coalescing Operator)

?.(optional chaining)

자바스크립트에서 객체 내부의 속성에 접근할 때, 존재하지 않는 객체에 대해 접근하면 에러가 발생한다.

var obj = {
   one: 1,
   two: { name: '222'}
}

console.log(obj.onee);
>> undefined

console.log(obj.onee.name);
>> Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at <anonymous>:1:10

존재하는 객체의 존재하지 않는 속성에 접근하면 undefined를 반환하지만, 존재하지 않는 객체의 속성에 접근하면 에러가 발생한다. 중첩되지 않은 간단한 오브젝트의 경우,  오브젝트에서 원하는 데이터를 찾을 수 없으면 자바스크립트에서 자동으로 undefined를 남겨준다. 그러나 중첩된 오브젝트는 마침표가 두 번 이상 사용되고, undefined에도 마침표를 사용할 수 있기 때문에 위험하다.

사이트를 개발중일 때 에러가 발생하면 에러가 난 부분 하단에 있는 코드들은 실행되지 않아 사이트가 이상하게 동작할 수 있다. 이를 방지하고 코드를 좀 더 보수적으로 짜기 위해 Optional Chaning을 사용할 수 있다.

 

 

console.log(obj.test?.name);
>> undefined

?. 앞의 변수가 null, undefined면 undefined를 반환한다. 이때 ?. 앞의 변수는 반드시 선언되어 있어야 한다. 

 

 

존재 여부가 불확실한 함수를 실행할 때도 사용할 수 있다.

var obj = {
   show() {
      console.log('show');
   }
}

obj.show?.();
>> show
obj.show2.();
>> Uncaught SyntaxError: Unexpected token '('
obj.show2?.();
>> undefined

 

delete와 조합하여 사용할 수도 있다.

delete one?.name; // one이 존재하면 one.name을 삭제

 

* 유의할 점

- Optional Chaing의 사용 목적은 에러를 해결하는 것이 아닌 에러가 발생하지 않게 감추는 것임을 유의하자.

- 남용하면 에러를 조기에 발견하지 못하고 디버깅이 힘들어질 수 있으므로 꼭 필요한 곳에만 사용할 것.

- ?.는 논리적으로 존재하지 않아도 괜찮은 대상에만 사용해야 한다.

 

 

??(nullish coalescing operator)
?? 연산자를 사용하면 여러 피연산자 중 값이 '확정되어 있는(할당된)' 변수를 찾을 수 있다.

 

a ?? b의 결과는 다음과 같다. 

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b

 

 

x = a ?? b는 다음과 동일한 결과를 가진다.

x = (a !== null && a !== undefined) ? a : b;

 

React나 Vue를 사용할 때 데이터가 늦게 도착하는 경우가 있는데, 데이터가 도착하기 전까지 ?? 연산자의 오른쪽 항목을 보여주는 식으로도 ?? 연산자를 활용할 수 있을 듯하다.