ES6(ES2015) 이후의 변경점(ES2015~ES2023)

ES5(2009년)가 등장하고 ES6(2015)에서 큰 변화를 겪은 다음, ECMA는 매년 새로운 자바스크립트 표준을 발표합니다. 추가된 내용 중 일부는 이미 사용하고 있지만, 정리하는 시간을 가져보며 어떤 것들이 추가되었는지 나열해 보려고 합니다.

https://github.com/orgs/tc39/repositories에서 proposal에 대해 확인가능하니 관심이 있으시면 보시는 것도 좋을 것 같습니다.

ES2015

let, const
arrow function

object/array destructing

const obj = { objName: 'seungdeok' };
const { objName } = obj;

const arr = ['seungdeok'];
const [arrName] = arr;

spread operator

const arr = [1,2,3];
const max = Math.max(...arr);

for/of loop

const obj = { key1: 1, key2: 2 };
for (const item of obj) {} // Uncaught TypeError: obj is not iterable

const map = new Map();
map.set('key', 1);
for (const item of map) {} // ['key', 1]

const arr = [1,2,3];
for (const item of arr) {} // 1, 2, 3 순서

Map, Set
Promise
Class
Symbol

default parameter value

const defaultValue = 10;
function f(x = defaultValue) {}

rest parameter(배열)

function f(first, ...rest) {}
f(1,2,3,4,5)

ES2016

지수 연산자(**)
```
// AS-IS
Math.pow(2, 2)

// TO-BE
2**2;
```
Array.prototype.includes()
- 배열에 요소가 있는지 확인(boolean)

ES2017

문자열의 시작과 끝에 패딩을 지원하는 padStart, padEnd 추가했습니다.
```
const text = "5";
console.log(text.padStart(4,0)); // 0005
console.log(text.padEnd(4,0)); // 5000
```

Object.entries와 Object.values

// 객체의 키/값 쌍 배열을 반환
const obj = { key1: 1, key2: 2 };
Object.entries(obj)

// Map으로 변환이 간편해졌습니다.
new Map(Object.entries(obj))

**//** 객체의 값이 담긴 배열을 반환
const obj = { key1: 1, key2: 2 };
Object.values(obj) // ['key1', 'key2']

async/await

// AS-IS
const delay = (time) => new Promise(resolve => setTimeout(resolve, time));
// TO-BE
const main = async (time) => {
	await delay()
}

Trailing Comma 허용
- 쉼표로 구분된 값 목록이 허용되는 경우 끝에 쉼표를 사용할 수 있습니다.
```
function myFunc(x,,,) {};
const myArr = [1,2,3,4,,,];
const myObj = {fname: John, age:50,,,};
```

ES2018

비동기 loop(for await () {})
Promise.finally
- 프로미스의 성공 여부와 관계가 없기 때문에 finally는 아무런 인자도 받지 않습니다.

Rest in Destructuring(배열/객체에서도 가능, ES6에서는 함수 파라미터)

const obj = { key1: 1, key2: 2 };
const { key1, ...rest } = obj;

const arr = [1,2,3];
const [key, ...rest] = arr;

RegExp 기능 추가
- 유니코드 속성 이스케이프(\p{...})
- 뒤돌아보기 단언 (?<= ) 및 (?<! )
  - 패턴 앞에 다른 패턴이 있는지 여부를 확인할 수 있습니다.
- (?<name>)
  - 캡쳐 그룹에 원하는 이름을 붙일 수 있습니다.
- s (dotAll)
  - . 표현식은 개행문자를 제외한 모든 문자였으나, s플래그를 달면 개행식도 포함하게 됩니다.
web workers API
- 워커 스레드는 메인 프로그램과 동시에 실행되며 백그라운드에서 코드 실행
- dedicated web worker, shared worker
javascript 공유 메모리
- Atomics
- SharedArrayBuffer: 스레드 간에 데이터 대신 데이터가 저장된 메모리를 가리키는 객체 전달

ES2019

문자열 공백 제거(String.prototype.trimStart(), String.prototype.trimEnd())
- trim과 다르게 trimStart는 앞 쪽 공백만 제거합니다.
객체 반복가능한(iterable) 키/값 쌍으로부터 객체 생성
- Object.fromEntries
선택적 catch 바인딩
- 필요하지 않으면 catch의 매개변수를 제거할 수 있습니다.
평면화하는 flat, flatMap
- flat는 중첩된 배열을 평면화하여 새로운 배열을 만듭니다.
- flatMap은 먼저 배열의 모든 요소를 매핑한 다음 배열을 평면화하여 새 배열을 만듭니다.
JSON.stringify() 깨지는 부분 개정
Array.prototype.sort 알고리즘 개정

