[Javascript] 옵셔널 체이닝 '?.'

옵셔널 체이닝 '?.'

옵셔널 체이닝 ?. 은 ?. '앞'의 평가 대상이 undefined 나 null 이면

평가를 멈추고 undefined를 반환한다.

 

옵셔넝 체이닝 '?.' 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다,.

 

 

형태

 a?.b  

앞의 평가 대상(a)이 undefined 나 null 이면 undefined를 반환

 

 

예시 코드 1.

// 정보가 없는 사용자
let user = { }; 

// user 안에 address 에 대한 정보가 없어 에러 발생
console.log(user.name.address); // TypeError: Cannot read properties of undefined (reading 'adress')

// 옵셔널 체이닝을 사용하면 에러를 발생시키지 않는다.
console.log(user?.name?.address); // undefined

 

예시 코드 2.

// querySelector(...) 의 호출 결과는 null 이다. (해당 요소가 없을 경우)
console.log(document?.querySelector('.element')); // null

// querySelector(...) 의 호출 결과가 null일 경우 에러 발생
let html = document.querySelector('.element').innerHTML; // TypeError: Cannot read properties of null (reading 'innerHTML')

// 옵셔널 체이닝을 사용하면 에러를 발생시키지 않는다.
console.log(document.querySelector('.element')?.innerHTML); // undefined

 

 

단락평가

?. 는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다.

(이런 평가 방법을 단락 평가라고 부른다.)

그래서 ?. 오른쪽에 있는 부가 동작은 ?. 의 평가가 멈췄을 때 더는 일어나지 않늗다.

 

예시 코드

let user = null;
let x = 0;

// user 가 null 이기때문에 에러 발생
user.sayHi(x++); // TypeError: Cannot read properties of null (reading 'sayHi')

// 옵셔널 체이닝을 사용하여 에러가 발생하지 않고,
// 즉시 평가를 멈췄으므로 뒤에있는 동작(x++)은 일어나지 않는다.
user?.sayHi(x++);
console.log(x) // 0

 

 

?.( ) 와 ?.[ ]

 

?.( )

존재 여부가 확실치 않은 함수를 호출할 때 ?.() 를 사용할 수 있다.

 

?.() 의 예시 코드 

// admin 메서드가 있는 객체
let user1 = {
	admin() {
    	alert('관리자 게정입니다.');
    }
}

// admin 메서드가 없는 객체
let user2 = {}

// user1은 admin이 정의되어 있기때문에 메서드가 호출된다.
user1.admin?.(); // 관리자 계정입니다.

// user2는 admin이 정의되어 있지 않기 때문에 평가가 멈춘다.
user2.admin?.(); // (아무 동작도 일어나지 않음)

 

?.[ ]

객체 프로퍼티에 접근 시, . 대신 대괄호[]를 사용해 접근하는 경우 ?.[] 를 사용할 수도 있다.

 

?.[] 의 예시 코드

let user1 = {
	firstName: "Happy:"
};

let user2 = null;

let key = "firstName";

// user1에 firstName 이라는 프로퍼티가 존재하므로 user["firstName"] 으로 동작하여 Happy를 반환한다.
alert(user1?.[key]); // Happy
// user1에 firstName 이라는 프로퍼티가 존재하지 않으므로 평가가 멈춘다.
alert(user2?.[key]); // undefined