꼭! 알아야하는 JavaScript 최신문법 (ES6, ES11) 사용법 정리 (2)

이번 포스팅에서는 자주 쓰이는 ES11 최신 문법 사용법에 대해 알아보겠습니다.

이전 포스트 자주쓰는 ES6 문법 사용법 정리(1)

ES11 2020

• Optional chainning
• Nullish coalescing operator

들어가기에 앞서 ES6 이후부터 추가된 많은 문법들이 익스플로러에서는 지원되지 않기 때문에 Babel을 이용해야 합니다.

1. Optional chainning

const person1 = {
  name: 'dan',
  job: {
    title: 'Engineer',
    manager: {
          name: 'Bob',
    },
  },
};


const person2 = {
  name: 'Bob'
}


// 💩💩💩💩
{
  function printManager(person) {
    console.log(person.job.manager.name);
  }

  printManager(perseon1); // Bob
  printManager(perseon2); // Error  
}

// ✨
{
  function printManager(person) {
    console.log(person.job?.manager?.name);
  }

  printManager(perseon1); // Bob
  printManager(perseon2); // undefined  

}

// 💩💩💩💩
코드블럭에 있는 코드처럼 작성하면 전달받은 객체에 해당 키가 없다면 error 가 나서 사용하지 못합니다
또는 해당 객체에 키가 있는지 확인하는 조건문을 작성해 주어야 하는데 이럴 때 Optional chainning을 사용합니다.

// ✨

console.log(person.job?.manager?.name); 코드의 의미는 perseon.job 이 있으면? manager가 있으면? name을 출력하는 식입니다. 해당 키가 없다면 undefined로 출력됩니다.

2. Nullish coalescing operator

처음에 이 문법을 봤을 때 OR 연산자와 의미가 비슷해서 헷갈렸었는데요.

 // Logical OR operator
 // false: false, '', 0, null, undefined

{
  const name = 'dan';
  const userName = name || 'Guest';
  console.log(userName);
}

OR 연산자는 앞의 값이 false 일 때만 뒤에('Guest') 것이 실행되는 성질을 가지고 있는데 현재 코드에서 name에 값이 들어있으므로 true가 반환되어서 결과 값은 'dan'으로 출력되는 걸 확인할 수 있습니다.

보통 or연산자는 값을 할당할 때 해당 값에 값이 설정되어 있는 여부를 확인하고 없다면 기본값을 설정해주기 위해 많이 사용합니다. 그런데 이러한 코드들은 버그를 유발할 수 있는 코드가 될 가능성이 높다고 하네요 예를 들면

// 💩
// ex1)
const name = '';
const userName = name || 'Guest';
console.log(userName);

// ex2)
const num = 0;
const message = num || 'undefined';
console.log(message);

ex1) 경우 name에 '' 이 할당되어 있는데 name은 false값으로 취급이 되어 Guest라는 값이 할당되게 됩니다.
만약 사용자가 이름을 사용하고 싶지 않아도 값이 할당되어 버리는 경우가 생기는 상황을 의미합니다.

ex2) 같은 경우 num을 0으로 할당했는데 false값으로 인식해 출력은 undefined로 출력이 되는 경우 의도치 않은 출력 값이 나오는 경우입니다.

OR연산자는 이러한 특징을 잘 알고 사용해야 합니다.

그래서 조금 더 명확하게 코딩하고 싶을 때는 Nullish coalescing operator를 사용합니다.

// ✨

// ex1)
const name = '';
const userName = name ?? 'Guest';
console.log(userName);

// ex2)
const num = 0;
const message = num ?? 'undefined';
console.log(message);

Nullish coalescing operator를 사용하면 값이 할당되어 있는지의 유무를 가지고 판단합니다.
ex1) 경우 name에 ''가 할당되어 있으니 userName은 ''로 빈 문자열이 출력이 됩니다.
ex2) 경우 num에 0 이 할당되어 있으니 message 출력은 0이 출력됩니다.
값이 할당되어 있지 않은 경우에만 뒤의 것이 실행됩니다.

지금 까지 ES11 최신 문법에 대해서 알아봤습니다.
오타나 틀린 내용이 있다면 댓글로 공유해주시면 감사합니다😊