인턴십을 경험하며 신기했던 코드 내용 중 하나는
optional chaining이었다.
optional chaining, 이걸 왜 쓰는데?
그 동안 나는 객체의 속성에 접근하기 위해 dot(.)을 사용하곤 했다.
코드가 정상 작동된다면 문제가 없었겠지만
인턴십을 진행하며 꽤나 자주 TypeError를 마주하게 되었다.
&& 연산자의 사용
그래서 사용한 것이 && 논리 연산자를 사용한 방어 로직이었다.
&&를 사용하여 null, undefined인지 판별하였고 실제로 오류는 어느 정도 잡혔다.
하지만 && 연산자가 포함된 로직에 대해 뭔지 모를 답답함을 느꼈다.
개인적으로 미니 프로젝트를 진행 중인 곳에
&&를 사용하면서도 다른 방법은 없을까를 고민했다.
Optional Chaining
나와 같은 불-편함을 느끼는 개발자들이 꽤나 있었나보다.
ES 2020에서 optional chaining이라는 연산자가 등장했었다.
객체의 속성을 접근할 때 . 연산자 대신에 ?. 연산자를 사용하면,
해당 객체가 undefined나 null인 경우에는
TypeError 대신에 undefined를 얻게 된다는 것이다.
&&와 optional chaining의 차이
논리연산자의 경우
왼쪽의 피연산자가 null이나 undefined가 아닌 다른 falsy한 값이여도 오른쪽 요소를 참조했다.
ex)
const variable = null;
let k = '오른쪽 요소';
let result = variable&&k;
console.log(result); //null 출력
const variable2 = false;
let k2 = '오른쪽 요소';
let result2 = variable2&&k2;
console.log(result2); //false 출력optional chaining의 경우
옵셔널 체이닝은 null과 undefined만을 기준으로 true,false를 판별한다.
let variable = null;
let k = '오른쪽 요소';
let result = variable?.k;
console.log(result); // undefined 출력
let variable2 = false;
let k2 = '오른쪽 요소';
let result2 = variable2?.k2;
console.log(result2); // undefined 출력
optional chaining 유의 사항
- 메서드나 함수에 사용 시 작성에 유의해야 한다
const a = {
b() {
return 'zerocho';
}
};
console.log(a.b?.());a.b?()가 아니라 a.b?.()이다!
optional chaining과 깐부인 nullish coalescing(= 널 병합 연산자)
널 병합 연산자는 optional chaining를 사용한 후에 아무 값도 찾을 수 없을 때 기본 값을 주기 위해 사용될 수 있다
기존에는 삼항연산자나 기본값연산자(||) 보호연산자(&&)에서 조건문 부분에 null이나 undefined외에도 0, '', NaN, false 등은 거짓으로 처리되었다.
??를 사용하면 null과 undefined인 경우에만 거짓으로 처리 가능하다!
nullish coalescing을 사용해줌으로서 예시 객체의 데이터가
null이나 undefined가 감지되면 오른쪽 요소에 적어둔 구문이 뜨고,
데이터가 확인된다면 정상적으로 값이 출력되는 것을 볼 수 있다.
내 코드에 적용해보기
정상적으로 적용되었고
데이터가 출력되는 것을 확인할 수 있었다.
Reference
MDN optional chaining
optional chaining blog
zerocho optional chaining
