[JavaScript] Optional chaining ES11

bbio3o·2021년 2월 7일
0

JavaScript

목록 보기
6/13
post-thumbnail

Object내에 Nesting 되는 nullish(null || undefined) 한 값의 null 체크가 계속 필요한데, 이를 Optional chaining을 이용해 해결 가능하다.

만약 앞의 참조하는 값이 nullish(null 또는 undefined)일 경우 에러가 발생하는 대신 undefined를 리턴해준다.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

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

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

optional chaining 연산자는 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.

예를 들어, 중첩된 구조를 가진 객체에서 obj가 있다. optional chaining이 없이 깊이 중첩된 하위 속성을 찾으려면, 다음과 같이 참조를 확인해야 한다:

let nestedProp = obj.first && obj.first.second;

. 대신에 ?. 연산자를 사용함으로써, 자바스크립트는 obj.first.second에 접근하기 전에 obj.first가 null 또는 undefined가 아니라는 것을 암묵적으로 확인하는 것을 알고 있다. 만약 obj.first가 null 또는 undefined이라면, 그 표현식은 자동으로 단락되어 undefined가 반환된다.

let nestedProp = obj.first?.second;

optional operator를 사용하지 않는다면,
아래와 같이 써야한다.

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


주의해야 하는 점은

// case1

const info = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
}

------------------------------------------------------------------------

// optional chaining
1. console.log(info.dog.name) // 'name' of undefined
2. console.log(info?.dog.name) // 'name' of undefined

3. console.log(info.dog?.name) // undefined

------------------------------------------------------------------------

// lodash의 get
1. console.log(get(info, 'dog.name')) // undefined

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

하지만 optional chaining의 2번의 경우처럼 앞의 대상에 ?.를 정의 하였다고 해서 하위까지 확장 되지는 않는다.

?.의 앞에 평가대상이 꼭 존재하지 않아도 될 때 사용해야한다.

MDN
참조

profile
그림도 그리는 개발자 🎨👩‍💻

0개의 댓글