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');

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

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

참조

PreviousFrontendNextReact Native 앱 배포 자동화 여정(feat. EAS, Expo)

Last updated