[javaScript]자바스크립트 옵셔널 체이닝 연산자 설명 및 예제

안녕하세요. gaki 입니다.

오늘은 ES11 에서 추가된 옵셔널 체이닝 연산자에 대해서 알아보겠습니다 .

옵셔널 체이닝 연산자는 좌항의 피연산자가 null 혹은 undefined 인 경우 undefined 를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어갑니다.

 

<목차>

1. 옵셔널 체이닝 연산자 설명

2. 옵셔널 체이닝 연산자 예제

 

1. 자바스크립트 옵셔널 체이닝 연산자 설명

---

옵셔널 체이닝 연산자는 ?. 입니다.

자바스크립트에서 객체의 프로퍼티를 가리킬 때, 객체가 undefined 거나 null 이면 타입에러가 발생합니다.

에러가 발생하면 프로그램이 강제 종료되며 이는 예기치 않은 버그를 만들어 낼 수 있습니다.

 

즉, null 이나 undefined 일수도 있는 객체의 프로퍼티에 접근하기 위한 방법은 여러가지가 있는데 오늘 소개해 드릴것은 그 중 하나인 옵셔널 체이닝 연산자입니다.

 

옵셔널 체이닝 연산자 ?. 는 객체를 가리키기를 기대하는 변수가 null 또는 undefined 가 아닌지 확인을 한 뒤, 프로퍼티를 참조할 때 유용합니다.

옵셔널 체이닝 연산자 ?. 가 도입되기 전에는 논리 연산자 && 를 사용한 평가를 통해 객체가 null 이나 undefined 인지 확인했었습니다.

 

 

2. 자바스크립트 옵셔널 체이닝 연산자 예제

---

// 1. 값이 null 인 객체에 접근할 경우
let elem = null;

let value = elem?.value;
console.log(value) // undefined


// 2. 값이 undefined 인 객체에 접근 할 경우
let elem = undefined;

let value = elem?.value;
console.log(value); // undefined

// 3. 정상적인 객체에 접근할 경우
let elem = {
	value: 10
    };

let value = elem?.value;
console.log(value); // 10

// 4. 응용
let elem = null;
let value = elem?.value || 10;
console.log(value); // 10

 

1) 객체의 값이 null 일때 옵셔널 체이닝 연산자를 통해 객체의 프로퍼티에 접근하면 typeError 가 발생하지 않습니다.

 

2) 객체의 값이 undefined 일때도 마찬가지로 옵셔널 체이닝 연산자를 통해 객체의 프로퍼티에 접근하면 typeError 가 발생하지 않습니다.

 

4) 객체가 null 이나 undefined 일때, default 값을 부여하고 싶으면 논리연산자와 함께 사용하면 됩니다.