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

JavaScript là một trong những ngôn ngữ lập trình phổ biến và quan trọng nhất hiện nay, liên tục được cập nhật để cải thiện hiệu suất và tối ưu hóa cú pháp. ECMAScript 2022 (ES13) mang đến nhiều tính năng mới giúp lập trình viên viết code ngắn gọn hơn, dễ đọc hơn và hiệu quả hơn.

Từ việc cải tiến cách làm việc với class bằng private fields, private methods đến việc đơn giản hóa truy xuất mảng với .at(), ES13 giúp tăng tính linh hoạt và bảo mật trong lập trình JavaScript. Đặc biệt, Top-Level Await cho phép xử lý bất đồng bộ mượt mà hơn trong các module.

Vậy những tính năng này hoạt động ra sao, và chúng giúp lập trình JavaScript hiện đại như thế nào? Hãy cùng tìm hiểu chi tiết trong bài viết này!

ECMAScript 2022 (ES13) là gì?

ECMAScript 2022 (ES13) là phiên bản mới nhất của tiêu chuẩn ECMAScript được phát hành vào năm 2022. Đây là nền tảng của JavaScript – ngôn ngữ lập trình phổ biến nhất hiện nay. Mỗi năm, ECMAScript được cập nhật để mang đến những cải tiến giúp lập trình viên làm việc hiệu quả hơn, tối ưu hiệu suất và cải thiện khả năng đọc hiểu mã nguồn.

Tầm quan trọng của ES13 trong việc nâng cao hiệu suất và tối ưu hóa JavaScript

ES13 không chỉ bổ sung các tính năng giúp lập trình viên viết code ngắn gọn, dễ đọc hơn mà còn cải thiện hiệu suất xử lý, giúp JavaScript trở nên mạnh mẽ hơn trong các ứng dụng thực tế. Một số lý do khiến ES13 quan trọng đối với lập trình JavaScript hiện đại:

Cải thiện cách truy xuất phần tử trong mảng với .at()

• Hỗ trợ truy cập phần tử từ cuối mảng một cách rõ ràng, thay vì dùng arr[arr.length - 1].

Hỗ trợ xử lý bất đồng bộ tốt hơn với Top-Level Await

• Giúp sử dụng await trực tiếp trong các module ES mà không cần bọc trong hàm async.

Tăng cường bảo mật với Private Fields và Private Methods trong class

• Hạn chế quyền truy cập vào các thuộc tính riêng tư, giúp bảo vệ dữ liệu tốt hơn.

Cải tiến cú pháp Regular Expression với d flag

• Cho phép lấy thông tin chi tiết về vị trí khớp trong chuỗi, giúp xử lý dữ liệu mạnh mẽ hơn.

Những cải tiến giúp lập trình viên viết code dễ dàng và hiệu quả hơn

Những tính năng mới trong ES13 không chỉ giúp giảm thiểu lỗi khi lập trình mà còn làm cho code ngắn gọn hơn, dễ hiểu hơn.

.at() giúp truy xuất mảng linh hoạt hơn

• Thay vì viết arr[arr.length - 1], lập trình viên có thể dùng arr.at(-1), giúp code gọn gàng và dễ đọc hơn.

Top-Level Await hỗ trợ xử lý bất đồng bộ đơn giản hơn

• Không cần bọc trong async function, có thể dùng await trực tiếp trong module ES.

Private Fields và Private Methods bảo vệ dữ liệu trong class

• Các thuộc tính trong class có thể đặt ở chế độ riêng tư bằng cách dùng dấu #, giúp ngăn chặn truy cập từ bên ngoài.

d flag trong RegEx giúp kiểm soát vị trí khớp

• Cải tiến cú pháp Regular Expression, hỗ trợ kiểm tra vị trí xuất hiện của kết quả khớp, hữu ích khi thao tác với dữ liệu phức tạp.

Nhờ những cải tiến này, ES13 giúp lập trình viên tiết kiệm thời gian, viết code rõ ràng hơn, bảo mật hơn và dễ bảo trì hơn, góp phần nâng cao hiệu suất của các ứng dụng JavaScript hiện đại.

Các tính năng mới trong ECMAScript 2022 (ES13)

ECMAScript 2022 mang đến nhiều cải tiến giúp lập trình viên làm việc hiệu quả hơn với JavaScript. Dưới đây là các tính năng quan trọng của ES13 và cách chúng giúp tối ưu hóa code.

Class Fields và Private Methods chính thức được chuẩn hóa

Trước đây, khi khai báo thuộc tính trong class, lập trình viên phải đặt chúng trong constructor. Tuy nhiên, ES13 đã chuẩn hóa Class Fields và Private Methods, giúp code dễ hiểu hơn và hạn chế truy cập không mong muốn từ bên ngoài.

Tính năng mới

