[JS] optional chaining (?.)

구식 브라우저에서는 지원이 안되므로, 구식 브라우저에서는 폴리필이 필요함

optional chaining을 사용하면 property가 없는 중첩 객체를(undefined 이거나 null인 객체) 에러 없이 접근할 수 있음

ERROR CASE 1

let user = {};

console.log(user.address.street); // TypeError: Cannot read property 'street' of undefined

ERROR CASE 2

let html = document.querySelector(".element").innerHTML;
// querySelector 결과가 'null'인 경우 에러 발생

null, undefined 인 property를 사용하려하면 에러가 발생하기 때문에 optional chaining ?. 기법을 사용하며, ?. 앞 평가 대상이 undefined 이거나 null이면 undefined를 반환한다

OUTPUT 1

let user = {};
let user2 = null;

console.log(user?.address); // undefined, 에러 발생 X
console.log(user2?.address); // undefined, 에러 발생 X
console.log(user2?.address.street); // undefined, 에러 발생 X

만약 user는 필수값인데 address가 옵션값이라면 user?.address.street 로 명시하는 것은 바람직 하지 않고 아래와 같이 사용해야한다
여기서 참고해야할 점은 ?. 는 연산자가 아니라 함수나 대괄호와 함께 동작하는 구조체이다

OUTPUT 2

let user = {
	firstName: "Blue"
}

let user2 = null;

let user3 = {
	admin() {
		console.log("관리자입니다.");
	}
}

console.log(user?.["firstName"]); // Blue
console.log(user2?.["firstName"]); // undefined
console.log(user3.admin?.()); // 관리자입니다.
console.log(user2.admin?.()); // Nothing

delete user?.name // user가 있다면 user.name 을 삭제한다

?. 은 읽거나 삭제하기에 밖에 사용할 수 없다
자주 사용하면 에러를 쉽게 확인할 수 없으므로 반복적인 사용은 지양…..

ref

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