Điểm lại những tính năng sắp có của Javascript trong ECMAScript 2022 (ES13)

Vấn đề

Đến hẹn lại lên, kể từ năm 2016 ECMAScript đã cam kết mỗi năm sẽ phát hành một phiên bản của Javascript với những cải tiến và thêm những tính năng mới. Đến hiện tại là năm 2022 và chúng ta sắp có những tính năng gì? Hãy cũng điểm lại một số điểm nổi bật nhé.

Private slots

Javascript đã hỗ trợ cú pháp kiểu khai báo Class đã lâu tuy nhiên vẫn còn nhiều thiếu sót. Một trong những tính năng ES13 mang tới sẽ là thuộc tính private của Class.

class Person {
  #name;

  getName() {
      return this.#name;
  }

  setName(name) {
      this.#name = name;
  }
}

Với Private slots bạn sẽ không thể tự do truy cập vào thuộc tính name nữa mà phải thông qua get/set.

const p = new Person();
p.setName('2coffee.dev');
p.name; // undefined
p.getName(); // 2coffee.dev

Ngoài ra bạn có thể sử dụng hàm Object.hasOwn để xác định xem một Class có chứa một thuộc tính private xác định hay không.

Object.hasOwn(Person, 'name'); // true

Top-level await

Nếu như trước kia bạn muốn sử dụng await thì bắt buộc phải sử dụng trong một hàm async thì bây giờ bạn đã có thể sử dụng await ở bên ngoài async (top-level).

async function fetchData() {
  const resp = await fetch('https://jsonplaceholder.typicode.com/users');
  return resp.json();
}
fetchData();

# Bây giờ thì
const resp = await fetch('https://jsonplaceholder.typicode.com/users');
resp.json();

Ngoài ra tính năng này rất hữu ích với cú pháp import, như chúng ta đã biết import được thực hiện một cách bất đồng bộ giúp cho việc "tải" module nhanh hơn nhưng lại có một hạn chế là chúng ta phải viết nhiều mã hơn để đợi cho đến khi module được tải xong mới có thể sẵn sàng sử dụng các hàm có ở trong đó. Với ES13 cú pháp import sẽ hoạt động "như" đồng bộ bằng việc dùng Promise.all cho tất cả import.

Giả sử hai module first.mjs và second.mjs có export các hàm bất đồng bộ ví dụ như:

# first.mjs
async function first() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('first');
    }, 1000);
  });
}

export default first();

Sau đó sử dụng hai module trên:

import { first } from './first.mjs';
import { second } from './second.mjs';
console.log(first, second);

# sẽ tương tương như
import { promise as firstPromise, first } from './first.mjs';
import { promise as secondPromise, second } from './second.mjs';
export const promise = (async () => {
  await Promise.all([firstPromise, secondPromise]);
  console.log(first, second);
})();

Error Cause

Error cause là một cách tiếp cận mới về việc truy vết xử lý lỗi trong Javascript.
Hãy nhìn vào lấy dữ liệu sau của tôi:

const fetchData = async () => {
  return await fetch(url)
    .catch(err => {
       // Bạn sẽ làm gì với err?
    })
}

Bạn sẽ làm gì với err? Console.log ra err và ném (throw) ra một message thông báo "lấy dữ liệu thất bại"!?

const fetchData = async () => {
  return await fetch(url)
    .catch(err => {
       console.log(err);
       throw new Error('lấy dữ liệu thất bại');
    })
}

Khi gọi hàm fetchData mà có lỗi ta sẽ nhận được new Error('lấy dữ liệu thất bại') mà không thể nhận được err, đặc biệt nếu sử dụng fetchData lồng trong nhiều catch thì việc truy vết lỗi sẽ khó khăn bởi vì kết quả nhận được là một thông báo lỗi khác mà ta mong muốn chứ không phải là một err.

Giờ đây với ES13 bạn có thể sử dụng Error Cause để vừa đẩy ra new Error('lấy dữ liệu thất bại'), vừa đính kèm luôn cả err:

const fetchData = async () => {
  return await fetch(url)
    .catch(err => {
       throw new Error('lấy dữ liệu thất bại', { cause: err });
    })
}

Khi đó ta có thể lấy ra err trong fetchData theo cách:

try {
  resp = await fetchData();
  ...
} catch(e) {
  console.log('cause', e.cause);
}

Phương thức .at()

Sử dụng phương thức .at() để lấy ra phần tử tại vị trí index được gọi. Đặc biệt sử dụng index âm để lấy vị trí từ phải sang trái.

['a', 'b', 'c'].at(0); // a
['a', 'b', 'c'].at(-1); // c

Áp dụng cho tất cả Array và String.

RegExp match indices

Thêm flag /d vào regex để lấy ra vị trí bắt đầu - kết thúc của chuỗi tìm được. Vị trí này nằm trong thuộc tính indices.

const matchObj = /(a+)(b+)/d.exec('aaaabb');
console.log(matchObj.indices); // [[0, 6], [0, 4], [4, 6]]

Tổng kết

Trên đây là điểm lại một số điểm nổi bật sẽ phát hành trong ECMAScript 2022. Dự kiến ES13 sẽ được phát hành vào khoảng tháng 6/2022. Hãy cập nhật ngay!

Tham khảo:

• https://exploringjs.com/impatient-js/ch_new-javascript-features.html#new-in-es2022
• https://blog.saeloun.com/2021/11/25/ecmascript-top-level-await
• https://dev.to/hemanth/error-cause-in-javascript-425d