자바스크립트 ES2022 중 일부기능만 훑어보기

ES2022의 신기능을 대충 정리해보았다. 아직 온전히 이해가 되지 않는 것들도 있고, 사용하면 정말 좋겠다는 것들도 있다. 하지만 옛 문법에 익숙하고, 현 시스템의 안정화를 위하여 이 문법들이 언제 일반화 되어 사용될지는 모르겠다. 그래도 분명한 것은 js는 계속해서 업그레이드 되고 있고, 그 흐름을 놓치지 말자는 것-!

 

---

 

top level await

js에서 프로미스를 더욱 쉽게 사용하기 위해 async-await 문법을 자주 사용하곤 했다. 이런식으로-!

async function () {
  await api();
}

async안에 await를 써야만 사용이 가능했는데, ES2022버전에서는 아주 심플하게 사용 방법이 바뀌었다.

await api();

async 하위에 들어가지 않더라도 await의 모듈만으로 동일한 기능이 가능해지며 코드가 훨씬 심플해졌다.

https://github.com/tc39/proposal-top-level-await

GitHub - tc39/proposal-top-level-await: top-level `await` proposal for ECMAScript (stage 4)

 

Error cause

error casue는 해석 그대로 오류의 발생 이유를 설명한다. 보통 이렇게 에러가 발생했다는 문구만 띄워줄 수 있던 현재의 방식에서

new Error("에러발생");

다음과 같이 발생 이유를 적을 수 있는 속성값이 추가되었다.

new Error("에러발생", { cause: "에러 발생 이유" });

또한 다음과 같이 그 이유를 콘솔로 프린트 할 수 있다.

console.log(err.message); // 기존에도 사용 가능
console.log(err.cause); // 새롭게 추가

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause

Error.prototype.cause - JavaScript | MDN

 

.at

.at은 배열에 접근할 때, 유용하게 사용 될 방법이다. 보통은 배열에 접근하기 위하여 다음과 같은 방법을 사용한다.

const arr = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ'];
console.log(arr[1]); // 'ㄴ'

이 코드를 .at을 적용시켜 표현하면 다음과 같다.

const arr = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ'];
console.log(arr.at(1)); // 'ㄴ'

.at의 사용방법은 매우 심플하나 상단의 활용에서는 굳이 .at을 사용하지 않아도 되어보인다. .at은 다음과 같은 상황에서 유용하다.

const arr = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ'];
console.log(arr.at(-1)); // 'ㅁ'

.at의 인자로 음수를 사용하게 되면 뒤에서부터 -1, -2, -3, -4, -5 순으로 계산을 해준다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/at

Array.prototype.at() - JavaScript | MDN

 

class fields

class fields는 JS에서 Private/static 메소드 및 속성을 사용할 수 있도록 해준다. 더불어 속성의 초기화를 위한 constructor의 사용도 불필요해진다. 사용방법의 포인트는 #에 있다.

기존의 사용 코드는

class Test {
  constructor() {
  	  this.message = 'hello world!';
    }
}

하단 코드와 동일한 의미를 가지고 있다.

class Test {
  	#message = 'hello world!';
}

더불어 하단처럼 사용하던 코드는

class Test {
  // 로직
}

Test.build() {
  // 로직
}

이렇게 사용하면 된다.

class Test {
  static build() {
    // 로직
  }
}

여기서 응용하여 다음과 같이 사용한다면 private 하게 사용이 가능하다.

class Test {
  static #build() {
    // 로직
  }
}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Public_class_fields

Class fields - JavaScript | MDN

 

 

참고 사이트

https://hyermione.tistory.com/13

[김민태] 02 JS 그리고 TS - Babel(바벨)이란?

https://www.youtube.com/watch?v=m-R7s7fnwvU