Những tính năng mới trong ECMAScript 2024 (ES15) JavaScript

JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay, và sự phát triển của nó luôn được thúc đẩy bởi các bản cập nhật từ ECMAScript (ES). Mỗi năm, ECMAScript lại mang đến những tính năng mới giúp cải thiện hiệu suất, tối ưu hóa cú pháp và nâng cao khả năng lập trình. Năm 2024, phiên bản ECMAScript 2024 (ES15) tiếp tục giới thiệu nhiều cải tiến quan trọng, từ việc mở rộng các phương thức thao tác dữ liệu đến cải tiến về lập trình bất đồng bộ. Những thay đổi này không chỉ giúp lập trình viên viết mã hiệu quả hơn mà còn mở ra nhiều khả năng mới trong việc xây dựng ứng dụng web và hệ thống lớn. Hãy cùng tìm hiểu những tính năng đáng chú ý trong ES15 và cách chúng có thể nâng tầm trải nghiệm lập trình JavaScript.

Giới thiệu về ECMAScript 2024 (ES15) trong JavaScript

ECMAScript (ES) là tiêu chuẩn chính thức của JavaScript, được phát triển và duy trì bởi tổ chức ECMA International. Hàng năm, một phiên bản mới của ECMAScript được phát hành, mang lại các tính năng và cải tiến nhằm nâng cao hiệu suất, tối ưu cú pháp và cải thiện trải nghiệm lập trình.

ECMAScript 2024 (ES15) là phiên bản mới nhất, tiếp tục xu hướng cải tiến từ những năm trước, tập trung vào việc mở rộng khả năng thao tác với dữ liệu, tối ưu hóa lập trình bất đồng bộ, và cải thiện hiệu suất tổng thể của JavaScript. Một số tính năng quan trọng trong ES15 bao gồm:

• Nhóm dữ liệu dễ dàng hơn với Object.groupBy() và Map.groupBy().

• Cải tiến quản lý Promise với Promise.withResolvers().

• Hỗ trợ bộ nhớ linh hoạt hơn với Resizable ArrayBuffer.

• Nâng cấp lập trình đồng bộ với Atomics.waitAsync().

• Mở rộng cú pháp Regular Expression với cờ v, giúp viết biểu thức chính quy mạnh mẽ hơn.

Tầm quan trọng của ECMAScript 2024 (ES15) trong phát triển JavaScript

Sự phát triển của ECMAScript đóng vai trò quan trọng trong việc định hình hướng đi của JavaScript, giúp ngôn ngữ này ngày càng mạnh mẽ và phù hợp hơn với nhu cầu của lập trình viên. Với ES15, JavaScript tiếp tục được cải thiện ở các khía cạnh quan trọng:

Tối ưu hóa hiệu suất và quản lý bộ nhớ

• Resizable ArrayBuffer giúp quản lý dữ liệu hiệu quả hơn, đặc biệt trong các ứng dụng xử lý dữ liệu lớn hoặc đồ họa.

• Atomics.waitAsync() giúp cải thiện hiệu suất lập trình đồng bộ, hữu ích cho các ứng dụng đa luồng như Web Workers.

Cải thiện trải nghiệm lập trình và cú pháp dễ đọc hơn

• Object.groupBy() và Map.groupBy() giúp thao tác với mảng dữ liệu dễ dàng hơn, giảm bớt sự phụ thuộc vào các thư viện bên ngoài.

• Promise.withResolvers() cung cấp một cách tiếp cận rõ ràng và linh hoạt hơn để xử lý bất đồng bộ, giúp mã nguồn trở nên dễ hiểu và bảo trì hơn.

Nâng cao khả năng thao tác với chuỗi và biểu thức chính quy

• Cờ v trong Regular Expression giúp viết các biểu thức phức tạp theo cách dễ hiểu hơn, đặc biệt hữu ích cho xử lý văn bản, tìm kiếm dữ liệu và thao tác chuỗi.

Tạo tiền đề cho các tính năng mới trong tương lai

• Những đề xuất như Pipeline Operator (|>) và Records & Tuples đang được cân nhắc, hứa hẹn mang lại những cải tiến lớn hơn cho JavaScript trong các phiên bản tiếp theo.

