[review] The Top 3 New JavaScript ES2021(ES 12) Features I'm Excited About

https://medium.com/better-programming/the-top-3-new-javascript-es-2021-es-12-features-im-excited-about-a3ac129efbb2

The Top 3 New JavaScript ES 2021 (ES 12) Features I’m Excited About

 

논리적 할당 연산자

// old way
if (!a) { a = b }

// new way
a ||= b

a가 true 일 경우 a 반환, false 일 경우 b 반환

// old way
if (a) { a = b }

// new way
a &&= b

a가 true 일 경우 b 반환, false 일 경우 a 반환

// old way
if (a) { a = b }

// new way
a &&= b

a가 null or undefined 일 경우 b 반환, true 일 경우 a 반환

 

Promise

(저자는 promise.any만 언급했으나 전체적인 개념을 다루기로 함)

 

대기(pending) : 이행(fulfilled)되거나 거부(rejected)되지 않은 초기 상태

이행(fulfilled) : 성공적으로 완료된 상태

거부(rejected) : 실패한 상태

처리(settled) : 대기 중이지 않으며 이행되거나 거부되었을 때

 

Promise prototype

fetch('https://api.github.com/users')
	.then(data => console.log('data : ', data))
	.catch(error => console.error('error : ', error))
	.finally(() => console.log('Finally..!'));

Combinatores

Promise.all : 모든 promise가 이행되거나, 하나라도 거부되었을 때 promise 객체를 반환

const promises = [
  fetch('/api/a').then(()=>'a'),
  fetch('/api/b').then(()=>'b'),
  fetch('/api/c').then(()=>'c'),
];

try {
  const apiResponses = await Promise.all(promises);
  // 모든 프로미스가 fullfilled되면..
  renderNewData(apiResponses);
} catch(error) {
  displayError(error.reason);
}

Promise.race : 가장 먼저 처리된 promise를 잡아내고 싶을 때 사용

//예시 1
const promises = [
  performVeryHeavyLogic(),
  rejectByForceAfterTimeoutMs(5000)
];

try {
  const result = await Promise.race(promises);
  // performVeryHeavyLogic()이 완료되면,
  renderResult();
} catch(error) {
  //rejectByForceAfterTimeoutMs()로 인해 5s 이상 지나거나 에러가 발생하면,
  renderError(error);
}

//예시 2
Promise.race([
  fetch('https://api.github.com/users/schacon').then(data => data.json()),
  fetch('https://api.github.com/users/pjhyett').then(data => data.json())
])
  .then(data => console.log(`${data.name}가 먼저 도착했어요!`))
  .catch(error => console.error('error : ', error));

Promise.allSettled : 모든 promise가 처리된 경우, 즉 모든 프로미스가 이행되거나 거부되었을 때 promise 객체를 반환

const promises = [
  fetch('/api/a').then(()=>'a'),
  fetch('/api/b').then(()=>'b'),
  fetch('/api/c').then(()=>'c'),
];
// 일부는 이행(fullfilled)되고 일부는 거부(rejected)되었더라도

await Promise.allSettled(promises);
// allSettled는 오직 처리(settled)되었는지만 확인합니다.
removeLoadingIndicator();

Promise.any : 여러 promise 중 단 하나의 promise가 이행되면 promise 객체를 반환. 이행만 취급!

const promises = [
  fetch('/api/a').then(()=>'a'),
  fetch('/api/b').then(()=>'b'),
  fetch('/api/c').then(()=>'c'),
];

try {
  const first = await Promise.any(promises);
  // 가장 먼저 이행(fullfilled)된 프로미스
  console.log(first);	// ex: 'c'
} catch(error) {
  // 모든 프로미스들이 거부(rejected)되어야지만,
  console.error(error);
}

 

Numeric Separators

숫자 '천' 단위로 underscore(_)를 삽입해 코드를 더욱 읽기 쉽게 만들 수 있다

amount = 1_000_000
amount2 = 841_345_753

 

Conclusion

자바스크립트가 시간이 지날수록 문법도 조금씩 바뀌어가고, 더 편리한 기능들이 추가된다는 것을 알았다. 그동안 너무 고전 자바스크립트 공부에만 목매지 않았나... 라는 생각이 들었다. 어차피 내가 실무에서 쓸 것은 최신 문법이니 최근 글을 많이 읽고, ES6 등의 문법을 사용해 코딩하는 습관을 들여야겠다. 무작정 인터넷에 참고한 내용을 그대로 따라하지 말기!

* promise는 따로 자세하게 다뤄보는 게 좋을 것 같다.