• Thuộc tính riêng tư (Private Fields): Dùng dấu # trước tên thuộc tính để giới hạn quyền truy cập bên trong class.
• Phương thức riêng tư (Private Methods): Giống như private fields, private methods chỉ có thể được gọi bên trong class.

Ví dụ về Class Fields và Private Methods

class User {
  #password; // Private field
  
  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }

  #encryptPassword() { // Private method
    return `***${this.#password}***`;
  }

  getEncryptedPassword() {
    return this.#encryptPassword();
  }
}

const user = new User("Alice", "12345");
console.log(user.name); // Alice
console.log(user.getEncryptedPassword()); // ***12345***
console.log(user.#password); //  Lỗi: Private field không thể truy cập
console.log(user.#encryptPassword()); //  Lỗi: Private method không thể truy cập

• Bảo vệ dữ liệu quan trọng bên trong class.
• Tránh sửa đổi ngoài ý muốn từ bên ngoài class.

Static Class Fields và Static Private Methods

ES13 hỗ trợ khai báo thuộc tính tĩnh (Static Fields) và phương thức tĩnh (Static Methods) cho class, giúp tạo ra các giá trị hoặc hành vi không cần khởi tạo đối tượng.

• Static Fields (static): Các thuộc tính không thay đổi giữa các thể hiện của class.
• Static Private Methods (static #method): Phương thức riêng tư, chỉ có thể gọi bên trong class.

Ví dụ về Static Fields và Static Private Methods

class Counter {
  static count = 0; // Static field

  static #increment() { // Static private method
    Counter.count++;
  }

  static add() {
    this.#increment();
  }
}

Counter.add();
Counter.add();
console.log(Counter.count); // 2
console.log(Counter.#increment()); //  Lỗi: Không thể gọi private method từ bên ngoài

const regex = /a+/d;
const result = regex.exec("banana");

console.log(result.indices); // [[1, 2]] (Chỉ mục của chữ 'a' đầu tiên)

const obj = { name: "Alice", age: 25 };

console.log(Object.hasOwn(obj, "name")); // true
console.log(Object.hasOwn(obj, "gender")); // false
console.log(obj.hasOwnProperty("name")); // true (Cách cũ)

// module.js
export const data = await fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json());

console.log(data);

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

// Cách cũ (không an toàn nếu object bị ghi đè prototype)
console.log(user.hasOwnProperty("name")); // true
console.log(Object.prototype.hasOwnProperty.call(user, "name")); // true

// Cách mới trong ES13
console.log(Object.hasOwn(user, "name")); // true (Gọn gàng hơn)
console.log(Object.hasOwn(user, "gender")); // false

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.at(0));  // 10 (Phần tử đầu tiên)
console.log(numbers.at(-1)); // 50 (Phần tử cuối cùng)

// Cách cũ
console.log(numbers[numbers.length - 1]); // 50 (Dài dòng hơn)

class User {
  #password; // Private field

  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }

  #encryptPassword() { // Private method
    return `***${this.#password}***`;
  }

  getEncryptedPassword() {
    return this.#encryptPassword();
  }
}

const user = new User("Alice", "12345");
console.log(user.getEncryptedPassword()); // ***12345***
console.log(user.#password); //  Lỗi: Không thể truy cập private field
console.log(user.#encryptPassword()); //  Lỗi: Không thể truy cập private method

// data.js
export const data = await fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json());

console.log(data);

const regex = /a+/d;
const result = regex.exec("banana");

console.log(result.indices); // [[1, 2]] (Chỉ mục của chữ 'a' đầu tiên)

const promise1 = new Promise((_, reject) => setTimeout(reject, 100, "Lỗi"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, "Thành công"));

Promise.any([promise1, promise2]).then(console.log); 
//  Kết quả: "Thành công" (Trả về Promise đầu tiên thành công)

class User {
  #password; // Private field

  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }

  #getMaskedPassword() { // Private method
    return `***${this.#password}***`;
  }

  getPassword() {
    return this.#getMaskedPassword();
  }
}

const user = new User("Alice", "12345");
console.log(user.getPassword()); //  ***12345***
console.log(user.#password); //  Lỗi: Không thể truy cập private field

const obj = { name: "Alice" };
console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("age")); //  false

const obj = { name: "Alice" };
console.log(Object.hasOwn(obj, "name")); // true
console.log(Object.hasOwn(obj, "age")); //  false

const numbers = [10, 20, 30, 40, 50];
console.log(numbers[numbers.length - 1]); // 50 (Phần tử cuối cùng)
console.log(numbers[-1]); //  Lỗi (Không hỗ trợ số âm)

console.log(numbers.at(-1)); //  50 (Dễ đọc hơn)
console.log(numbers.at(0));  //  10 (Phần tử đầu tiên)

async function fetchData() {
  const data = await fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json());
  console.log(data);
}

fetchData();

const data = await fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json());
console.log(data);