2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [2/2]

 

 

 

 

앞선 아티클에서 널 병합(nullish coalescing)에 대해서 살펴보았습니다. 이제 이어서 옵셔널 체이닝(optional chaining)에 대해서도 살펴보겠습니다. 

 

 

 

○ 옵셔널 체이닝(optional chaining)

 

기본적으로 옵셔널 체이닝의 적용 양식은 [ .? ]입니다. 이 형태가 지금은 금방 이해가 가지 않으실텐데, 단락을 읽어나가면 충분히 이해가 가실 겁니다. 

 

옵셔널 체이닝의 용도는, 우리가 어떤 객체의 프로퍼티를 조회하는 경우가 있을텐데 이 때 일반적인 객체가 아닌 null이나 undefined의 프로퍼티를 조회하려고 시도하는 경우의 에러 발생을 대비하기 위한 예외처리를 위함입니다. 자, 아래 예제를 하나씩 살펴보도록 하겠습니다. 

 

const a = {};
a.b;

const c = null;
try {
    c.d;
} catch (e) {
    console.error(e);
}

/* 출력
TypeError: Cannot read properties of null (reading 'd')
...
*/

 

 

위와 같은 경우, a는 객체이므로 a.b와 같은 형식으로 프로퍼티와 관련된 동작을 해도 이상이 없습니다. 그런데, null인 변수 c에 d라는 속성을 붙이게 되면, null의 프로퍼티를 읽을 수 없다는 에러가 발생하게 됩니다. 

 

자, 그럼 아래와 같이 실행해 봅시다.

 

const a = {};
a.b;

const c = null;
c?.d;

/*
try {
    c.d;
} catch (e) {
    console.error(e);
}
*/

 

위와 같이, [ c.d ] 형식이 아닌 [ c?.d ] 형식으로 코드를 작성하고 실행하면, 아무런 에러도 표시되지 않습니다. 이제 이를 응용해서 여러가지 형태로 사용할 수 있습니다. 특히 일반 프로퍼티 뿐만 아니라 함수 호출 / 배열 요소 접근에 대해서도 동일한 에러 방지 효과를 가져올 수 있습니다. 

 

아래 예제를 통해 간단히 살펴보겠습니다. 

 

const a = {};
a.b;

const c = null;

/*
try {
    c.d;
} catch (e) {
    console.error(e);
}
*/
c?.d;

/*
try {
    c.f();
} catch (e) {
    console.error(e);
}
*/
c?.f();

/*
try {
    c[0];
} catch (e) {
    console.error(e);
}
*/
c?.[0];

 

위의 경우에도 아무 에러가 출력되지 않는 것을 알 수 있습니다. 

 

 

이제 ES2015+와 관련된 주요 내용은 여기까지 살펴보겠습니다. 다음 아티클부터는 프론트엔드에서 사용되는 주요 요소를 살펴보겠습니다.