[JavaScript] Optional Chaining `?.`

2weeks0·2022년 5월 16일
0

JavsScript

목록 보기
15/25
post-thumbnail

?.

  • Optional Chaining ?.을 사용하면 값이 없는 중첩 객체를 안전하게 접근할 수 있다.
  • kotlin, dart에서의 null-safety와 같은 맥락같다.
  • 어떤 상황에서 사용하는지 알아보자.
let student = {};

console.log(student.score.math); // TypeError: Cannot read properties of undefined (reading 'math')  
  • 위와 같이 어떠한 객체 안에 존재하지 않은 프로퍼티를 참조하면 에러가 발생한다.
  • 이 때, 에러 없이 안전하게 접근하기 위해 null 이거나 undefined일수도 있는 객체 뒤에 ?.를 붙여준다.
let student = {};

console.log(student.score?.math); // undefined  
  • 즉, student 객체에 score 프로퍼티가 있다면 score 프로퍼티의 math 프로퍼티를 참조하겠다는 뜻이다.

단락 평가 (short-circuit)

  • ?.||, && 연산자와 마찬가지로 왼쪽 값이 없으면 즉시 평가를 멈춘다.
  • 즉, ?. 왼쪽 값이 null 또는 undefined라면 오른쪽에 있는 평가는 진행되지 않는다.
let sayHello = () => console.log("Hello~");
let data = {
    sayHello
};

data?.sayHello(); // Hello~

data = null;
data?.sayHello(); // 아무 동작이 없다.

?.()?.[]

  • ?.은 연산자가 아니다.
  • 따라서, ?. 뒤에 ()를 붙여 함수를 실행시키거나, []를 붙여 프로퍼티에 접근할 수 있다.
let sayHello = () => console.log("Hello~");
let data = {
    name: "이름",
    sayHello
};

console.log(data?.["name"]); // 이름
data.sayHello?.(); // Hello~

delete data.sayHello;
data.sayHello?.(); // 아무 동작이 없다.
profile
필기맨

0개의 댓글