JavaScript продолжает развиваться, и с появлением ES13 (ECMAScript 2022) появилось несколько новых функций, о которых разработчикам следует знать, чтобы писать более эффективный и современный код. В этой статье мы рассмотрим десять наиболее эффективных функций ES13, которые могут улучшить ваш рабочий процесс разработки.

1. Ожидание высшего уровня

До ES13:

Раньше await можно было использовать только внутри асинхронных функций. Это означало, что если вам нужно было использовать await, вам приходилось заключать свой код в асинхронную функцию, даже если остальная часть вашего модуля этого не требовала.

Пример:

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

ES13 Особенность:

В ES13 теперь вы можете использовать await на верхнем уровне вашего модуля, устраняя необходимость в дополнительной асинхронной функции-оболочке.

// 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. WeakRefs и реестр финализации

До 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. Глобальное это в модулях

До ES13:

Значение this на верхнем уровне модуля было неопределенным, что приводило к путанице при переносе кода из скриптов в модули.

Пример:

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

ES13 Особенность:

ES13 поясняет, что значение this на верхнем уровне модуля всегда неопределенно, что обеспечивает согласованность между модулями и скриптами.

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

Эти функции ES13 предназначены для того, чтобы сделать ваш код JavaScript более эффективным, читабельным и удобным в сопровождении. Интегрировав их в свою практику разработки, вы сможете использовать последние достижения языка для создания современных и производительных приложений.