JavaScript-옵셔널 체이닝(optional chaining)

hannah·2023년 8월 7일
0

JavaScript

목록 보기
63/121
post-custom-banner

옵셔널 체이닝 ?.

앞에 있는 것이 참(truthy)인 값이면 뒤 코드를 실행하고, 거짓(falsy)인 값이면 코드를 통째로 undefined를 만들어버린다.

옵셔널 체이닝 ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
?.은 ?.'앞’의 평가 대상이 undefinednull이면 평가를 멈추고 undefined를 반환한다.

const obj = undefined;
const arr = undefined;
const func = undefined;
obj?.b;			//undefined
arr?.[0];		//undefined
func?.();		//undefined

객체나 배열뿐만 아니라 함수에도 옵셔널 체이닝을 적용할 수 있다. 속성에 접근하거나 호출하려는 것이 거짓인 값인지 아닌지 의심될 때 옵셔널 체이닝을 적용한다.

  • ?.앞의 변수는 꼭 선언되어 있어야 한다.
    예를 들어 user?.anything을 사용하려면 let이나 const, var를 사용해 변수 user를 정의해야 한다. 이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작한다.

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

  • ?.은 읽기나 삭제하기에는 사용할 수 있지만 쓰기에는 사용할 수 없다.

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

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

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

0개의 댓글