Có gì hot? Tuần 16 - 2023

Có gì mới trong ECMAScript 2023?

Hội đồng TC39 vừa chốt đơn những tính năng của phiên bản ES2023. Cùng xem qua nhé.

Tìm một phần tử từ cuối mảng

Để tìm kiếm một phần tử trong mảng, chúng ta có thể dùng Array#find(fn) và Array#findIndex(fn). Hai phương thức này trả về phần tử hoặc vị trí của phần tử đầu tiên thỏa mãn điều kiện của hàm fn, tính từ đầu mảng. Ví dụ:

const arr = [0, 7, 12, 9, 21, 8]

// Tìm số lẻ đầu tiên trong mảng
arr.find((x) => x % 2 === 1) // 7
arr.findIndex((x) => x % 2 === 1) // 1

ES2023 bổ sung hai phương thức mới: Array#findLast(fn) và Array#findLastIndex(fn). Như tên gọi, hai phương thức này sẽ trả về phần tử/ vị trí của phần tử đầu tiên thỏa mãn hàm fn, nhưng tính từ cuối mảng.

const arr = [0, 7, 12, 9, 21, 8]

arr.findLast((x) => x % 2 === 1) // 21
arr.findLastIndex((x) => x % 2 === 1) // 4

Hiện tại bạn có thể sử dụng findLast() và findLastIndex() trên tất cả các trình duyệt.

Các phương thức mới cho mảng: toReversed(), toSorted(), toSpliced(), và with()

Các phương thức Array#reverse(), Array#sort(), và Array#splice() thay đổi (mutate) mảng khi được gọi. Điều này không đảm bảo tính bất biến (immutability). Do đó ES2023 bổ sung các phương thức sau vào Array.prototype:

• toReversed(): Đảo ngược vị trí các phần tử của mảng từ dưới lên
• toSorted(): Sắp xếp mảng
• toSpliced(): Xóa một/nhiều phần tử trong mảng, hoặc thay thế phần tử ở những vị trí nhất định

const a = [0, 7, 12, 9, 21, 8]

// Đảo ngược mảng
const reversed = a.toReversed() // [ 8, 21, 9, 12, 7, 0 ]

// Sắp xếp mảng
const sorted = a.toSorted((x, y) => x - y) // [ 0, 7, 8, 9, 12, 21 ]

// Xóa phần tử ở chỉ mục 1
const removed = a.toSpliced(1, 1) // [ 0, 12, 9, 21, 8 ]

a === reversed // false
a === sorted // false
a === removed // false

Bên cạnh đó, chúng ta cũng có phương thức mới Array#with(index, value). Phương thức này dùng để thay thế giá trị của một phần tử tại vị trí nhất định. Chẳng hạn như:

const a = [0, 7, 12, 9, 21, 8]

const b = a.with(1, 3) // [0, 3, 12, 9, 21, 8]
a === b // false

Trừ Firefox ra, các trình duyệt khác đều đã hỗ trợ phương thức này.

Chuẩn hóa cú pháp hashbang

Khi viết script để chạy trong CLI bằng Node.js, có thể bạn sẽ dùng hashbang (hay còn gọi là shebang).

// Giả sử chúng ta có tập tin cli.js
#!/usr/bin/env node
console.log('Hello')

Và sử dụng như vầy:

$ chmod +x cli.js
$ ./cli.js # Không cần phải `node cli.js` nữa
Hello

Vấn đề là #! không phải là cú pháp hợp lệ trong ECMAScript, và thường thì dòng hashbang sẽ được môi trường chủ bỏ đi trước khi chuyển qua cho Node.js thực thi. ES2023 đề xuất chuẩn hóa cú pháp của hashbang, và chỉ cho phép đặt hashbang ở đầu tập tin.

Sử dụng Symbols làm khóa cho WeakMap

Hiện tại thì bạn chỉ có thể dùng object làm khóa cho WeakMap. ES2023 mở rộng ra, cho phép bạn dùng Symbol để làm khóa luôn.

