ES10, ES2020 간단하게 알고가기
ES2019(ES10)의 변화
Object.fromEntries
-
Object.entries의 반대 기능
-
Object.entries는 객체를 2차원 배열로 만들어준다.
-
-
2차원 배열을 객체로 만들어준다.
-
배열말고 Map같은 것도 지원
Array.prototype.flat
Array.prototype.flatMap
-
다중 배열을 펼치는 기능
-
기본 1단계 펼침
-
숫자 인수를 넣어 몇 번 연달아 펼칠치 결정 가능
String.prototype.trimStart
String.prototype.trimEnd
String.prototype.trimLeft
String.prototype.trimRight
-
공백 제거 가능
-
하위호환을 위해 같은 역할을 하는 메서드를 두개 만들었다고 한다
Optional Catch
-
catch 매개변수를 쓰지 않는 경우 error 생략해도 된다.
기타
-
유니코드
-
JSON, toString 개선
-
Symbol에 description 속성이 생겼다. - 어떤 심볼을 사용했는지 알아낼 수 있게 되었다.
ES2020의 변화
matchAll
-
.exec와 비슷
-
문자열에서 일치하는 정규표현식을 iterator 형식으로 반환
-
캡쳐링 그룹도 결과로 반환
-
/g를 사용해야 에러가 발생하지 않음
BigInt
-
큰 숫자의 표현, 처리 가능
-
숫자로 변환할 수는 없다.
-
같은 BigInt 끼리 계산해야 에러가 발생하지 않음
-
소수점은 표현하지 못함
-
숫자와의 타입체크 시 다르게 인식해서 (===) 불가, 일반 숫자 비교는 가능
Promise.allSettled
-
Promise.all은 하나만 실패해도 catch로 이동했다.
-
하지만 allSettled는 여러 프로미스에서 개별적으로 성공 여부를 알려준다.
-
실패 시 개별 처리 가능
-
globalThis
-
런타임에 따라서 window, global로 나뉘었는데 하나로 통일하여 사용가능
-
브라우저에서 globalThis는 window
-
노드에서는 globalThis는 global
-
기존의 window, global은 존재한다.
-
Optional Chaining
-
?. 로 사용한다.
-
해당 값이 존재하지 않으면 undefined가 된다.
-
해당 값이 존재하면 조건문을 실행할 수 있다.
if (a) {
if (a.b) {
console.log(a.b.c);
}
}- ?. 연산자 사용
console.log(a.b?.());
Nullish Coalescing
-
??로 사용한다.
-
null 값을 처리하는 방식으로 || 로 표시되는 or 연산자와는 다르다.
-
null과 undefined인 경우 거짓으로 처리 가능
-
기존에는 0, NaN, '', false 등도 거짓으로 처리했었다.
-
Dynamic import
-
함수로 사용하면 import는 프로미스를 리턴한다.
-
콜백, async / await에서도 사용가능
ES2019(ES10)의 변화
https://www.zerocho.com/category/ECMAScript/post/5c909bfe5a8005001ffb3f14
ES2020의 변화
https://www.zerocho.com/category/ECMAScript/post/5eae7480e70c21001f3e7956
ES2020 7가지 새로운 팁
https://frontdev.tistory.com/entry/ES2020-7%EA%B0%80%EC%A7%80-%EC%83%88%EB%A1%9C%EC%9A%B4-%ED%8C%81