JavaScript는 계속 발전하고 있으며 ES13(ECMAScript 2022)이 도입되면서 개발자가 보다 효율적이고 현대적인 코드를 작성하기 위해 알아야 할 몇 가지 새로운 기능이 있습니다. 이 글에서는 개발 워크플로를 개선할 수 있는 ES13의 가장 영향력 있는 10가지 기능에 대해 자세히 살펴보겠습니다.

1. 최상위 수준 대기

ES13 이전:

이전에는 비동기 함수 내에서만 대기를 사용할 수 있었습니다. 즉, Wait를 사용해야 하는 경우 모듈의 나머지 부분에서 필요하지 않더라도 코드를 비동기 함수 내에 래핑해야 했습니다.

예:

// Without top-level await (Before ES13)
async function fetchData() {
  const data = await fetch('/api/data');
  return data.json();
}
fetchData().then(console.log);

ES13 기능:

ES13을 사용하면 이제 모듈의 최상위 수준에서 대기를 사용할 수 있으므로 추가 비동기 래퍼 기능이 필요하지 않습니다.

// With top-level await (ES13)
const data = await fetch('/api/data');
console.log(await data.json());

2. 비공개 인스턴스 메서드 및 접근자

ES13 이전:

ES13 이전에는 JavaScript 클래스에 진정한 비공개 필드나 메서드가 없었습니다. 개발자는 개인 정보 보호를 시뮬레이션하기 위해 밑줄이나 클로저와 같은 명명 규칙을 자주 사용했지만 이러한 방법은 진정한 비공개가 아니었습니다.

예:

// Simulating private fields (Before ES13)
class Person {
  constructor(name) {
    this._name = name; // Conventionally "private"
  }

  _getName() {
    return this._name;
  }

  greet() {
    return `Hello, ${this._getName()}!`;
  }
}

const john = new Person('John');
console.log(john._getName()); // Accessible, but intended to be private

ES13 기능:

ES13은 # 접두사를 사용하는 진정한 비공개 인스턴스 메서드와 접근자를 도입하여 클래스 외부에서 액세스할 수 없도록 합니다.

// Private instance methods and fields (ES13)
class Person {
  #name = '';

  constructor(name) {
    this.#name = name;
  }

  #getName() {
    return this.#name;
  }

  greet() {
    return `Hello, ${this.#getName()}!`;
  }
}

const john = new Person('John');
console.log(john.greet()); // Hello, John!
console.log(john.#getName()); // Error: Private field '#getName' must be declared in an enclosing class

3. 정적 클래스 필드 및 메서드

ES13 이전:

ES13 이전에는 정적 필드와 메서드가 일반적으로 클래스 본문 외부에서 정의되어 코드 응집력이 떨어졌습니다.

예:

// Static fields outside class body (Before ES13)
class MathUtilities {}

MathUtilities.PI = 3.14159;

MathUtilities.calculateCircumference = function(radius) {
  return 2 * MathUtilities.PI * radius;
};

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

ES13 기능:

ES13을 사용하면 클래스 본문 내에서 직접 정적 필드와 메서드를 정의하여 가독성과 구성이 향상됩니다.

// Static fields and methods inside class body (ES13)
class MathUtilities {
  static PI = 3.14159;

  static calculateCircumference(radius) {
    return 2 * MathUtilities.PI * radius;
  }
}

console.log(MathUtilities.PI); // 3.14159
console.log(MathUtilities.calculateCircumference(5)); // 31.4159

4. 논리 할당 연산자

ES13 이전:

논리 연산자(&&, ||, ??)와 할당은 자세한 설명문에서 수동으로 결합되는 경우가 많아 코드가 더욱 복잡해졌습니다.

예:

// Manually combining logical operators and assignment (Before ES13)
let a = 1;
let b = 0;

a = a && 2;  // a = 2
b = b || 3;  // b = 3
let c = null;
c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

ES13 기능:

ES13에는 논리 연산과 할당을 간결한 구문으로 결합하는 논리 할당 연산자가 도입되었습니다.

// Logical assignment operators (ES13)
let a = 1;
let b = 0;

a &&= 2;  // a = a && 2; // a = 2
b ||= 3;  // b = b || 3; // b = 3
let c = null;
c ??= 4; // c = c ?? 4; // c = 4

console.log(a, b, c); // 2, 3, 4

5. WeakRef 및 FinalizationRegistry

ES13 이전:

약한 참조 및 종료자는 JavaScript에서 기본적으로 지원되지 않으므로 특정 경우, 특히 값비싼 객체를 처리하는 대규모 애플리케이션의 경우 리소스 관리가 어렵습니다.

예:

// No native support for weak references (Before ES13)
// Developers often had to rely on complex workarounds or external libraries.

ES13 기능:

ES13은 WeakRef 및 FinalizationRegistry를 도입하여 가비지 수집 후 약한 참조 및 정리 작업에 대한 기본 지원을 제공합니다.

// WeakRefs and FinalizationRegistry (ES13)
let obj = { name: 'John' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()?.name); // 'John'

obj = null; // obj is eligible for garbage collection

setTimeout(() => {
  console.log(weakRef.deref()?.name); // undefined (if garbage collected)
}, 1000);

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`Cleanup: ${heldValue}`);
});

