선택적 체이닝(Optional Chaining)

**완전 잘 보고 배운 곳 ** 

옵셔널 체이닝 '?.' (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을 이용한 예외처리

|| 가 맨 처음 만나는 참값을 반환한다는 것을 이용