[JS] 옵셔널 체이닝 (Optional Chaning)

 

let user = {};

console.log(user.id);

 

다음과 같은 코드가 있다고하자.

user는 빈 객체이므로 console.log에서는 오류가 난다.

이를 오류 없이 해결할 수 있는 방법이 optional chaning이다.

 

옵셔널 체이닝

 

옵셔널 체이닝은 ?.로 사용하며 앞의 대상이 undefined거나 null이면 undefined를 return한다.

예를 들어 

 

let user = {};

console.log(user?.name?.first); //undefined

 

위와 같이 작성하면 user에서 존재 여부를 확인하고 user는 존재하기 때문에 다음으로 넘어간다.

name?에서는 user 객체 내에 name 속성이 존재하지 않기 때문에 멈추고 undefined를 return한다.

따라서 console에서는 undefined가 출력된다.

 

단락 평가

let user = null;
let x = 0;

console.log(user?.hello(x++));

 

위 예제에서는 ?.로 user의 존재 여부를 확인하고 user가 null이라서 undefined를 반환한다.

이때, user?.에서 멈추고 반환하기 때문에 뒤의 hello(x++)함수는 실행되지 않는다.

따라서 x는 여전히 0이다. 이런 방식을 단락 평가라고 한다.

 

함수와 객체의 프로퍼티에서 옵셔널 체이닝

?.는 연산자가 아니라 문법 구조체(Syntax Construct)이기 때문에 함수( ?.() )나 객체의 프로퍼티( ?.[] )과도 사용할 수 있다.

 

함수와 사용 ?.()

 

let user = {
    hello(){
        console.log("Hello");
    }
}

let nonuser = {}

user.hello?.()    // hello 함수가 존재하기 때문에 호출 > Hello
nonuser.hello?.() // undefined

 

user 내에 hello가 존재하는지 확인하고 실행하거나 undefined를 반환한다.

 

객체의 프로퍼티와 사용 ?.[]

 

let user = {
    att1 : 'Hello'
}

let nonuser = null

user?.[att1]    // Hello
nonuser?.[att1] // undefined

 

 

 

과거에는 0, false, '', NaN과 같은 일종의 '값'과 null, undefined를 구분하여 사용할 수 없었으나

옵셔널 체이닝을 통해 null과 undefined만 따로 구분하여 안전하게 중단할 수 있게 되었다.

 

 

참고

모던 JavaScript 튜토리얼 - 옵셔널 체이닝

신재헌의 블로그 - 옵셔널 체이닝