[자바스크립트] Optional Chaining 연산자(?.)

 

 

 

Optional Chaining 연산자(?.)는 JavaScript에서 사용되는 연산자로,

객체의 프로퍼티나 메서드를 사용할 때 객체가 undefined 또는 null인 경우 에러를 방지하기 위해 사용된다.

 

즉, 객체에 프로퍼티나 메서드가 존재하면 그 프로퍼티나 메서드를 사용하고, 존재하지 않는다면 undefined를 반환한다.

 

 

 

 

예를 들어,

let person = {name: "John", age: 25};

// undefined
console.log(person.address?.street); 

// TypeError: Cannot read properties of undefined (reading 'street')
console.log(person.address.street);

`person` 객체에 `address` 프로퍼티가 없으므로 `undefined`가 출력된다.

 

 

 

반면에,

let person = { name: "John", age: 25, address: { street: 'main st'} };
console.log(person.address?.street);

`person`객체에 `address` 프로퍼티가 있고, 그 프로퍼티에는 `street` 프로퍼티가 있으므로, `main st`가 출력된다.

 

위와 같은 경우 일반적으로 if문으로 검사하여 프로퍼티가 있는지 확인할 수도 있지만,

Optional Chaining 연산자를 사용하면 간결하고 가독성 좋은 코드를 작성할 수 있다.

 

 

 

 

 

 

---

 

 

 

 

 

❗ 최근에 추가됨
스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.

 

❗ 옵셔널 체이닝을 남용하지 마세요.

?.는 존재하지 않아도 괜찮은 대상에만 사용해야 합니다.사용자 주소를 다루는 위 예시에서 논리상 person은 반드시 있어야 하는데 address는 필수값이 아닙니다. 그러니 person.address?.street를 사용하는 것이 바람직합니다.실수로 인해 person에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야 합니다. 그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워집니다.

 

❗ ?.앞의 변수는 꼭 선언되어 있어야 합니다.

변수 persons가 선언되어있지 않으면 persons?.address 평가시 에러가 발생합니다.

let person = {name: "John", age: 25};

// ReferenceError: persons is not defined
console.log(persons.address?.street);

 

 

 

 

 

 

 

 

---

참고 : 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'