[JS] 옵셔널 체이닝 ?.

🐱‍👓 옵셔널 체이닝을 배우기 전, 알아야 할 falsey 값

---

✨ 옵셔널 체이닝 (Optional Chaining)

프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
옵셔널 체이닝은 옵셔널 내부의 내부의 내부로 옵셔널이 연결되어 있을 때 유용하게 활용할 수 있다.

---

🤔 옵셔널 체이닝을 쓰지 않아서 발생한 문제의 예시들 ( 옵셔널 체이닝이 필요한 이유 )

1. 사용자가 여러 명 있는데, 그중 몇 명은 이메일 정보가 없음.
=> 그럴 경우, 이메일을 등록하지 않은 유저의 이메일 정보에 접근하면 에러가 발생

2. JS를 사용하여 페이지에 존재하지 않는 요소에 접근해, 요소의 정보를 가져오려 할 때
(옵셔널 체이닝이 나오기 전에는 && 연산자를 사용했지만, 코드가 아주 길어진다는 단점이 있음)

let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);

---

🧐 옵셔널 체이닝의 사용법
?. 앞에 있는 대상이 (truthy)인 값이면 뒤 코드를 실행하고,
거짓(falsy)인 값이면 평가를 멈추고, 코드를 모두 undefined로 만들어 버린다.

 

let user = {}; // 이메일 정보가 없는 사용자

alert( user?.email?.address ); // undefined, 에러가 발생하지 않음.

// user?.email 로 이메일을 읽으면 아래와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않음.

let user = null;

console.log( user?.email );  // undefined
console.log( user?.email.address )  // undefined

// user 가 null 이나 undefined 가 아니고,
// 실제 값이 존재하는 경우엔 반드시 user.email 프로퍼티는 있어야 함.
// 그렇지 않으면, user?.email.address 의 두 번째 점 (.address) 연산자에서 에러가 발생함.

// dogName 객체가 존재하지 않더라도, 에러가 발생하지 않음.

const user = {
  name: 'amy',
  cat: {
    name: 'nemo'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(user.someNonExistentMethod?.());
// expected output: undefined

옵셔널 체이닝은 앞에 있는 대상에만 동작된다.

---

🧐 옵셔널 체이닝 사용시 주의점

1.  존재하지 않아도 괜찮은 대상에만 사용해야 함.
사용자 이메일을 다루는 위의 예시에는 반드시 user가 있어야 하지만, email은 필수 값이 아님.
그러므로 user.email?.address 를 사용하는 것이 바람직하다.
실수로 user 에 값을 할당하지 않았다면, 이후에 에러가 발생할 수도 있으니 신중해야 함!

2. 앞의 변수는 꼭 선언되어 있어야 함.
변수 user 가 선언되어 있지 않으면 user?.anything 평가 시 에러가 발생한다.

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

옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작하기 때문에,
user?.anything을 사용하려면 let이나 const를 사용해서 user를 정의해야 함.

3. 단락 평가 : 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춤.
그렇기 때문에 함수 호출을 비롯한 옵셔널 체이닝의 오른쪽에 있는 부가 동작들은 옵셔널 체이닝의 평가가 멈췄을 때 더는 일어나지 않음.

let user = null;
let num = 0;

user?.hi(num++); // 아무 일도 일어나지 않음.

alert(num); // 결과값은 0, num은 증가하지 않습니다.

---

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

1. ?.( )
두 상황 모두에서 user 객체는 존재하기 때문에 email 프로퍼티는 . 만 사용해서 접근 후,
?.( ) 를 사용하여 email의 존재 여부를 확인함.

// 한 객체에는 메서드 email이 있지만, 다른 객체에는 없는 상황
// ?.() 을 사용한 예시

let user1 = {
  email() {
    alert("user1의 email");
  }
}

let user2 = {};

user1.admin?.(); // user1의 email
user2.admin?.();

user1 에는 email 이 정의되어 있기 때문에 메서드가 제대로 호출된 반면,
user2 에는 email 이 정의되어 있지 않았음에도 불구하고 메서드를 호출하면 에러 없이 그냥 평가가 멈춤.

2. ?.[ ]
. 대신 대괄호 [ ] 을 사용해 객체 프로퍼티에 접근하는 경우에는 ?.[ ] 를 사용할 수도 있다.
마찬가지로, ?.[ ] 를 사용해도 위의 코드처럼 객체 존재 여부가 확실하지 않은 경우에 안전하게 프로퍼티를 읽을 수 있음.

// 한 객체에는 메서드 email이 있지만, 다른 객체에는 없는 상황
// ?.[] 을 사용한 예시

let user1 = {
  email: "google.com"
};

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

let key = "email";

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

alert( user1?.[key]?.something?.not?.existing); // undefined

 

3. ?. 은 delete와 조합해 사용할 수 있음.

delete user?.email; // user가 존재하면 user.email을 삭제

 

4. ?. 은 읽기나 삭제는 할 수 있지만, 쓰기에는 사용할 수 없음. ( ?. 은 할당 연산자 왼쪽에서 사용할 수 없음 )

// user가 존재할 경우 user.email 값을 쓰려고 시도 할 경우

user?.email = "google.com"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "google.com"이 되기 때문.

---

⚡ 요약

옵셔널 체이닝 문법 ?. 은 세 가지 형태로 사용할 수 있다.

1. obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2. obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3. obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행
?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있음.
?.의 왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 함.
꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 주의!

---

※ 참고 : ZeroCho Tv - ES2021 자바스크립트 강좌

※ 참고 : https://ko.javascript.info/optional-chaining

※ 연산 퀴즈 참고 : https://velog.io/@yejinh/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-null-%EB%B3%91%ED%95%A9-%EC%97%B0%EC%82%B0%EC%9E%90%EC%99%80-%EC%98%B5%EC%85%94%EB%84%90-%EC%B2%B4%EC%9D%B4%EB%8B%9D

※ falsey 값 MDN : https://developer.mozilla.org/ko/docs/Glossary/Falsy

※ 옵셔널 체이닝 MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining