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부터 추가된 스펙들에 대해서 정리해보았는데요.

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

참조

• https://www.w3schools.com/js/js_es6.asp

• https://tc39.es/ecma262/#sec-if-statement

• MDN - Javascript