ES2022가 가져온 모든 새로운 것들
This article was originally posted on my blog. Head over to inspiredwebdev.com for more articles and tutorials. Check out my JavaScript course on Educative to learn everything from the basics to ES2022.
2015년 이후 매년
JavaScript마다 규범을 끊임없이 갱신하고 새로운 흥미로운 기능을 추가한다.이 글에서 우리는 다음에 무슨 일이 일어날지 볼 것이다. 왜냐하면 많은 특성들이 이미 4단계에 이르렀고 규범에 포함될 것이다.
모르는 사람에게 제안 과정은 4단계로 나뉘고 4단계는 마지막 단계로 제안의 완성을 상징한다.
개발자로서 한 언어의 새로운 규범을 끊임없이 갱신하는 것은 매우 중요하다. 만약에 당신이 지난 몇 년
JavaScript에 받은 많은 갱신에 뒤떨어졌다고 생각한다면 나는 당신에게 나의 책을 추천할 수 있다. 이것은 언어 기초부터 최신 ES2022 규범에 이르기까지 모든 내용을 포함하고 TypeScript에 대한 소개를 포함한다.너는 Github에서 무료로 읽을 수도 있고, 거기에서 전자책을 구매하는 링크를 찾을 수도 있고, Educative에서 나의 수업을 볼 수도 있다.이제 ES2022의 첫 번째 새로운 기능을 시작하겠습니다.
클래스 필드
클래스 공공 실례 필드와 개인 실례 필드
ES2022에 앞서 it
class에서 aconstructor의 속성을 다음과 같이 정의합니다.class ButtonToggle extends HTMLElement {
constructor(){
super();
// public field
this.color = 'green'
// private field
this._value = true;
}
toggle(){
this.value = !this.value
}
}
const button = new ButtonToggle();
console.log(button.color);
// green - public fields are accessible from outside classes
button._value = false;
console.log(button._value);
// false - no error thrown, we can access it from outside the class
constructor에서 우리는 두 필드를 정의했다.보시다시피 한 필드의 이름 앞에 _가 표시되어 있습니다. 이것은 단지 JavaScript 이름 약정일 뿐입니다. 필드를 private로 표시하는 데 사용되며, 이것은 class 방법으로만 내부적으로 접근할 수 있음을 의미합니다.물론, 이것은 언어 자체가 강제로 실행하는 것이 아니라, 우리가 그것을 방문하려고 할 때 아무런 오류도 일으키지 않는 이유이다.ES2022에서는
public 및 private 필드를 보다 쉽게 설명할 수 있습니다.이 업데이트의 예를 살펴보겠습니다.class ButtonToggle extends HTMLElement {
color = 'green';
#value = true;
toggle(){
this.#value = !this.#value;
}
}
const button = new ButtonToggle();
console.log(button.color);
// green - public fields are accessible from outside classes
// SyntaxError - cannot be accessed or modified from outside the class
console.log(button.#value);
button.#value = false;
constructor에서 그것들을 정의할 필요가 없다는 것이다.그 다음에 우리는 필드 이름에 대해 미리 마운트private를 해서 # 필드를 정의할 수 있다.이전 예시와 주요한 차이점은, 만약 우리가 클래스 밖의 필드에 접근하거나 수정하려고 한다면, 이번에는 실제 오류가 발생할 것이다.
JavaScript 클래스의 개인 방법 및 Getter/setter
이전 예시와 유사합니다. 클래스 정의
private 방법과 Getter/setter를 사용할 수 있습니다.class ButtonToggle extends HTMLElement {
color = 'green'
#value = true;
#toggle(){
this.#value = !this.#value
}
set #setFalseValue(){
this.#value = false;
}
}
const button = new ButtonToggle();
// SyntaxError - cannot be accessed or modified from outside the class
button.#toggle();
// SyntaxError - cannot be accessed or modified from outside the class
button.#setFalseValue;
toggle()를 #toggle()로 바꾸어 toggle 방법private을 class으로만 내부적으로 접근할 수 있도록 할 것이다.정적 클래스 필드와 개인 정적 방법
static 필드나 방법은 원형에서만 접근할 수 있고 class의 모든 실례에서 접근할 수 없습니다. ES2022는 static 키워드 정의static 필드와 static 공공/사유 방법을 사용하는 방법을 제공합니다.이전에 우리는
class 주체 밖에서 그것들을 정의해야 한다. 예를 들어 다음과 같다.class ButtonToggle extends HTMLElement {
// ... class body
}
ButtonToggle.toggle(){
// static method define outside of the class body
}
class 키워드를 사용하여 본문에서 해당 키워드를 직접 정의할 수 있습니다.class ButtonToggle extends HTMLElement {
#value = true;
static toggle(){
this.#value = !this.#value
}
}
// this will work
ButtonToggle.toggle();
// SyntaxError - private static field
const button = new ButtonToggle();
button.toggle();
static 에 접근할 수 있지만, 우리는 그것의 새로운 실례에서 같은 조작을 할 수 없다.필드와 방법(사유와 공공) 앞에서
toggle() 키워드를 사용할 수 있습니다. 이를 ButtonTogglestatic#와 조합하면 원형private으로만 내부적으로 접근할 수 있는private static 방법을 만들 수 있습니다.class ButtonToggle extends HTMLElement {
#value = true;
static #toggle(){
this.#value = !this.#value
}
}
// this will error, it's a private static method
ButtonToggle.#toggle();
개인장소의 인체공학 브랜드 검사
위의 예에서 보듯이, 만약 우리가
class 필드 이외의 private 필드에 접근하려고 한다면, 이것은 이상을 던지고, 접근 class 필드처럼 되돌아오지 않을 것이다. undefined우리는 public에서 간단한 try/catch를 사용하여 필드가 존재하는지 확인할 수 있다.class ButtonToggle extends HTMLElement {
// initialised as null
#value = null;
get #getValue(){
if(!this.#value){
throw new Error('no value');
}
return this.#value
}
static isButtonToggle(obj){
try {
obj.#getValue;
return true;
} catch {
// could be an error internal to the getter
return false;
}
}
}
classprivate를 추가했는데, 값이 없으면 오류가 발생합니다.그리고 우리는 getter 방법을 만들어서 static 방문했고, 검사 getter 를 통해 그것이 존재하는지 확인하려고 시도했다.문제는 실행 try/catch 의 코드가 catch 존재하지 않기 때문인지, 단지 오류가 발생했기 때문인지 모른다는 것이다.ES2022는 연산자
getter를 사용하여 상기 필드가 aclass에 속하는지 검사하는 간단한 방법을 제공합니다.예제 코드를 다시 작성해 보겠습니다.class ButtonToggle extends HTMLElement {
// initialised as null
value = null;
get #getValue(){
if(!this.#value){
throw new Error('no value');
}
return this.#value;
}
static isButtonToggle(obj){
return #value in obj && #getValue in obj
}
}
in은 isButtonToggle 필드'value'와'getValue'를 포함하는지 검사할 것입니다.클래스 정적 블록
이것은 ES2022의
class 필드에 대한 또 다른 업그레이드입니다. 이것은 클래스 내부에 private 블록을 보유할 수 있도록 합니다.본고가 해결하고자 하는 문제는 이러한 사실에서 비롯된다. 즉, 우리는 초기화 기간static과 같은 문장에 대해 값을 구할 수 없다. 이것은 우리가 이 코드를 static 주체 외에 두어야 한다는 것을 의미한다.class ButtonToggle{
value = false;
get getValue(){
if(!this.#value){
throw new Error('no value');
}
return this.#value
}
}
// this has to sit outside of the class body
try {
const val = ButtonToggle.getValue;
ButtonToggle.value = val
} catch {
ButtonToggle.value = false
}
try/catch는 반드시 class 몸의 바깥쪽에 두어야 합니다.고맙게도 우리는 그것을 try/catch 블록으로 바꿀 수 있다. 아래와 같다.// method defined outside of the class body
let initVal;
class ButtonToggle{
#value = false;
get getValue(){
if(!this.#value){
throw new Error('no value');
}
return this.#value
}
static {
initVal = () => {
this.#value = this.getValue;
}
}
}
initVal();
class의 내부에 static 블록을 만들었는데, 이것은 우리가 static 상하문 밖에서 설명한 함수를 정의했다.보시다시피 이 방법은 "#value"에 접근합니다. 이것은 class 필드나 저희 클래스입니다.그들은 class 방법과 필드, 즉 private(비private, instance-private 또는 static를 방문할 수 있다.정규 표현식 일치 인덱스
이 업그레이드는 RegExp와 일치하는 항목의 인덱스 (시작과 끝) 를 지정하기 위해
private 문자를 사용할 수 있도록 합니다.우리는
static-private 또는 d 를 사용하여 일치하는 목록을 찾을 수 있는데, 그것들의 주요 차이점은 Regexp.exec 하나하나가 결과를 되돌려주고 String.matchAll 교체기를 되돌려주는 것이다.이를 통해 다음과 같은 이점을 얻을 수 있습니다.const fruits = 'Fruits: mango, mangosteen, orange'
const regex = /(mango)/g;
// .exec
RegExp(regex).exec(fruits);
// [
// 'mango',
// index: 8,
// input: 'Fruits: mango, mangosteen, orange',
// groups: undefined
// ]
// matchAll
const matches = [...fruits.matchAll(regex)];
matches[0];
// [
// 'mango',
// 'mango',
// index: 8,
// input: 'Fruits: mango, mangosteen, orange',
// groups: undefined
// ]
const fruits = 'Fruits: mango, mangosteen, orange'
// /gd instead of the previous /g
const regex = /(mango)/gd;
const matches = [...fruits.matchAll(regex)];
matches[0];
// [
// "mango",
// "mango",
// groups: undefined
// index: 8
// indices:[]
// [8, 13],
// [8, 13]
// ]
// groups: undefined
고위층 대기
"
Regexp.exec 연산자는 String.matchAll 방법에서만 사용할 수 있습니다."이것은 자주 발생하는 오류일 수 있습니다.ES2022에서는 모듈await 방법의 상하문 밖에서 사용할 수 있습니다.예를 들어 다른 내용을 가져올 때까지 모듈과 부모 모듈의 실행을 연기할 수 있습니다.이것은 종속 항목의 동적 경로가 런타임 값에 종속될 때 유용한 경우가 많습니다.
// we need to get the appropriate translation keys based on the language
const translationKeys = await import(`/i18n/${navigator.language}`);
let jQuery;
try {
jQuery = await import('https://cdn-a.com/jQuery');
} catch {
jQuery = await import('https://cdn-b.com/jQuery');
}
에서
async에서는 async의 인덱스 1에 접근할 수 있지만 JavaScriptarr[1]의 끝에서 밑으로 세면 안 된다.네모난 괄호 문법은 수조뿐만 아니라 대상에도 사용되는데 그 중에서 Array는 arr[-1]의 속성'-1'만 가리킨다.이걸로
Array 방법 우리는 현재 수조와 문자열의 양색인이든 음색인이든 모든 색인에 접근하는 간단한 방법을 가지고 있다.const arr = [10,20,30,40];
// same -> 10
arr[1];
arr.at(1);
// same -> 40
arr[arr.length -1];
arr.at(-1);
객체에 액세스할 수 있습니다.원형소유 재산
obj[-1]에서 우리는 이미 Object를 가지고 있지만 MDN 문서에서 건의한 바와 같이 원형 자체에서 사용하지 않는 것이 좋다at(). 보호된 속성이 아니기 때문에 JavaScript는 Object.prototype.hasOwnProperty라는 속성이 있을 수 있다는 것을 의미한다. 이것은 hasOwnProperty와는 무관하다.예를 들면 다음과 같습니다.
const obj = {
hasOwnProperty:()=> {
return false
}
}
obj.hasOwnProperty('prop'); // false
object을 정의했습니다. 이 방법은 원형의 방법을 덮어썼습니다. 이것은 hasOwnProperty에 존재하지 않는 문제입니다.Object.prototype.hasOwnProperty는 우리의 hasOwnProperty를 첫 번째 매개 변수로 하고 검사할 속성을 두 번째 매개 변수로 한다.const student = {
name: 'Mark',
age: 18
}
Object.hasOwn(student,'age'); // true
Object.hasOwn(student,'grade'); // false
당신이 가장 시도하고 싶은 기능은 무엇입니까?아래에 평론을 남기다.
기초 지식부터 ES2022까지 자바스크립트의 모든 지식을 배우고 싶다면 제 책Github을 보세요.한 과목 더 있어요Educative
Reference
이 문제에 관하여(ES2022가 가져온 모든 새로운 것들), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/albertomontalesi/everything-new-coming-in-es2022-eil텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
