Must-Know JavaScript ESFeatures for Modern Development

JavaScript continues to evolve, and with the introduction of ES13 (ECMAScript 2022), there are several new features that developers should be aware of to write more efficient and modern code. In this article, we’ll dive into ten of the most impactful features in ES13 that can improve your development workflow.

1. Top-Level await

Before ES13:

Previously, you could only use await inside async functions. This meant that if you needed to use await, you had to wrap your code inside an async function, even if the rest of your module didn’t require it.

Example:

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

ES13 Feature:

With ES13, you can now use await at the top level of your module, eliminating the need for an additional async wrapper function.

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

2. Private Instance Methods and Accessors

Before ES13:

Prior to ES13, JavaScript classes did not have true private fields or methods. Developers often used naming conventions like underscores or closures to simulate privacy, but these methods were not truly private.

Example:

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

ES13 introduces true private instance methods and accessors using the # prefix, ensuring they cannot be accessed outside the class.

// 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. Static Class Fields and Methods

Before ES13:

Before ES13, static fields and methods were typically defined outside of the class body, leading to less cohesive code.

Example:

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

ES13 allows you to define static fields and methods directly within the class body, improving readability and organization.

// 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. Logical Assignment Operators

Before ES13:

Logical operators (&&, ||, ??) and assignment were often combined manually in verbose statements, leading to more complex code.

Example:

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

ES13 introduces logical assignment operators, which combine logical operations with assignment in a concise syntax.

// 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. WeakRefs and FinalizationRegistry

Before ES13:

Weak references and finalizers were not natively supported in JavaScript, making it difficult to manage resources in certain cases, especially with large-scale applications that handle expensive objects.

Example:

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

ES13 Feature:

ES13 introduces WeakRef and FinalizationRegistry, providing native support for weak references and cleanup tasks after garbage collection.

// 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. Ergonomic Brand Checks for Private Fields

Before ES13:

Checking if an object had a private field was not straightforward, as private fields were not natively supported. Developers had to rely on workaround methods, such as checking for public properties or using instanceof checks.

Example:

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

With ES13, you can now directly check if an object has a private field using the # syntax, making it easier and more reliable.

// 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()

Before ES13:

Accessing elements from arrays involved using bracket notation with an index, and for negative indices, you had to manually calculate the position.

Example:

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

ES13 Feature:

The at() method allows you to access array elements using both positive and negative indices more intuitively.

// 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()

Before ES13:

To check if an object had its own property (not inherited), developers typically used Object.prototype.hasOwnProperty.call() or obj.hasOwnProperty().

Example:

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

The new Object.hasOwn() method simplifies this check, providing a more concise and readable syntax.

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

9. Object.fromEntries()

Before ES13:

Transforming key-value pairs (e.g., from Map or arrays) into an object required looping and manual construction.

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.

The above is the detailed content of Must-Know JavaScript ESFeatures for Modern Development. For more information, please follow other related articles on the PHP Chinese website!