Nhìn chung, ECMAScript 2024 (ES15) không chỉ giúp tối ưu hiệu suất và khả năng lập trình mà còn góp phần làm cho JavaScript trở thành một ngôn ngữ mạnh mẽ, linh hoạt hơn, đáp ứng nhu cầu của các dự án từ nhỏ đến lớn. Với những cập nhật này, lập trình viên JavaScript có thể viết mã hiệu quả hơn, dễ đọc hơn và tận dụng tốt hơn các công nghệ hiện đại.

Các tính năng mới trong ECMAScript 2024 (ES15) trong JavaScript

ECMAScript 2024 (ES15) mang đến nhiều tính năng mới giúp lập trình viên thao tác dữ liệu dễ dàng hơn, tối ưu hóa hiệu suất xử lý bất đồng bộ và cải thiện khả năng làm việc với bộ nhớ. Dưới đây là những cải tiến quan trọng trong phiên bản này.

Object.groupBy() và Map.groupBy()

Object.groupBy()

Phương thức Object.groupBy() giúp nhóm các phần tử trong một mảng dựa trên một tiêu chí nhất định, trả về một đối tượng (Object) có các khóa là tiêu chí nhóm và giá trị là mảng các phần tử thuộc nhóm đó.

Cú pháp

Object.groupBy(array, callback);

• array: Mảng cần nhóm.

• callback: Hàm nhận từng phần tử của mảng và trả về một giá trị làm tiêu chí nhóm.

Ví dụ

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const grouped = Object.groupBy(numbers, (num) => (num % 2 === 0 ? 'even' : 'odd'));

console.log(grouped);
// Output:
// {
//   odd: [1, 3, 5, 7, 9],
//   even: [2, 4, 6, 8, 10]
// }

Map.groupBy(array, callback);

const words = ['apple', 'banana', 'cherry', 'apricot', 'blueberry'];

const groupedWords = Map.groupBy(words, (word) => word.charAt(0));

console.log(groupedWords);
// Output:
// Map {
//   'a' => ['apple', 'apricot'],
//   'b' => ['banana', 'blueberry'],
//   'c' => ['cherry']
// }

const { promise, resolve, reject } = Promise.withResolvers();

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => {
  resolve("Data loaded successfully");
}, 2000);

promise.then(console.log);
// Output (sau 2 giây): "Data loaded successfully"

const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
buffer.resize(12);

const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
console.log(buffer.byteLength); // Output: 8

buffer.resize(12);
console.log(buffer.byteLength); // Output: 12

const sharedBuffer = new SharedArrayBuffer(4);
const int32 = new Int32Array(sharedBuffer);

Atomics.waitAsync(int32, 0, 0).value.then(() => {
  console.log("Woken up!");
});

// Một luồng khác sẽ đánh thức luồng đang ngủ:
setTimeout(() => {
  Atomics.notify(int32, 0, 1);
}, 2000);

const regex = /[\p{Letter}&&\p{Uppercase}]/v;
console.log(regex.test("A")); // true
console.log(regex.test("a")); // false
console.log(regex.test("1")); // false

const result = formatData(parseData(fetchData(url)));

const result = data
  .map(parseData)
  .filter(isValid)
  .map(formatData);

const result = fetchData(url)
  |> parseData
  |> formatData;

const double = (x) => x * 2;
const square = (x) => x * x;

const result = 5 |> double |> square;
console.log(result); // Output: 100

const user = #{ name: "Alice", age: 30 };

console.log(user.name); // "Alice"

//  Không thể thay đổi giá trị
user.age = 31; // TypeError: Cannot assign to read only property

const obj1 = { name: "Alice" };
const obj2 = { name: "Alice" };
console.log(obj1 === obj2); // false (vì là hai object khác nhau)

const rec1 = #{ name: "Alice" };
const rec2 = #{ name: "Alice" };
console.log(rec1 === rec2); // true (vì cùng nội dung)

const colors = #["red", "green", "blue"];

console.log(colors[0]); // "red"

//  Không thể thay đổi giá trị
colors[1] = "yellow"; // TypeError: Cannot assign to read only property