ES2020 7가지 새로운 팁

급진적으로 계속해서 쏟아져 나오고 있는 ES 버전들을 모두 리뷰 하기에는 많은 시간이 소모됩니다.

ES6(ES2015)를 시작으로 7, 8 계속 이어져오다가 정식 명칭을 아예 ES2020으로 연도를 붙이는 것으로 변경이 된 것 같습니다.

아시다시피 2015 년 ES6 이후로 Ecma International의 TC39에서 매년 ECMAScript의 새로운 버전을 출시합니다.

ECMAScript 2020은 ECMAScript 언어 사양의 11 번째 버전입니다.

이 새로운 반복에는 고유 한 새로운 기능이 포함되어 있습니다.

1. ‘globalThis’

• JavaScript 언어는 현재 매우 인기가 있으며 웹 브라우저에서 물론 다양한 환경에서 사용할 수 있지만 JavaScript는 서버 측, 스마트폰, 로봇 등에서 실행될 수도 있습니다. 특히 node에서도 사용하죠.
• 각 환경에는 전역 객체에 액세스하기위한 고유한 객체 모델 및 구문이 제공됩니다.
• 따라서 여러 환경에서 작동하는 JavaScript 코드를 작성하기가 어려울 수 있습니다.
• 웹 브라우저에서는 windows, node 환경에서는 global에 전역 객체가 담깁니다.

// browser environment
console.log(window);

// node.js environment
console.log(global);

// Service worker environment
console.log(self);
// ...

지금부터는 globalThis를 사용하세요.

2. ‘Promise.allSettled()’

• Promise.allSettled()는 모든 promise가 이행되거나 rejecte된 상태를 속성을 통해 각 promise의 결과를 설명하는 객체와 함께 resolve되는 promise를 반환합니다. 이를 통해 이행결과를 쉽게 필터링 할 수 있습니다.

const p1 = new Promise((res) => res("🍕"));
const p2 = new Promise((res, rej) => rej("🍍"));
const p3 = new Promise((res) => res("🍺"));
Promise.allSettled([p1, p2, p3]).then(data => console.log(data));
// [
//   { status: "fulfilled", value: "🍕" },
//   { status: "rejected", value: "🍍" },
//   { status: "fulfilled", value: "🍺" },
// ]

3. Nullish Coalescing 연산자 (??)

• null 값을 처리하는 방식으로 두 값 사이 ||로 표시되는 or 연산자와 다릅니다.
• 두 연산자를 비교하여 실제로 살펴 보도록하겠습니다.
• 기존에는 null이나 undefined외에도 0, '', NaN, false 등은 거짓으로 처리되었습니다.
• 이제 널 병합 연산자(??)를 사용하면 null과 undefined인 경우에만 거짓으로 처리됩니다.

const test = {
  null: null,
  number: 0,
  string: '',
  boolean: false
};
const undefinedValue = test.dog || "Cat"; // "Cat"
const undefinedValue = test.dog ?? "Cat"; // "Cat"
const nullValue = test.null || "Default"; // "Default"
const nullValue2 = test.null ?? "Default"; // "Default"
const numberValue = test.number || 1; // 1
const numberValue2 = test.number ?? 1; // 0
const stringValue = test.string || "Hello"; // "Hello"
const stringValue2 = test.string ?? "Hello"; // ""
const booleanValue = test.boolean || true; // true
const booleanValue2 = test.boolean ?? true; // false

4. 선택 체인 연산자 (?.)

• 지금까지는 객체 내부에 깊게 중첩 된 속성 값을 찾거나 객체 또는 null / undefined를 반환하는 API를 사용하는 경우 중간 값을 확인하기 위해이 방법으로 진행해야하는 경우가 종종 있습니다.

// 중간 노드가 있는지 체크
const deeplyNestedValue = obj && obj.prop1 && obj.prop1.prop2;

// 돔에 노드가 있는지 체크
const fooInputEl = document.querySelector('input[name=foo]');
const fooValue = fooInputEl && fooInputEl.value;

• 선택 체인 연산자를 사용하면 이러한 여러 사례를 보다 편리하게 처리 할 수 있습니다.
• 위의 예제를 다시 작성하면 다음과 같은 결과가 나타납니다.

// 중간 노드가 있는지 체크
const deeplyNestedValue = obj?.prop1?.prop2;

// 돔에 노드가 있는지 체크
const fooValue = document.querySelector('input[name=foo]')?.value;

• 저는 아폴로를 하다가 한번 접했던 것 같습니다.
• 다음과 같은 상황에서도 사용 가능합니다.

// 오직 a가 null이나 undefined가 아닐 경우에만 x를 증가시킵니다.
a?.[++x]

// 함수나 메서드 콜에서도 사용
func?.(...args)

5. BigInt

• JavaScript로 숫자를 나타내는 number가 이미 있습니다.
• 문제는 가장 큰 숫자는 2⁵³입니다.
• 그보다 더 이상 신뢰할 수 없습니다.

const x = Number.MAX_SAFE_INTEGER; // 9007199254740991
const y = x + 1; // 9007199254740992 • equal to 2^53
const z = x + 2; // 9007199254740992 • well, it's broken

• 다음과 같이 n만 붙여서 해결할 수 있습니다.

const aBigInteger = 9007199254740993n;
const evenBigger = BigInt(9007199254740994); // 9007199254740994n  
const fromString = BigInt("9007199254740995"); // 9007199254740995n

// 넘버로 변환할 순 없습니다.  
Number(900719925474099267n); // 900719925474099300 ..... -ㅁ-

6. Dynamic import

• import도 잘 못쓰는데 너무 성급한거 아닌가 싶을 수도 있습니다만..

// 함수로써 사용하면 import는 프로미스를 리턴합니다.

// 콜백에도 사용할 수 있고..  
import('/module.js')  
	.then((module) => {  
		// 이 모듈로 뭔가 해야할 때.. 사용  
	});

// async / await로써도 사용할 수 있습니다.  
async function () {  
	let module = await import('/modules.js');  
}

 

7. String.protype.matchAll

• matchAll() 메서드는 정규식 (RegExp)에 대해 문자열과 일치하는 모든 결과의 반복자를 반환하고 다음과 같이 작동합니다.

const regexp = RegExp('[a-z]*ball','g');
const str = 'basketball handball pingpong football';  
const matches = str.matchAll(regexp);

// 이것은 반복 연산자 이기 때문에 결과 값을 반복할 수 있습니다.  
let match = matches.next();  
while (!match.done) {  
  console.log(match.value);  
  match = matches.next();  
}

// ["basketball", index: 0, input: "basketb...", groups: undefined]  
// ["handball", index: 11, input: "basketb...", groups: undefined]  
// ["football", index: 29, input: "basketb...", groups: undefined]

// 모든 결과값을 배열에 한번에 담을 수도 있습니다.  
let results = [...str.matchAll(regexp)];

결론

이 모든 것들을 사용할 때는 바벨이 필요하겠죠??

@babel/plugin-proposal-nullish-coalescing-operator  
@babel/plugin-proposal-private-methods  
@babel/plugin-proposal-optional-chaining  
@babel/plugin-syntax-bigint  
@babel/plugin-syntax-dynamic-import

위 바벨과 함께 사용해야 프로젝트에서 사용할 수 있을 것입니다.

출처 : https://medium.com/better-programming/8-new-features-shipping-with-es2020-7a2721f710fb