현대 개발을 위해 꼭 알아야 할 JavaScript ES기능

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을 사용하면 이제 모듈의 최상위 수준에서 Wait를 사용할 수 있으므로 추가 비동기 래퍼 기능이 필요하지 않습니다.

// 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 이전:

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

Example:

// 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 Feature:

Object.fromEntries() simplifies the creation of objects from key-value pairs.

// 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. Global This in Modules

Before ES13:

The value of this in the top level of a module was undefined, leading to confusion when porting code from scripts to modules.

Example:

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

ES13 Feature:

ES13 clarifies that the value of this at the top level of a module is always undefined, providing consistency between modules and scripts.

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

---

These ES13 features are designed to make your JavaScript code more efficient, readable, and maintainable. By integrating these into your development practices, you can leverage the latest advancements in the language to build modern, performant applications.

위 내용은 현대 개발을 위해 꼭 알아야 할 JavaScript ES기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!