[JavaScript] ES2020(ES11) 미리 살펴보기.

JavaScript는 그 어떤 프로그래밍 언어보다 빠르게 변화하며, 그간 부족했던 부분들을 보충하고 있다.

하지만 새로운 기능이 등장할 수록 각 프로그래밍 언어들의 세부적인 특징들 중, 공통적인 부분들이 많아지고 있지 않나 하는 생각도 들게 된다.

ES2020(ES11)의 신규 기능들은 Chrome 79 버전에 탑재된 기능들로 현재 크롬 콘솔에서 쉽게 테스트가 가능하다.

 

Private Class Variables

Class 기반의 프로그래밍 언어들과 달리 JavaScript의 경우 Class 문법을 공식적으로 차용한 지 얼마되지 않았기 때문에 Class 문법을 사용할 때 부족한 부분들이 조금씩 느껴지기는 했다.

그 중 ES2020에서는 Private Class 변수가 신규로 도입되었다.

Class Apple {
	#price = 1000;
    totalPrice() {
    	console.log( 20 * this.#price )
    };
}

const fruits = new Apple();
fruits.totalPrice() 	// 20000

console.log(fruits.#price)
// Uncaught SyntaxError: Private field '#born' must be declared in an enclosing class

Java의 경우 변수명 앞에 Private을 명시적으로 기록할 경우, Private Variable로 인식하게 되고 TypeScript에서도 Java와 같은 기능을 제공하고 있었다.

Vanilla JavaScript에서도 외부에서 접근할 수 없는 Class 내의 private 변수 기능을 제공하게 되었으니, Class 내의 변경불가능한 정보 등 변수에 대한 접근 제어가 가능해졌다.

 

Promise.allSettled

ES6에서 제공된 Promise.all에 이어서 ES11에서는 Promise.allSettled 메소드가 추가되었다.

Promise.all 메소드는 promise 객체 중에서 reject가 발생된 경우, 즉시 Promise.all 메소드가 종료되는 것에 반해, Promise.allSettled는 메소드의 네이밍과 동일하게 promise객체의 반환값과 무관하게 모든 promise 객체의 결과 값에 대한 처리가 종료될 때 까지 기다린다.

const firstPromise = new Promise((resolve, reject) => 
	setTimeout(resolve, 3000)
);

const secondPromise = new Promise((resolve, reject) =>
	setTimeout(reject, 3000)
);

Promise.allSettled([firstPromise, secondPromise])
	.then(data => console.log(data))
Promise {<pending>}

// (2) [{...}, {...}]
// 0: {status: "fulfilled", value: undefined}
// 1: {status: "rejected", reason: undefined}
// length: 2

Promise.allSettled에서는 위의 예시와 같이 입력된 promise객체들의 처리 결과를 저장한 또 다른 Promsie 객체를 반환하게 된다.

 

Optional Chaining Operator

JavaScript의 Object에 대해서 key값으로 특정 value값을 조회하는 방법이 있다.

const result = {
  data: {
    	idx: 1
    }
}
console.log(result.data.idx) // 1

const result = {
  error: {
    	msg: 'error'
    }
}
console.log(result.data.idx) // Cannot read property 'idx' of undefined

일반적으로 첫번째 예시와 같이 모든 key 값이 있는 경우에 한하여 원하는 값을 얻을 수 있다.

하지만 Object 내에 특정 Key가 존재하지 않는다면, 두 번째 예시와 같은 에러가 발생하며, 일반적인 경우 JavaScript 개발자들은 result 변수 아래에 data라는 값이 있는지 확인하고, data가 있을 경우 그 다음 조건을 조회하는 조건문이 추가된다.

const logger = result.data ? result.data.idx : undefined;

하지만 우리는 협업을 하는 개발자이며, 어떻게 하면 if문을 쓰지 않고, 어떻게 하면 code line을 줄일 수 있을지 고민하는 개발자이다.

이러한 기대와 목적에 의해 나온 것이 Optional Chaining Operator이다.

 

const logger = (result) => {
  console.log(result?.data?.idx);
}

const result1 = {
  data: {
    	idx: 1
    }
}

const result2 = {
  error: {
    	msg: 'error'
    }
}

logger(result1) // 1
logger(result2) // undefined

dot notation을 사용하기 전에 ?를 사용하여 Optional Chaining 문법을 적용하였다.

result1에 대한 결과는 위의 예시와 동일하지만, result2의 결과는 다르다. 에러가 발생하지 않았다.

 

주어진 result2 객체에 data가 있는지 확인하여, 있으면 그 다음 dot notation에 따라 idx 값을 조회하고, 없는 경우 undefined가 리턴된다.

ES11에 등장한 새로운 문법 중에서 가장 편리한 문법이지 않나하는 생각이 든다.

 

Dynamic Import

기존에 module을 import하기 위해서는 해당 코드의 Top Level에서 Import 문법을 통해 특정 모듈의 값을 호출하는 것이 필요했다.

하지만, Dynamic Import가 도입됨에 따라 import 문법은 모듈을 불러온 뒤, promise 객체를 반환하여 해당 모듈의 내용(값)을 사용할 수 있도록 하였다.

이로써 Top Level이 아닌, 코드의 원하는 일부에서만 import가 가능하기 때문에 성능 상의 이점을 달성할 수 있는 장점이 생겼다.

---

ES2020의 모든 내용을 전부 짚어본 것은 아니며, 특징적이고 가장 필요로 여겨졌던 부분이라 생각되는 것들에 대한 사용법과 특징들만 우선적으로 선별해봤다.

새로운 문법은 점점 코드 작성을 편리하게 해준다는 점에서 큰 장점이 있고, JavaScript 내에서 갖고 있는 한계를 보완해줄 수 있다는 점에서 꾸준한 관심을 통해 신규 기능을 적절히 활용하는 것은 좋은 습관이라 생각한다.