안녕하세요. 이번 시간에는 ES2024로 채택될 유력 후보인 stage-3에 대해 알아보겠습니다!

stage-3이란 이름에서 유추할 수 있듯, stage-2도 있고, stage-1도 있습니다. stage-4와 stage-0도 있습니다. 각각의 stage가 무엇을 의미하는 지 궁금하시죠? 각각의 stage에는 이름이 붙어 있습니다.

stage-4는 Finished(종료), stage-3는 Candidate(후보), stage-2는 Draft(초안), stage-1은 Proposal(제안), stage-0은 Strawman(허수아비)입니다. 허수아비라는 이름이 재미있네요. 언제든지 스펙 후보에서 탈락할 위험에 처해있는 것들입니다.

stage-4는 정식 채택된 친구들입니다. stage-3인 얘들이 정식 채택된다면 stage-4로 이동되어 내년에 나오는 ES2024가 될 겁니다. stage-3은 가장 유력한 후보들인 것이죠. stage-2, stage-1의 것들은 한 두 단계를 더 올라와야 가능합니다.

지원 가능 브라우저에 대한 표는 http://kangax.github.io/compat-table/esnext/ 에 있습니다. 따라서 이 번 시간의 예제들은 콘솔에 치지 마시고 눈으로만 봐 주세요. 그냥 이런 기능이 내년에 추가되겠구나 하시면 됩니다.

Legacy RegExp

현재 모든 브라우저에서 지원되지만 deprecated된 정규표현식 기능을 따로 모아두었습니다. lastMatch와 RegExp 내부에 있는 $1 ~ $9까지의 속성들입니다. 추가로 여기 에 있는 리스트들이 없어질 수 있다고 합니다.

var re = /\w/;
re.exec('x');
RegExp.lastMatch === 'x'; // true

'$1' in RegExp; // true

JSON modules & import assertions

json 파일을 Import할 수 있게 해주는 기능입니다. assert 예약어가 추가되었습니다.

import json from "./foo.json" assert { type: "json" };i
const json = import("foo.json", { assert: { type: "json" } });

Array group

배열에 group과 groupToMap 메서드가 추가됩니다. 배열을 그룹화해서 객체로 바꾸는 메서드입니다. groupToMap은 객체의 key가 객체입니다.

const array = [1, 2, 3, 4, 5];

// group groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
array.group((num, index, array) => {
  return num % 2 === 0 ? 'even': 'odd';
});

// =>  { odd: [1, 3, 5], even: [2, 4] }

// groupToMap returns items in a Map, and is useful for grouping using
// an object key.
const odd  = { odd: true };
const even = { even: true };
array.groupToMap((num, index, array) => {
  return num % 2 === 0 ? even: odd;
});

// =>  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }

불변 Array 메서드

splice, reverse, sort 등의 메서드는 대상 배열을 직접 수정했습니다. 대상 배열은 가만히 놔둔 채 새로운 배열을 만들어 변경사항을 반영하려면 복사를 한 뒤에 작업했어야 하는데요. 이걸 한 방에 해결해줍니다.

const sequence = [1, 2, 3];
sequence.toReversed(); // => [3, 2, 1]
sequence; // => [1, 2, 3]

const outOfOrder = new Uint8Array([3, 1, 2]);
outOfOrder.toSorted(); // => Uint8Array [1, 2, 3]
outOfOrder; // => Uint8Array [3, 1, 2]

const correctionNeeded = [1, 1, 3];
correctionNeeded.with(1, 2); // => [1, 2, 3]
correctionNeeded; // => [1, 1, 3]

Symbol for WeakMap

WeakMap의 key로 symbol을 사용할 수 있게 됩니다.

const weak = new WeakMap(); // Pun not intended: being a symbol makes it become a more symbolic key
const key = Symbol('my ref');
const someObject = { /* data data data */ }; 
weak.set(key, someObject);

이 외에도 여러 가지가 있는데 ShadowRealm같은 것은 아직 어디에 쓰는지 잘 모르겠습니다.

다음 시간에는 stage-2에 대해 알아보겠습니다!