옵셔널 체이닝

오늘은 옵셔널 체이닝 알아봅시당

optional chaining 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다

라고 하는데 너무 어렵네요

쉽게 말해서,
존재하지 않는 요소에 접근할 때, 에러 뜨잖아요

let user = {}
console.log(user.user.name) 

TypeError: Cannot read property 'name' of undefined

user 에서 user 프로퍼티에 접근했는데, 없으니까 undefined가 할당되었읍니다.

undifined 가 할당된 user.user에서 name 프로퍼티에 접근했으니, 에러 뜸

근데 이럴 때 옵셔널 체이닝 쓰면 에러 안뜸

nullish 한지 판단하고, nullish하다면, 에러 말구 undefined 반환함

let user = {}
console.log(user.user?.name) 

undefined

정리하자면,

1. 좌항의 피연산자가 null 또는 undefined 이면, undefined를 반환함
2. 그렇지 않으면 우항의 프로퍼티 참조를 이어감
3. 쓰는 법: 좌항?.우항

좌항의 피연산자가 nullish 하지 않은 경우

let name = "sungho";
let length = name?.length;

console.log(length) // 6

좌항이 nullish 하지 않아서, 우항의 프로퍼티를 참조하여 name.length인 6이 출력됨

허걱 그럼 피연산자가 null, undefined 만 아니면 우항의 프로퍼티 참조를 이어갈듯

좌항의 피연산자가 nullish 하지 않은 경우

let name = "";
let length = name?.length;

console.log(length) // 0

이거 쓰면, 존재하지 않는 함수를 호출할 때도, 예외 발생 대신 undefined 반환 시킬 수 있을 듯

엥 근데 저거 물음표 안써도, object 없으면 undefined 잘 나오는뎁쇼?

var user = {
  name: "kim",
}
console.log(user?.age) // undefined

이거보셈 undefined 뜸

ㅇㅇ 근데 문제는 이런 식으로 점이 여러개 있을 때임

var user = {
  name: "kim",
  age: { value: 20 }
}

console.log(user.age.value)

이런 상황에서 value에 값 없으면, 에러뜸.

점 여러개일 때 쓰면 좋을 듯

응용티비

let sungho = { age: 27 };
sungho.name = sungho?.name ?? "김성호"

console.log(sungho.name) // 김성호

null 병합 연산자(??)랑 같이 쓰면 개꿀일듯

DOM도 객체임

document.querySelector("#title").innerHTML
이런 코드 많이 짜죠?
잘 보면 점 두개 이상임 (중첩된 오브젝트 라는 뜻)

document.querySelector("#title")?.innerHTML
이렇게 쓰면 될 듯

주의점

1. 꼭 필요한 곳에만 쓰세요 에러 안뜨면 디버깅 어려울 듯
2. 옛날 브라우저에서는 안됨
3. 선언이 완료된 변수를 대상으로만 동작함
4. 값을 할당할 때 사용할 수 없음