정보실

웹학교

정보실

javascript 12 가지 간단한 예에서 12 가지 ES10 기능

본문

ES10은 2019 년에 해당하는 ECMAScript 버전입니다.이 버전에는 ES6 (2015)에 나타난 것만 큼 많은 새로운 기능이 포함되어 있지 않습니다. 그러나 몇 가지 유용한 기능이 통합되었습니다.


https://dev.to/carlillo/12-es10-features-in-12-simple-examples-2cbn 


이 기사에서는 쉬운 코드 예제에서 ES10이 제공하는 기능을 소개합니다. 이러한 방식으로 복잡한 설명 없이도 새로운 기능을 빠르게 이해할 수 있습니다.


물론, 가장 잘 소개 된 JavaScript를 완전히 이해하려면 JavaScript에 대한 기본 지식이 필요합니다.


ES2019의 새로운 #JavaScript 기능은 다음과 같습니다.


➡️ Array#{flat,flatMap}
➡️ Object.fromEntries
➡️ String#{trimStart,trimEnd}
➡️ Symbol#description
➡️ try { } catch {} // optional binding
➡️ JSON ⊂ ECMAScript
➡️ well-formed JSON.stringify
➡️ stable Array#sort
➡️ revised Function#toString
➡️ BigInt primitive type (stage 3).
➡️ Dynamic import (stage 3).
➡️ Standardized globalThis object (stage 3).
 



Array.flat() && Array.flatMap 


두 가지 새로운 Array 메소드가 있습니다.

  • Array.flat() 메서드는 모든 하위 배열 요소를 지정된 깊이까지 재귀적으로 연결하여 새 배열을 만듭니다.
  • Array.flatMap() 메서드는 먼저 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 새 배열로 병합합니다. 깊이 1의 flat() 다음에 오는 map()과 동일하지만, flatMap()은 종종 하나의 메소드로 병합하는 것이 약간 더 효율적이므로 매우 유용합니다.

0%2A2ZQaykVaSpXpQ-eV.png 


Object.fromEntries() 


키 및 값 쌍의 목록을 객체로 변환합니다.


0%2A7ZiVwWAx6gYXo0Y0.png 


String.protype.matchAll 


matchAll() 메소드는 그룹 캡처를 포함하여 정규 표현식에 대해 문자열과 일치하는 모든 결과의 반복자를 리턴합니다.


1%2AyWPj1hItw2AzySsiF84E5w.png 


String.trimStart() & String.trimEnd() 


문자열에서 공백을 제거하는 두 가지 새로운 String 메소드가 있습니다.

  • trimStart() 메서드는 문자열의 시작 부분에서 공백을 제거합니다.
  • trimEnd() 메서드는 문자열 끝에서 공백을 제거합니다.

0%2AFLro8G_45Z9imklk.png 


Symbol.Description 


새로운 Symbol 설명 접근자가 있습니다. Symbol을 만들 때 설명으로 문자열을 제공 할 수 있습니다. ES10에는 이 속성에 대한 접근자가 있습니다.


0%2Ac0n5PxZ0f15B1EXw.png 



Optional Catch Binding 


try / catch 문의 과거 catch 절에는 변수가 필요했습니다. 이제 개발자는 사용하지 않는 바인딩을 만들지 않고 try / catch를 사용할 수 있습니다.


0%2AKjmJwEXVGbUmWY5u.png 


JSON⊂ECMAScript 


ES10 이전 버전에서는 이스케이프 처리되지 않은 줄 구분 기호 U + 2028 및 단락 구분 기호 U + 2029 문자를 사용할 수 없습니다.

  • U+2028 is the paragraph separator.
  • U+2029 is the line separator.

0%2AjM-ppo6G0oXcWoPr.png 


Well-formed JSON.stringify() 


JSON.stringify()는 U + D800과 U + DFFF 사이의 문자를 동등한 UTF-8 문자가 없는 값으로 리턴 할 수 있습니다. 그러나 JSON 형식에는 UTF-8 인코딩이 필요합니다. 제안 된 솔루션은 짝을 이루지 않은 대리 코드 포인트를 단일 UTF-16 코드 단위로 반환하지 않고 JSON 이스케이프 시퀀스로 표시하는 것입니다.


0%2A4GIVAxh2WcSXUrFE.png 


Stable Array.prototype.sort() 


V8의 이전 구현에서는 10 개가 넘는 항목을 포함하는 배열에 불안정한 빠른 정렬 알고리즘을 사용했습니다.


안정적인 정렬 알고리즘은 동일한 키를 가진 두 개의 객체가 정렬되지 않은 입력에 나타나는 것과 동일한 순서로 정렬 된 출력에 나타나는 경우입니다. 


0%2ABiSFuQWnrOGXz-ZI.png 


새로운 Function.toString() 


toString() 메소드는 함수의 소스 코드를 나타내는 문자열을 리턴합니다. ES6에서 함수에서 toString을 호출하면 ECMAScript 엔진에 따라 해당 함수의 문자열 표현이 반환됩니다. 가능하면 소스 코드를 반환하고 그렇지 않으면 표준화 된 자리 표시 자입니다.


0%2ACchEwTj5D7za_WLp.png 


BigInt — Arbitrary precision integers 


BigInt는 7 번째 기본 유형이며 임의 정밀도 정수입니다. 변수는 이제 9007199254740992에서 최대 값이 아닌 ²⁵³ 숫자를 나타낼 수 있습니다.


0%2AU4v7rbd23tcBOyCe.png 


Dynamic import 


Dynamic import()는 요청 된 모듈의 모듈 네임 스페이스 객체에 대한 약속을 반환합니다. 따라서 이제 async / await를 사용하여 가져 오기를 변수에 할당 할 수 있습니다.


0%2A9-pdI0pKfGDfvQBy.png 


Standardized globalThis object 


global this는 ES10 이전에는 표준화 되지 않았습니다. 프로덕션 코드에서는 this monstrosity을 작성하여 여러 플랫폼에서 이를 "표준화"합니다.


0%2ALxkj4TR9_s8Oqe_A.png 


결론 


JavaScript는 라이브 언어이며 웹 개발에 매우 ​​건강합니다. 2015 년에 ES6이 등장한 이후로 우리는 언어의 역동적인 진화를 경험하고 있습니다. 이 글에서는 ES10 (2019)에서 발생하는 기능을 검토하고 상태 3에 있기 때문에 ES11 (2020)에서 안정적이고 일부 개정판에 대해 표준화 될 예정인 기능을 소개했습니다.


이러한 기능 중 많은 기능이 웹 응용 프로그램 개발에 반드시 필요한 것은 아니지만 트릭이나 세부 정보를 사용하여 이전에 달성 할 수 있는 가능성을 제공합니다.





페이지 정보

조회 48회 ]  작성일19-10-02 15:33

웹학교