Javascript ES12 문법정리

1. Numeric Separators

ES12에서는 숫자 구분자를 도입하여 숫자 리터럴 간에 밑줄(_)을 삽입하여 가독성을 향상할 수 있습니다. 이 기능은 코드 내에서 큰 숫자 값을 더 읽기 쉽게 만들어줍니다.

숫자 구분자 도입으로 코드 가독성이 크게 향상되며, 특히 많은 숫자 상수나 값을 다룰 때 유용합니다.

// before
const billion = 1000000000;
const trillion = 1000000000000;

// ES12
const billion = 1_000_000_000;
const trillion = 1_000_000_000_000;

2. Logical Assignment Operators

ES12에서는 논리 할당 연산자(||=, &&=,??=)를 도입하여 논리 연산과 동시에 할당을 간결하게 수행할 수 있습니다.

이러한 연산자는 논리 연산과 할당을 결합하여 코드를 간결하게 만들어주며, 표현력을 높여줍니다.

// before
let x = 10;
x = x || 20; // x가 거짓일 경우 20을 x에 할당
let y = 5;
y = y && 15; // y가 참일 경우 15를 y에 할당
let z = null;
z = z ?? 30; // z가 널리시일 경우 30을 z에 할당

// ES12
let x = 10;
x ||= 20; // x가 거짓일 경우 20을 x에 할당
let y = 5;
y &&= 15; // y가 참일 경우 15를 y에 할당
let z = null;
z ??= 30; // z가 널리시일 경우 30을 z에 할당

3. String ReplaceAll Method

ES12에서는 문자열의 replaceAll 메서드를 도입하여 정규식을 사용하지 않고도 전역적인 문자열 교체를 간단하게 수행할 수 있습니다.

replaceAll 메서드는 문자열 내의 모든 부분 문자열을 간단하게 교체하는 더 깔끔하고 간편한 방법을 제공합니다.

// 이전
const originalString = 'Hello, Hello, World!';
const modifiedString = originalString.split('Hello').join('Hi');
const modified2String = originalString.replace(/Hello/gi, 'Hi');

// ES12
const originalString = 'Hello, Hello, World!';
const modifiedString = originalString.replaceAll('Hello', 'Hi');

4. Private Fields

ES12에서는 클래스 내에서 # 접두사를 사용하여 개인(private) 변수를 선언할 수 있는 개인 필드(private class fields)를 도입했습니다. 이러한 필드는 클래스 내부에서만 접근 가능하며, 캡슐화와 클래스 무결성을 강화합니다.
개인 필드를 사용하면 클래스 속성을 더 안전하고 명시적으로 비공개로 정의하여 코드 가독성과 유지보수성을 향상할 수 있습니다.

// 이전
class MyClass {
  constructor() {
    this._privateField = 10; // 개인 필드를 나타내는 컨벤션 사용
  }

  getPrivateField() {
    return this._privateField;
  }
}

// ES12
class MyClass {
  #privateField;

  constructor() {
    this.#privateField = 10;
  }

  getPrivateField() {
    return this.#privateField;
  }
}

const instance = new MyClass();
console.log(instance.getPrivateField()); // 결과: 10
console.log(instance.#privateField); // SyntaxError: Private field '#privateField' must be declared in an enclosing class

5. WeakRefs와 FinalizationRegistry

ES12에서는 WeakRefs와 FinalizationRegistry 클래스를 도입하여 개체에 대한 약한 참조를 관리하고 해당 개체가 가비지 컬렉션 될 때 콜백을 실행할 수 있습니다.

WeakRefs와 FinalizationRegistry를 사용하면 메모리를 효율적으로 관리하고 개체가 참조 불가능해질 때 정리 작업을 수행할 수 있어 JavaScript에서 메모리 관리를 향상할 수 있습니다.

// ES12
const registry = new FinalizationRegistry(heldValue => {
  console.log('Object has been collected:', heldValue);
});

let obj = {};
registry.register(obj, 'Some value');

// 'obj'의 WeakRef 생성
let weakRef = new WeakRef(obj);

obj = null; // 'obj'에 대한 강한 참조 제거

// 일정 시점에 개체가 가비지 컬렉션되고 FinalizationRegistry 콜백이 트리거됨