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

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

Tin ngắn hàng ngày dành cho bạn
  • Mấy hôm trước OpenAI giới thiệu Deep Research - một công cụ duyệt web để nghiên cứu và cho ra một bản tổng hợp chỉ trong vài chục phút - so với nhiều giờ làm việc đối với con người, theo như họ công bố.

    Tính năng này hiện chỉ có sẵn cho người dùng Pro. Mặc dù chưa được dùng thử, nhưng qua nhiều bài viết đều nhấn mạnh vào sự ấn tượng trước khả năng của công cụ mới này. Nếu vẫn chưa biết Deep Research làm được gì thì bạn cứ hình dung như thế này: Nói với nó "Tôi cần thông tin nghiên cứu về lượng tiêu thụ cà phê của thế giới trong năm ngoái". Thế thôi! Ngồi chờ một lúc để nó tìm kiếm và tổng hợp lại kết quả và gửi lại cho bạn một bài báo cáo chi tiết. Chà, ghê thật chứ!

    Ngay lập tức huggingface đã lên một bài viết cố gắng tái tạo lại công cụ này theo cách của họ. Chi tiết tại Open-source DeepResearch – Freeing our search agents. Và không có gì ngạc nhiên khi cả 2 đều mang hơi hướng của AI Agents.

    » Xem thêm
  • Sống đủ lâu trong thế giới Internet, bạn có thể thấy rằng mọi người ở đây khá háo hức chạy theo xu hướng và chúng lan truyền với tốc độ chóng mặt.

    Chỉ vài tháng trước, chúng ta vẫn còn kinh ngạc về trí thông minh của các mô hình ngôn ngữ lớn (LLM) có thể trả lời giống như con người, và ngay sau đó, chúng đã được cập nhật với khả năng suy nghĩ và lý luận đáng kinh ngạc. Chúng được ứng dụng rộng rãi không chỉ trong lĩnh vực lập trình. Gần đây, thuật ngữ AI Agents đã tạo nên một sự khuấy động.

    Vậy, AI Agents là gì? Trong bài viết ngắn này, tất nhiên là không thể đưa ra một định nghĩa ngắn gọn nhưng toàn diện. Bạn đọc có thể tham khảo bài viết rất chi tiết này tại đây Agents | Chip Huyền. Để dễ hình dung hơn, AI Agents có thể được coi là một người hoặc một thực thể nào đó. Bản thân các Agents được trang bị tất cả các công cụ cần thiết. Từ đó, các Agents có thể kết hợp chúng để hoàn thành một nhiệm vụ mà chúng ta giao.

    Vẫn còn hơi mơ hồ phải không? Một ví dụ thực tế là khi bạn ra lệnh cho các Agents truy cập Facebook vào lúc 8 giờ tối mỗi ngày, kiểm tra bất kỳ tin tức nổi bật nào từ bạn bè, sau đó gửi tóm tắt đến Telegram. Vậy là xong!

    » Xem thêm
  • Hôm qua đến nay, lượt truy cập tới từ Facebook tăng đột biến. Thường như thế là do ai đó chia sẻ bài viết của blog vào một nhóm nào đó.

    Cơ mà lần này là liên kết trực tiếp đến trang chủ luôn. Tò mò ghê, không biết ai chia sẻ, chia sẻ ở đâu nữa. Muốn biết để tìm hiểu "insight" ghê 🥹

    » Xem thêm

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:

Cao cấp
Hello

Tôi & khao khát "chơi chữ"

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (2)

Nội dung bình luận...
Avatar
Tiến Đức2 năm trước
Chỗ error kia hơi khó hiểu nhỉ
Trả lời
Avatar
Xuân Hoài Tống2 năm trước
B đọc kĩ lại xem chẳng qua là mình có thể "gắn" được error kèm trong lúc trả về error thôi :D
Avatar
Trịnh Thị Anh2 năm trước
Có ai đọc mãi mà không hiểu vụ import không ạ? Chắc mỗi t
Trả lời
Avatar
Tùng Nguyễn2 năm trước
import chạy bất đồng bộ, h c dùng await vào thì nó sẽ đồng bộ kiểu thế
Avatar
Xuân Hoài Tống2 năm trước
import là một cú pháp nhập một module theo cách bất đồng bộ vào file của bạn, chính vì bất đồng bộ nên trước kia bạn cần phải "chờ" cho mã được import xong hoàn toàn mới bắt đầu dùng được
Bấm hoặc cuộn mạnh để sang bài mới