ES2020

BigInt
- 2**53-1이며 Number.MAX_SAFE_INTEGER(15자리까지)
- 정수 리터럴의 뒤에 n 혹은 BigInt()호출해서 생성
machAll
- 문자열에서 해당 문자열이 나타나는 모든 위치를 검색
- 매개변수가 정규 표현식인 경우 전역 플래그(g)를 설정해야 하며, 그렇지 않으면 TypeError가 발생
Nullish 병합 연산자(??)
- null, undefined 이 아닌경우 첫번째 인수 반환
선택적 체이닝 연산자(?.)
- 객체가 null, undefined이 아닌지 검사(오류 대신 undefined)
```
const obj = { key: 1 };
obj?.key; // 1
obj?.key2;  // undefined 
```
할당 연산자(&&=, ||=, ??=)
- &&= : trusy하면 두 번째 값이 할당
- ||= : falsy한 값이면 두 번째 값이 할당
- ??= : undefined또는 null 이면 두 번째 값이 할당
Promise.allSettled()

dynamic import

const module = await import('./path/to/module.js');

globalThis
- 환경에 관계없이 전역객체를 같은 방법으로 참조할 수 있는 방법

ES2021

Promise.any()
- 하나라도 성공하면 실행을 완료하지만, 그렇지 않다면 모든 promise가 실패할 때 까지 계속됩니다.
- ↔ Promise.race()는 하나만 완료되면됨(실패해도)
String.prototype.replaceAll()
- 문자열 혹은 정규표현식을 사용가능
- 매개변수가 정규 표현식인 경우 전역 플래그(g)를 설정해야 하며, 그렇지 않으면 TypeError가 발생

숫자 구분 기호(_)

시각적인 용도로만 사용됩니다.

const num1 = 1_000_000_000;
const num2 = 1000000000;
num1 === num2 // true

ES2022

String.prototype.at(), Array.prototype.at()
- array의 [number]랑 같은 기능입니다.(다만, 음수도 가능)
Regex \\d
- i : 대소문자 구분없음
- g : 전체 검색
- m : multiline 옵션
- d : 캡처 그룹의 시작/끝 인덱스 정보
Object.hasOwn
- prototype이 없는 객체나 재정의된 경우에도 원본 구현을 사용하기 때문에 안전합니다.(속성이 객체의 자체 속성인지 확인)
- Object.prototype.hasOwnProperty

error.cause

오류의 원인 지정

try {
} catch (err) {
	throw new Error("failed", { cause: err });
}

await import

Class field declarations

class Hello {
  counter = 0; // Class field
}

Private methods and fields

class Hello {
  #counter = 0;  // Private field
  #method() {} // Private method
}

ES2023

Array.prototype.findLast()
Array.prototype.findLastIndex()
Array.prototype.toReversed()
- 원래 배열을 변경하지 않고 새 배열을 만들어줍니다.
- reverse()는 원래 배열을 변경합니다.
Array.prototype.toSorted()
- 원래 배열을 변경하지 않고 새 배열을 만들어줍니다.
- sort()는 원래 배열을 변경합니다.
Array.prototype.toSpliced()
- 원래 배열을 변경하지 않고 새 배열을 만들어줍니다.
- splice()는 원래 배열을 변경합니다.
Array.prototype.with()
- 원래 배열을 변경하지 않고 배열의 요소를 업데이트
```
months.with(2, "March");
```

#! (Shebang)

# 운영 체제에 노드 프로그램을 사용하여 스크립트를 실행하라고 알려줍니다.

#!/usr/bin/env node

ES6부터 추가된 스펙들에 대해서 정리해보았는데요.

확인한다고 했지만 예제나 정보에 저의 해석이 가미되어 의도와 다른 내용이 있을 수 있습니다.

참조

Previous아직도 번들러를 써야하는 이유?NextReact Native 앱 배포 자동화 여정(feat. EAS, Expo)

Last updated 5 months ago

hashtagES2015

hashtagES2016

hashtagES2017

hashtagES2018

hashtagES2019

hashtagES2020

hashtagES2021

hashtagES2022

hashtagES2023

hashtag참조