<Optional chaining> 옵셔널체이닝

외부 api에서 데이터를 받아와서 데이터가 있는지 없는지 확인하고 데이터가 null 이거나 undefined 일 수 있기 때문에 데이터를 계속 확인해 주지 않는다면 TypeError를 만나게 되면서 옵셔널체이닝을 쓰게 되었고, 이에 대한 정확한 개념을 잘 모르는거 같아서 블로그를 작성하게 되었다.

 

• Optional Chaning은 ES2020에서 등장한 새로운 연산자
•  '?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있는 연산자이다.
• 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undifined값을 리턴한다.
• 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다.

?. 은?.'앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

그런데 평가 대상에 값이 없으면 즉시 평가를 멈추는데 이것을 단락평가라고 합니다.

 

※?. 는 존재하지 않아도 괜찮은 대상에게만 사용

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

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

두 상황 모두에서 user 객체는 존재하기 때문에 admin 프로퍼티는 .만 사용해 접근했습니다.

리고 난 후?.()를 사용해 admin의 존재 여부를 확인했습니다. user1엔 admin이 정의되어 있기 때문에 메서드가 제대로 호출되었습니다. 반면 user2엔 admin이 정의되어 있지 않았음에도 불구하고 메서드를 호출하면 에러 없이 그냥 평가가 멈추는 것을 확인할 수 있습니다.

 

?.()와 ?.[]

?.은 연산자가 아닙니다. ?.은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construct)입니다.

. 대신 대괄호 []를 사용해 객체 프로퍼티에 접근하는 경우엔?. []를 사용할 수도 있습니다. 위 예시와 마찬가지로?. []를 사용하면 객체 존재 여부가 확실치 않은 경우에도 안전하게 프로퍼티를 읽을 수 있습니다.

let user1 = {
  firstName: "Violet"
};

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

let key = "firstName";

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

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

 

?. 은delete와 조합해 사용할 수도 있습니다.

delete user?.name; // user가 존재하면 user.name을 삭제합니다.

 

 

요약

1. ?. 을 사용하면 프로퍼티가 없는 객체에 에러 없이 안전하게 접근이 가능하다.
- user && user.address && user.address.street (옛날에 이거 사용)
- user?.address?.street

2. ?. : 해당 객체가 undefined 이나 null이면 평가를 멈추고 undefined를 반환한다.

3. 옵셔널체이닝은 존재하지 않아도 괜찮은 대상에만 사용하는 것이 바람직하다.

4. ?.은 연산자가 아닌 특별한 문법 구조체(Sysnatx construct) 이다.

5. delete와 조합하여 사용 가능하다.
- delete user?.name

6. 읽기나 삭제에는 사용가능하지만, 쓰기에는 사용 불가능하다.
- user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment

7. 옵셔널 체이닝(?.) 사용방식 4가지
- obj?.prop : obj가 존재하면 prop 반환, 없으면 undefined 반환
- obj?.[prop] : obj가 존재하면 prop 반환, 없으면 undefined 반환
- obj?.method() : obj가 존재하면 method()호출, 아니면 undefined 반환
- obj.method?.() : obj의 메서드 method가 존재하면 메소드 실행, 아니면 undefined 반환