**완전 잘 보고 배운 곳 **
옵셔널 체이닝 '?.' (javascript.info)
1. Optional Chaining 이 생긴 이유
(1) 생긴 이유
객체 안의 멤버의 값을 얻기 위해 점 표기법으로 접근했는데, 그 멤버가 존재하지 않는 순간이 있다.
이 경우 원래라면 에러가 난다.
const User {}
console.log(user.adderess);
// syntax error
이와 같이 우리가 객체 안의 특정 멤버에 접근하려고 하지만, 그 멤버가 있는지 없는지 모르는 경우에 Error를 피하기 위해 OptionalChaing이 만들어진 것이다.
(2) Optional Chaining 없었을 땐 어떻게 이 문제를 해결했나요?
&& 이 맨 처음 만나는 falsey 값을 반환한다는 특성을 이용하여 해당 멤버가 없는 경우 예외 처리를 해주었다.
{} 와 같은 빈 객체도 true라는 것을 복기하자.
const User = {}
console.log(User&&User.address&&User.address.street)
// 두번째인 User.address가 없는 값이므로 undefined가 출력됨.
이는 코드가 길어진다는 단점이 있다.
2. Optional Chaining 쓰는 법
(1) 멤버 이름 알아서 점표기법 바로 접근 시
?. 의 바로 왼쪽이 평가 대상이다. ?. 왼쪽이 존재하면, street 까지 가서 평가.
?. 왼쪽이 존재하지 않으면 undefined 출력
const User = {}
console.log(User.address?.street); // undefined 출력
(2) 객체 안의 매소드에 접근
userA = {
sayHi(){
console.log("안녕하세요.")
}
}
userB = {}
userA.sayHi?.(); // 맨 마지막 ()는 인수를 뜻하는 듯 --> 안녕하세요 출력
userB.sayHi?.(); // userB에는 sayHi란 함수가 없으므로 출력 x 이건 undefined 임
(4) Optional Chaining 쓸 수 있는 요건
a. .?을 쓰는 변수 자체는 선언이 되어 있어야 한다.
// User를 따로 선언하지 않음.
console.log(User.address?.street); // Error
b. .? 왼쪽 대상 이전의 왼쪽은 무조건 존재해야 한다. 그것이 없으면 에러가 난다.
UserA = {
name: "수민",
age: 25,
address: {
vilige: "달천동",
},
};
UserB = {
name: "민서",
age: 20,
};
console.log(UserA.address.vilige); // ok
console.log(UserB.address?.vilige.street); // ok -> address가 없는지 확인한 것이므로
console.log(UserB.address.vilige?.street); // Error -> address가 없어서
(5) Optional Chaining이 평가하는 범위
?. 왼쪽이 존재하지 않으면 거기서 평가를 멈추고 undefined를 출력. (오른쪽은 평가하지 않는다.)
User = {};
let x = 0;
console.log(User.address?.sayHi(x++));
console.log(x);
?. 왼쪽이 존재하지 않으므로 뒤에 x ++ 은 실행 자체가 안된다.
3. Optional Chaining을 이용한 예외처리
|| 가 맨 처음 만나는 참값을 반환한다는 것을 이용
'Language > JS' 카테고리의 다른 글
For 반복문, For of, For in (0) | 2023.04.14 |
---|---|
If와 Switch 문 (0) | 2023.04.14 |
구조 분해 할당 (0) | 2023.04.02 |
전개 연산자 (0) | 2023.04.02 |
Nullish 병합 과 삼항 연산자 (0) | 2023.04.02 |