ES11 자주 사용하는 문법 정리

 옵셔널 체이닝 연산자(Optional chaining)

 

 ?. 는 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수있다.  ?. 연산자는  . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish(null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값을 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

 

 

 

 

 널 병합 연산자(Nullish coalescing operator)

 

널 병합 연산자( ?.)는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 논리 연산자 OR( || )는, 왼쪽 피연산자가 falsy값이면 반환된다. 즉, 만약 다른 변수 foo에게 기본 값을 제공하기 위해  || 을 사용하는 경우, flasy값( '' , 또는 0)을 사용하는 것을 고려했다면 예기치 않은 동작이 발생할 수 있다.

 

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

const joo = '' || 'default string';
console.log(joo);
// expected output: 'default string'

const zoo = 0 || 'hi';
console.log(zoo);
// expected output: 'hi';

 

 

 

 

 결론

 

자주 사용하는 ES11 문법이 더 있다면 댓글로 남겨주세요~! 

 

 

 

 

 출처

[옵셔널체이닝] - developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializerdeveloper.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

[널병합연산자] - developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parametersdeveloper.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator