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

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

{% hint style="info" %}
[https://github.com/orgs/tc39/repositories](https://github.com/orgs/tc39/repositories)에서 proposal에 대해 확인가능하니 관심이 있으시면 보시는 것도 좋을 것 같습니다.
{% endhint %}



## ES2015

* let, const
* arrow function
*   object/array destructing

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

    const arr = ['seungdeok'];
    const [arrName] = arr;
    ```
*   spread operator

    ```jsx
    const arr = [1,2,3];
    const max = Math.max(...arr);
    ```
*   for/of loop

    ```jsx
    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

    ```jsx
    const defaultValue = 10;
    function f(x = defaultValue) {} 
    ```
*   rest parameter(배열)

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



## **ES2016**

*   지수 연산자(\*\*)

    ```jsx
    // AS-IS
    Math.pow(2, 2)

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



## **ES2017**

*   문자열의 시작과 끝에 패딩을 지원하는 [padStart](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart), [padEnd](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd) 추가했습니다.

    ```jsx
    const text = "5";
    console.log(text.padStart(4,0)); // 0005
    console.log(text.padEnd(4,0)); // 5000
    ```
*   [Object.entries](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)와 [Object.values](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values)

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

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

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

    ```jsx
    // AS-IS
    const delay = (time) => new Promise(resolve => setTimeout(resolve, time));
    // TO-BE
    const main = async (time) => {
    	await delay()
    }
    ```
*   Trailing Comma 허용

    * 쉼표로 구분된 값 목록이 허용되는 경우 끝에 쉼표를 사용할 수 있습니다.

    ```jsx
    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에서는 함수 파라미터)

    ```jsx
    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`)

    ```jsx
    const obj = { key: 1 };
    obj?.key; // 1
    obj?.key2;  // undefined 
    ```
* 할당 연산자(&&=, ||=, ??=)
  * &&= : trusy하면 두 번째 값이 할당
  * ||= : falsy한 값이면 두 번째 값이 할당
  * ??= : `undefined`또는 `null` 이면 두 번째 값이 할당
* Promise.allSettled()
*   dynamic import

    ```jsx
    const module = await import('./path/to/module.js');
    ```
* globalThis
  * 환경에 관계없이 전역객체를 같은 방법으로 참조할 수 있는 방법



## **ES2021**

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

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

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



## ES2022

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

    * 오류의 원인 지정

    ```jsx
    try {
    } catch (err) {
    	throw new Error("failed", { cause: err });
    }
    ```
* await import
*   Class field declarations

    ```jsx
    class Hello {
      counter = 0; // Class field
    }
    ```
*   Private methods and fields

    ```jsx
    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()

    * 원래 배열을 변경하지 않고 배열의 요소를 업데이트

    ```jsx
    months.with(2, "March");
    ```
*   \#! (Shebang)

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

    #!/usr/bin/env node
    ```





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

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



## **참조**

* [https://www.w3schools.com/js/js\_es6.asp](https://www.w3schools.com/js/js_es6.asp)
* [https://tc39.es/ecma262/#sec-if-statement](https://tc39.es/ecma262/#sec-if-statement)
* [MDN - Javascript](https://developer.mozilla.org/ko/docs/Web/JavaScript)
