옵셔널 체이닝(Optional Chaining) 연산자는 ES2020에서 도입된 문법으로, 중첩된 객체의 프로퍼티에 접근할 때 체인에 있는 각 참조가 null 또는 undefined인지 일일이 검사하지 않아도 되도록 해줍니다.
이전에는 부모 객체가 null 또는 undefined가 아닌지 확인하기 위해 && 연산자를 반복적으로 사용해야 했습니다. 하지만 이제는 ?. 옵셔널 체이닝 연산자를 사용하면 훨씬 간결하고 안전하게 코드를 작성할 수 있습니다.
왜 옵셔널 체이닝이 필요한가?
객체를 다루다 보면 person.location.state처럼 여러 단계로 중첩된 프로퍼티에 접근해야 하는 경우가 많습니다. 만약 중간 단계의 location이 undefined라면, 그 하위 프로퍼티인 state에 접근하는 순간 TypeError가 발생합니다.
옵셔널 체이닝을 사용하면 참조가 nullish(null 또는 undefined)일 때 에러를 발생시키지 않고 undefined를 반환하므로, 값이 존재하지 않아도 프로그램이 안정적으로 동작합니다.
기본 문법
obj?.property // 프로퍼티 접근 obj?.[expr] // 대괄호 표기법으로 접근 obj.method?.() // 메서드 존재 여부를 확인하며 호출
예제 코드
다음은 JavaScript에서 옵셔널 체이닝 연산자를 활용하는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Optional Chaining operator in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to use optional chaining operator to access person object properties</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let person = {
name: "Rohan",
location: {
state: "Delhi",
country: "India",
},
};
BtnEle.addEventListener("click", () => {
resEle.innerHTML =
"person ?. location ?. state = " + person?.location?.state + "<br>";
resEle.innerHTML +="person ?. location ?. country = " +person?.location?.country +"<br>";
resEle.innerHTML +="person ?. personalDetails ?. birthDate = " +
person?.personalDetails?.birthDate +"<br>";
});
</script>
</body>
</html>
실행 결과
버튼을 클릭하기 전 초기 화면은 아래와 같습니다.
'CLICK HERE' 버튼을 클릭하면 옵셔널 체이닝으로 조회한 값들이 화면에 출력됩니다.
코드 동작 원리 살펴보기
person?.location?.state—person과location이 모두 존재하므로"Delhi"가 정상적으로 출력됩니다.person?.location?.country— 마찬가지로"India"가 출력됩니다.person?.personalDetails?.birthDate—personalDetails프로퍼티는 존재하지 않으므로, 에러 없이undefined가 반환됩니다.
사용 시 주의사항
- 옵셔널 체이닝은 읽기와 삭제에만 사용할 수 있으며, 변수 선언이나 할당문의 좌변에는 사용할 수 없습니다.
- 체인 어디든 하나라도 nullish하면 그 즉시 평가를 중단(short-circuit)하고
undefined를 반환합니다. - 값이 실제로
undefined인 것인지, 아니면 참조가 누락된 것인지 구분되지 않으므로 디버깅 시에는 유의해야 합니다.