본문 바로가기

Programming/JavaScript

[JavaScript] ? 기호의 또 다른 사용 - 옵셔널 체이닝

자바스크립트(JavaScript)를 포함한 대부분의 언어에서 ? 기호는 삼항 연산자(conditional operator)를 의미한다. 하지만 자바스크립트에서는 객체 이름 뒤에 ?를 붙여서 사용하는 경우를 볼 수 있다. 이건 무슨 문법일까? 아직 잘 알려지지 않은 건지 검색해도 삼항 연산자만 나와서 찾기가 어려웠다.

옵셔널 체이닝

옵셔널 체이닝(optional chaining)은 의미 그대로 선택적으로 체이닝을 적용할 수 있는 기능이다. 체이닝에 .을 적는 대신 앞에 ?를 넣어서 ?.으로 적으면 옵셔널 체이닝을 사용할 수 있다.

conn?.release();

이렇게 적을 경우 conn 객체가 null 또는 undefined일 경우, release 함수가 호출되지 않는다. 즉, null 또는 undefined 경우가 아닐 때에만 체이닝을 해서 release 함수에 접근한다고 볼 수 있다.

// if 사용
if (conn) {
    conn.release();
}

// && 사용
conn && conn.release();

만약 옵셔널 체이닝이 없다면 객체가 있는지 없는지 매번 체크해야 하는 불편함이 생길 것이다. 객체가 null 또는 undefined가 될 수 있기 때문이다. 객체가 없는데 체이닝을 시도한다면 런타임 오류가 발생하게 된다.

function getStatus() {
    let res = null;

    // 다양한 처리를 한 뒤에 ...

    return res?.status;
}

객체가 존재하면 객체의 status 값을, 그렇지 않으면 undefined를 반환하고 싶을 때에도 유용하게 사용할 수 있다. 옵셔널 체이닝은 객체가 존재하지 않는다면 undefined를 반환하도록 되어 있다.