const weak = new WeakMap()
const key = Symbol('ref')
weak.set(key, 'ECMAScript 2023')

console.log(weak.get(key))

Tính năng này đã được hầu hết các trình duyệt hỗ trợ (trừ Firefox).

Nếu chưa biết về WeakMap và WeakSet thì đừng bỏ qua bài viết Tìm hiểu Map và Set trong JavaScript nha.

Tin vắn

• Node.js phát hành phiên bản v20.0.0, thử nghiệm tính năng Permission Model cho phép lập trình viên giới hạn quyền truy cập tài nguyên của ứng dụng, chẳng hạn như không cho phép sử dụng hệ thống tập tin, tạo process con hay thread mới. Nghe giống Deno ha. Phiên bản này cũng nâng cấp lên V8 11.3.

• TypeScript vừa merge tính năng mới, cho phép trả về bất cứ dữ liệu nào có thể render được như string, number, promises… trong React component, thay vì chỉ null | JSX.Element.

• LightningCSS, chương trình xử lý CSS viết bằng Rust siêu nhanh của Parcel, vừa phát hành phiên bản 1.20.0, mang đến những cải thiện khi viết media và container queries, hỗ trợ cú pháp of S khi dùng :nth-child(), cập nhật dữ liệu về tính tương thích của các trình duyệt…

• Mozilla mở rộng tính năng Total Cookie Protection cho người dùng trên toàn thế giới. Tính năng này tạo riêng một “hộp bánh” cho mỗi website, và chỉ website đó mới có thể đọc dữ liệu cookie của nó, giúp hạn chế người dùng bị theo dõi khi truy cập nhiều website khác nhau.

• Chrome thử nghiệm một giao diện mới với nhiều thông tin hơn khi cài đặt web app trên desktop và mobile. Lập trình viên có thể thêm vào nhiều screenshots giúp người dùng dễ hình dung hơn về ứng dụng được cài đặt.

Mới thấy trên quầy

Một vài thư viện/ công cụ hữu ích mà bọn mình mới phát hiện 😛

• yoavbls/pretty-ts-errors: Extension cho VSCode giúp thông báo lỗi của TypeScript trở nên dễ đọc (hiểu) hơn.

• gradient.style: Công cụ tạo gradient siêu xịn của Adam Argyle, mặc định sử dụng màu oklch nên bạn nên xem bằng Safari 16.4 nhe.

• azurystudio/cheetah: web framwork mới cho Deno, tự quảng cáo là nhanh như báo.

• Rich-Harris/headless-qr: Thư viện tạo mã QR gọn nhẹ của Rich Harris, tác giả Svelte.

• microsoft/griffel: Thư viện CSS-in-JS của Microsoft.

Đọc/ xem gì cuối tuần

• Optimize Interaction to Next Paint: Hướng dẫn đầy đủ chi tiết để phân tích và giải quyết khi ứng dụng có số đo INP cao.

• Container Query Units and Fluid Typography: Bài viết của Stephanie Eckles giới thiệu về cách xếp chữ co giãn (fluid typography) sử dụng các tính năng mới của CSS như container queries, hàm max(), min(), calc(), và clamp()…

• Offline Is Just Online With Extreme Latency: Jim Nielsen chia sẻ những suy nghĩ sau khi xem video “Local-first Software” của Peter Van Hardenberg. Khi xem offline là trạng thái online với độ trễ siêu lớn có thể thay đổi cách bạn xây dựng ứng dụng chăng?

• It’s time to learn oklch color: Mình chưa kịp xem kỹ về HSL thì bây giờ đã có thêm OKLCH rồi 🥲

• Becoming Rustacean: Rust Learning Path from Novice to Mastery: Giờ nhà nhà học Rust người người học Rust, bạn có muốn bị bỏ lại phía sau hem?

Kết

Hẹn gặp lại các bạn trong tuần tiếp theo 👋