ES2024: что нового в JavaScript

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

Новые функции в ES2024

1. Tuple и Record

Tuple и Record — это два новых типа данных, которые делают работу с неизменяемыми данными более удобной и безопасной.

const tuple = #[1, 2, 3];
const record = #{ name: 'John', age: 30 };

console.log(tuple[0]); // 1
console.log(record.name); // John

2. Async Context

Async Context позволяет отслеживать контекст выполнения асинхронных операций, что особенно полезно для логирования и отладки.

import { AsyncLocalStorage } from 'async_hooks';

const asyncLocalStorage = new AsyncLocalStorage();

function logWithAsyncContext(message) {
  const context = asyncLocalStorage.getStore();
  console.log(`${context.traceId}: ${message}`);
}

asyncLocalStorage.run({ traceId: '123' }, () => {
  logWithAsyncContext('Hello, world!');
});

3. RegExp Match Indices

RegExp Match Indices добавляет информацию о позициях совпадений в строках, что упрощает работу с регулярными выражениями.

const regex = /hello/g;
const str = 'hello world, hello everyone';
const match = [...str.matchAll(regex)];

console.log(match[0].indices); // [[0, 5]]
console.log(match[1].indices); // [[13, 18]]

4. Top-Level Await

Top-Level Await позволяет использовать await на верхнем уровне модулей, что упрощает работу с асинхронным кодом.

// module.js
const data = await fetchData();
console.log(data);

// main.js
import './module.js';

5. Decorators

Декораторы предоставляют способ аннотирования и модификации классов и их свойств.

function readonly(target, key, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Person {
  @readonly
  name = 'John';
}

const person = new Person();
person.name = 'Doe'; // TypeError: Cannot assign to read only property 'name'

Примеры использования новых функций

Пример 1: Использование Tuple и Record

Tuple и Record обеспечивают более безопасную работу с неизменяемыми данными, что особенно полезно в функциональном программировании.

const userInfo = #{ name: 'Alice', age: 25 };
const userScores = #[95, 87, 92];

console.log(userInfo.name); // Alice
console.log(userScores[1]); // 87

Пример 2: Использование Top-Level Await

Top-Level Await упрощает загрузку данных и выполнение асинхронных операций на верхнем уровне модулей.

// data.js
export const data = await fetch('/api/data').then(response => response.json());

// main.js
import { data } from './data.js';

console.log(data);

Пример 3: Использование Decorators

Декораторы позволяют добавлять метаданные к классам и их свойствам, что делает код более гибким и расширяемым.

function log(target, key, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Calling ${key} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}

const calculator = new Calculator();
console.log(calculator.add(2, 3)); // Calling add with arguments: 2,3
                                  // 5

Заключение

ES2024 привносит множество новых возможностей и улучшений в JavaScript, делая язык еще более мощным и удобным для разработчиков. Новые типы данных, такие как Tuple и Record, позволяют работать с неизменяемыми данными более эффективно. Async Context и Top-Level Await упрощают работу с асинхронным кодом. Декораторы добавляют гибкости и расширяемости классов.