[JavaScript] '?' 옵셔널 체이닝 연산자

ES2020에서 새롭게 등장한 연산자인 옵셔널 체이닝 연산자는 '?.' 형태로 사용되며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다.

 

체이닝 연산자와 비슷하게 동작하지만 참조가 null 이거나 undefined여도 에러가 나오지 않고 undefined 값을 리턴한다.

함수 호출시에도 값이 없다면 undefined를 리턴한다.

 

 

 

만약 염색을 하려고 미용실을 가서 어떤 컬러를 할지 결정하기 위해 컬러북을 살펴봤다고 생각해보자

컬러는 무수히 많지만 거기에 나와있는 컬러는 없는 컬러도 있을 것이다.

 

없는 컬러를 선택했다고 가정하고 코드로 나타내보면

const color = {
	red : {
    	name : '빨강'
    } ,
    blue : {
    	name : '파랑'
    }
}	

alert(color.yello.name); // TypeError: Cannot read property 'name' of undefined

 

당연히 존재하지 않은 요소에 접근해 요소의 정보를 가져오려하면 문제가 발생하게 된다.

 

이러한 점을 해결 하기 위해 옵셔널 체이닝이 등장했는데  옵셔널 체이닝(?.)이 추가되기전에는 이런 문제를 해결하기위해 && 연산자를 사용하곤 했다.

 

하지만 중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을 AND로 연결해 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법은 코드가 길어진다는 단점이 있었다.

 

 

사용법

?. 앞의 평가 대상이 undefined나 null 이면 평가를 멈추고 undefined를 반환한다.

 

const color = {
	red : {
    	name : '빨강'
    } ,
    blue : {
    	name : '파랑'
    }
}	

alert(color?.yello?.name); // undefined

 

대신 옵셔널체이닝을 남용해선 안된다. ?.는 존재하지 않아도 괜찮은 대상에만 사용해야한다.

 

컬러를 다루는 위의 예시에서 논리상 color 는 반드시 있어야하는데 red,blue 등은 필수값이 아니다

 

그러므로 color.yello?.name 을 사용하는 것이 바람직하다. 실수로 color에 값을 할당하지 않았다면 바로 알아낼수 있도록 해야한다. 안그러면 에러를 발견하지 못하고 디버깅도 난이도가 올라가게 된다.

 

 

 

※ 개인공부 기록용이니 잘못된 점이 있으면 댓글로 알려주시면 감사드리겠습니다(__)