[TIL] 옵셔널체이닝

옵셔널 체이닝 '?.'

옵셔널 체이닝은 객체에 있는 정보를 불러들여올때
객체의 값이 없어 undefined 또는 null 을 가지고 있어 에러를 내는 경우를 방지하기 위해 사용한다

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

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

위와 같이 주소의 정보가 없는 객체를 참조하게 될 경우에는
property '_' of undefined 에러를 내게되는데

이전에는 에러를 방지하게위해 && 연산자를 사용했다고 한다

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

alert( user && user.address && user.address.street ); // undefined

&& 연산자는 AND 연산자로 값중에 falsy한 값이 있다면
아래와 같이 먼저 입력 된 falsy 값이 출력이 된다

undefined && 0 // undefined
0 && undefined // 0
null && 1 && undefined // null
1 && undefined // undefined
1 && 0  // 0
1 && false && null // false

이렇게 코드를 작성하면 코드가 너무 길어진다는 단점이 있다

옵셔널 체이닝 ?.

?. 는 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

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

alert( user?.address?.street ); // undefined, 에러가 발생하지않는다

아까와 같은 예시로 비교해본다면 앞의 대상에 값이 없어도 에러를 내지않고 undefined를 반환한다

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

?. 로 연결된 체이닝은 뒤에 구문과 상관없이 ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다

옵셔널 체이닝은 남용해서는 안되고 값이 없어도 되는 경우에만 사용을 해야한다

?.앞의 변수는 꼭 선언되어 있어야 한다

// ReferenceError: user is not defined
user?.address;

변수를 선언하지 않은 상태에서 옵셔널체이닝을 사용하게된다면 래퍼런스에러가 난다

옵셔널 체이닝에 사용되는 ?.은 연산자가 아니다
?.은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construct)다

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}
let user2 = {};
user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

?.()를 통해서 admin의 존재여부를 확인하고 실행을 시키면
user1의 경우에는 제대로 실행이되고 user2에서는 에러없이 평가가 멈춘다

---

[]를 사용해 객체 프로퍼티에 접근하는 경우엔 ?.[]를 사용할 수도 있다

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined

key를 통해서 객체의 값을 확인하고 싶을때는 대괄호를 이용해서 확인할 수 있다

---

최근들어 갑자기 ?. 로 작성되어있는 코드를 본적이 있는데 찾아보니까
옵셔널체이닝이란 객체접근법중에 하나였다
기억하고 있으면 좋을거 같아 사이트에 있는 내용을 토대로 정리해보았다

---

참고한사이트

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