JavaScript의 '?.'는 무엇일까? 옵셔널 체이닝(Optional Chaining) 완벽 이해하기

JavaScript 코드를 보다가 ?.라는 낯선 구문을 만난 적이 있으신가요? 이번 글에서는 예제를 통해 ?., 즉 옵셔널 체이닝(Optional Chaining)이 무엇인지, 그리고 왜 필요한지 쉽게 이해해 보겠습니다.

기본 예제: 객체 프로퍼티 접근

먼저 23살 남성을 표현하는 다음과 같은 객체가 있다고 가정해 봅시다.

const being = {
    human: {
        male: {
            age: 23
        }
    }
};

이 객체에서 age 프로퍼티에 접근하려면 어떻게 해야 할까요? 아주 간단합니다. 아래 코드처럼 일반적인 체이닝(chaining) 방식으로 접근하면 됩니다.

예제

const being = {
    human: {
        male: {
            age: 23
        }
    }
};
console.log(being.human.male.age);

출력 결과

23

문제 상황: 중간 프로퍼티가 없다면?

그런데 어떤 기술적인 이유로 being 객체의 male 프로퍼티가 female 등 다른 이름으로 변경되었다고 생각해 봅시다.

이 경우 앞서 작성한 체이닝 문은 어떻게 될까요? human 객체 안에 female이라는 프로퍼티가 존재하지 않으므로, TypeError가 발생하며 프로그램 실행이 중단됩니다. "undefined의 프로퍼티에 접근할 수 없다"는 에러 메시지를 본 적이 있다면 바로 이 상황입니다.

그렇다면 이런 상황에서도 코드가 에러를 던지지 않도록 만들 수 있는 방법은 없을까요? 네, 있습니다. 바로 여기서 ?., 즉 옵셔널 체이닝이 등장합니다.

옵셔널 체이닝(?.)의 동작 원리

옵셔널 체이닝의 동작 방식은 매우 단순합니다.

• 평소에는 일반적인 체이닝과 똑같이 동작합니다.
• 그러나 undefined 또는 null인 값에서 프로퍼티에 접근하려고 하면, 에러를 던지는 대신 그 자리에서 체이닝을 즉시 종료하고 undefined를 반환합니다.
• 덕분에 나머지 코드는 정상적으로 계속 실행됩니다.

옵셔널 체이닝 적용 예제

const being = {
    human: {
        male: {
            age: 23
        }
    }
}
console.log(being?.human?.female?.age);

출력 결과

에러를 던지는 대신, 출력 결과는 다음과 같습니다.

undefined

마무리

옵셔널 체이닝은 중첩된 객체 구조에서 특정 프로퍼티의 존재 여부를 확신할 수 없을 때 매우 유용한 문법입니다. 매번 if문으로 프로퍼티 존재 여부를 검사하는 번거로움 없이, ?. 하나만으로 안전하고 깔끔하게 깊은 프로퍼티에 접근할 수 있습니다. ES2020부터 정식 도입된 이 문법을 활용하면 런타임 에러를 크게 줄이고 코드의 가독성까지 높일 수 있습니다.