ECMAScript 2024(ES15) 주요 변경점

1. Unicode 핸들링 개선

const illFormed = "https://example.com/search?q=\uD800";
console.log(illFormed.isWellFormed()); // false
try {
  encodeURI(illFormed);
} catch (e) {
  console.log(e); // URIError: URI malformed
}
console.log(encodeURI(illFormed.toWellFormed())); 
// "https://example.com/search?q=%EF%BF%BD"

2. 정규식 v 플래그

유니코드 검색을 좀 더 명확하게 할 수 있다.

const re = /…/v;

multiple codepoints 에서 사용 (주로 emoji)

const re = /^\p{RGI_Emoji}$/v;

// Match an emoji that consists of just 1 code point:
re.test('⚽'); // '\u26BD'
// → true 

// Match an emoji that consists of multiple code points:
re.test('👨🏾‍⚕️'); // '\u{1F468}\u{1F3FE}\u200D\u2695\uFE0F'
// → true 

그 외 여러가지 properties 추가.

// difference/subtraction
[A--B]

// intersection
[A&&B]

// nested character class
[A--[0-9]]

참조 : https://v8.dev/features/regexp-v-flag

3. 최상위 await

async 함수 바깥에서 await 사용가능.

4. Pipeline operator |>

함수 체이닝.

const calculatedValue = Math.ceil(Math.pow(Math.max(0, -10), 1/3));

const calculatedValue = -10
  |> (n => Math.max(0, n))
  |> (n => Math.pow(n, 1/3))
  |> Math.ceil;

함수 자체를 인자로 넘겨줘서 좀더 알아보기 쉬운 코드 생성 가능.

아직 draft 단계임.

4. Record와 Tuple

각각 Object와 Array와 비슷하지만 immutable이다.

// an immutable record
const profile = #{
  name: "John Doe",
  age: 40,
};

// an immutable tuple
const numbers = #[1, 2, 3];

5. Decorator

function logMethod(target, key, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args) {
    console.log(`Calling ${key} with arguments: ${args.join(', ')}`);
    const result = originalMethod.apply(this, args);
    console.log(`${key} returned: ${result}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @logMethod // decorator added
  add(a, b) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3);

// Calling add with arguments: 2, 3
// add returned: 5

예상 사용처 : logging, validating, hooking, …