[JavaScript] 자바스크립트 옵셔널 체이닝 '?'이란?

옵셔널 체이닝(optional chaining)이란?

옵셔널 체이닝은  '?.' 형태의 특별한 문법구조체의 사용을 뜻하는데, 이것을 이용하면 프로퍼티(property)가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

 

다만 옵셔널 체이닝은 자바스크립트 스펙에 추가된 지 얼마 되지 않았기 때문에 구식 브라우저는 폴리필이 필요하다.

 

 

옵셔널 체이닝의 등장 배경

const student = {}

 

위와 같이 비어있는 student라는 객체의 프로퍼티에 접근하려고 하면 어떻게 될까?

alert(student.name.lastName); // TypeError: Cannot read property 'lastName' of undefined

 

당연히 오류가 발생하게 된다. 

 

실제로 어떤 객체의 프로퍼티가 비어있는 경우는 종종 있다. 

 

옵셔널 체이닝이 없을 때는 프로퍼티가 비어있지 않음을 확인하기 위해서 아래와 같이 코드를 작성해야 했다.

 

if(student && student.name && student.name.lastName){
 	alert(student.lastName);
}

 

&& 연산자를 이용해 특정 프로퍼티에 도달하기까지의 모든 프로퍼티를 검사해야 했다.

중간에 하나라도 비어있다면 오류가 발생하기 때문이다.

 

이러한 비효율성을 극복할 수 있는 방법이 옵셔널 체이닝이다.

 

 

옵셔널 체이닝 사용법

alert(student?.name?.lastName);	// undefined

 

위와 같이 '?.' 옵셔널 체이닝을 사용하면 '?.' 앞의 평가 대상이 null이거나 undefined라면 에러를 반환하지 않고 undefined를 반환한다.

 

따라서 복잡하게 && 연산자를 사용할 필요 없이 '?.'를 사용해 코드 길이를 단축시키면서 효율적으로 객체의 프로퍼

티에 접근할 수 있다.

 

다만, '?.'는 선언된 변수에만 사용할 수 있다.

 

만약 위 코드에서 student 자체가 선언되지 않았다면 '?.'를 사용해도 에러가 발생한다.

 

let student1 = {
    foo(){
    	alert("foo");
    }
}

let student2 = {};

student1.foo?.();	// foo	
student2.foo?.();	// undefined

 

옵셔널 체이닝은 함수에도 적용할 수 있다.

위와 같이 student2 객체에는 foo()라는 함수가 없더라도 에러가 발생하지 않고 undefined를 반환하는 것을

확인할 수 있다.

 

let student1 = {
	age: 10,
};

let student2 = {};

alert(student1?.["age"]);	// 10
alert(student2?.["age"]);	// undefined;

 

옵셔널 체이닝은 대괄호 [] 에도 적용할 수 있다. 객체 프로퍼티에 접근할 때 '.' 대신 '[]'를 사용하기도 하므로

옵셔널 체이닝을 적용해 객체 프로퍼티를 안전하게 읽을 수 있다.

 

 

---

참고

 

1. https://ko.javascript.info/optional-chaining