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

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

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

1. Tuple и Record

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

1const tuple = #[1, 2, 3];
2const record = #{ name: 'John', age: 30 };
3
4console.log(tuple[0]); // 1
5console.log(record.name); // John

2. Async Context

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

1import { AsyncLocalStorage } from 'async_hooks';
2
3const asyncLocalStorage = new AsyncLocalStorage();
4
5function logWithAsyncContext(message) {
6  const context = asyncLocalStorage.getStore();
7  console.log(`${context.traceId}: ${message}`);
8}
9
10asyncLocalStorage.run({ traceId: '123' }, () => {
11  logWithAsyncContext('Hello, world!');
12});

3. RegExp Match Indices

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

1const regex = /hello/g;
2const str = 'hello world, hello everyone';
3const match = [...str.matchAll(regex)];
4
5console.log(match[0].indices); // [[0, 5]]
6console.log(match[1].indices); // [[13, 18]]

4. Top-Level Await

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

1// module.js
2const data = await fetchData();
3console.log(data);
4
5// main.js
6import './module.js';

5. Decorators

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

1function readonly(target, key, descriptor) {
2  descriptor.writable = false;
3  return descriptor;
4}
5
6class Person {
7  @readonly
8  name = 'John';
9}
10
11const person = new Person();
12person.name = 'Doe'; // TypeError: Cannot assign to read only property 'name'

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

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

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

1const userInfo = #{ name: 'Alice', age: 25 };
2const userScores = #[95, 87, 92];
3
4console.log(userInfo.name); // Alice
5console.log(userScores[1]); // 87

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

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

1// data.js
2export const data = await fetch('/api/data').then(response => response.json());
3
4// main.js
5import { data } from './data.js';
6
7console.log(data);

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

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

1function log(target, key, descriptor) {
2  const originalMethod = descriptor.value;
3  descriptor.value = function (...args) {
4    console.log(`Calling ${key} with arguments: ${args}`);
5    return originalMethod.apply(this, args);
6  };
7  return descriptor;
8}
9
10class Calculator {
11  @log
12  add(a, b) {
13    return a + b;
14  }
15}
16
17const calculator = new Calculator();
18console.log(calculator.add(2, 3)); // Calling add with arguments: 2,3
19                                  // 5

Заключение

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