registry.register(obj, 'Object finalized');

6. 비공개 분야에 대한 인체공학적 브랜드 확인

ES13 이전:

개인 필드가 기본적으로 지원되지 않았기 때문에 개체에 개인 필드가 있는지 확인하는 것은 간단하지 않았습니다. 개발자는 공용 속성을 확인하거나 검사 인스턴스를 사용하는 등의 해결 방법에 의존해야 했습니다.

예:

// Checking for private fields using workarounds (Before ES13)
class Car {
  constructor() {
    this.engineStarted = false; // Public field
  }

  startEngine() {
    this.engineStarted = true;
  }

  static isCar(obj) {
    return obj instanceof Car; // Not reliable for truly private fields
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

ES13 기능:

ES13에서는 이제 # 구문을 사용하여 객체에 비공개 필드가 있는지 직접 확인할 수 있으므로 더 쉽고 안정적입니다.

// Ergonomic brand checks for private fields (ES13)
class Car {
  #engineStarted = false;

  startEngine() {
    this.#engineStarted = true;
  }

  static isCar(obj) {
    return #engineStarted in obj;
  }
}

const myCar = new Car();
console.log(Car.isCar(myCar)); // true

7. Array.prototype.at()

ES13 이전:

인덱스와 함께 대괄호 표기법을 사용하는 배열의 요소에 액세스하고 음수 인덱스의 경우 위치를 수동으로 계산해야 했습니다.

예:

// Accessing array elements (Before ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr[arr.length - 1]); // 5 (last element)

ES13 기능:

at() 메서드를 사용하면 양수 인덱스와 음수 인덱스를 모두 사용하여 보다 직관적으로 배열 요소에 액세스할 수 있습니다.

// Accessing array elements with `at()` (ES13)
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-1)); // 5 (last element)
console.log(arr.at(0)); // 1 (first element)

8. Object.hasOwn()

ES13 이전:

객체에 고유한 속성(상속되지 않음)이 있는지 확인하기 위해 개발자는 일반적으로 Object.prototype.hasOwnProperty.call() 또는 obj.hasOwnProperty()를 사용했습니다.

예:

// Checking own properties (Before ES13)
const obj = { a: 1 };
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
console.log(obj.hasOwnProperty('a')); // true

ES13 기능:

새로운 Object.hasOwn() 메서드는 이 검사를 단순화하여 더욱 간결하고 읽기 쉬운 구문을 제공합니다.

// Checking own properties with `Object.hasOwn()` (ES13)
const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true

9. Object.fromEntries()

ES13 이전:

키-값 쌍(예: 맵 또는 배열)을 반복 및 수동 구성이 필요한 객체로 변환합니다.

예:

// Creating an object from entries (Before ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = {};
entries.forEach(([key, value]) => {
  obj[key] = value;
});
console.log(obj); // { name: 'John', age: 30 }

ES13 기능:

Object.fromEntries()는 키-값 쌍에서 객체 생성을 단순화합니다.

// Creating an object with `Object.fromEntries()` (ES13)
const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30 }

10. 글로벌 This 모듈

ES13 이전:

모듈의 최상위 수준에서 이 값이 정의되지 않아 스크립트에서 모듈로 코드를 이식할 때 혼란이 발생했습니다.

예:

// Global `this` (Before ES13)
console.log(this); // undefined in modules, global object in scripts

ES13 기능:

ES13은 모듈의 최상위 수준에서 이 값이 항상 정의되지 않음을 명확히 하여 모듈과 스크립트 간의 일관성을 제공합니다.

// Global `this` in modules (ES13)
console.log(this); // undefined

이러한 ES13 기능은 JavaScript 코드를 더욱 효율적이고 읽기 쉽고 유지 관리하기 쉽게 만들기 위해 설계되었습니다. 이를 개발 관행에 통합하면 언어의 최신 발전을 활용하여 현대적이고 성능이 뛰어난 애플리케이션을 구축할 수 있습니다.