Cách JavaScript hiện đại giúp bạn viết code "sạch" và bớt "rối não"

Đã bao giờ ông rơi vào cảnh thức đến 2 giờ sáng chỉ để mò mẫm trong một đống vòng lặp lồng nhau, hay cố gắng nhóm (group) một mảng dữ liệu từ API mà code cứ dài dằng dặc chưa? Là một người làm JavaScript trong kỷ nguyên hiện đại, nếu vẫn còn dùng những cách cũ kỹ, ông đang tự làm khó mình đấy.

Thế giới lập trình giao diện (Frontend) đang thay đổi chóng mặt. JavaScript giờ đây không còn là "đứa con ghẻ" hay gây lỗi vặt nữa, mà đã trở nên cực kỳ thông minh với những tính năng mới giúp anh em mình xử lý dữ liệu mượt mà chẳng kém gì cách Designer dùng Figma Auto Layout để sắp xếp các lớp layer vậy. Hãy cùng mình điểm qua những "vũ khí" mới nhất giúp code của ông trông chuyên nghiệp và dễ bảo trì hơn gấp bội.

1. Gom nhóm dữ liệu cực nhanh với Object.groupBy

Ngày trước, muốn gom một danh sách sản phẩm theo danh mục (category), chúng mình thường phải dùng reduce hoặc chạy vòng lặp forEach rồi tạo một đối tượng trung gian. Viết xong nhìn lại đống code đó, đôi khi chính mình cũng thấy mệt.

Giờ đây, JavaScript đã cho ra mắt Object.groupBy. Chỉ với một dòng code, mọi thứ được sắp xếp ngăn nắp. Nó giống như việc ông dùng tính năng phân loại trong các phần mềm quản lý vậy, cực kỳ trực quan và sạch sẽ.

const inventory = [
  { name: "Giày Nike", type: "shoes" },
  { name: "Áo Adidas", type: "shirt" },
  { name: "Giày Puma", type: "shoes" }
];

// Cách hiện đại: Gom nhóm theo loại (type)
const result = Object.groupBy(inventory, (item) => item.type);

console.log(result.shoes); // [{ name: "Giày Nike"... }, { name: "Giày Puma"... }]

2. Promise.withResolvers: Kiểm soát bất đồng bộ như một vị thần

Làm việc với các tác vụ bất đồng bộ (Async - những việc cần thời gian chờ như tải dữ liệu) luôn là nỗi ám ảnh nếu ông không kiểm soát tốt các trạng thái chờ, thành công hay thất bại. Trước đây, chúng mình thường phải tạo một Promise rồi bao bọc toàn bộ logic bên trong cái khung đó.

Với Promise.withResolvers, ông có thể lấy được các hàm điều khiển (resolve - thành công, reject - thất bại) ra bên ngoài. Điều này cực kỳ hữu ích khi ông cần xử lý các sự kiện từ người dùng hoặc các tiến trình chạy ngầm phức tạp mà không muốn lồng code quá sâu.

Thay vì viết code như một cái "tổ chim", ông có thể giữ mọi thứ trên một mặt phẳng tuyến tính, giúp việc gỡ lỗi (debug) trên VS Code trở nên dễ dàng và ít nhức đầu hơn hẳn.

3. Sắp xếp mảng mà không làm hỏng dữ liệu gốc

Đây là một trong những cái bẫy mà người mới học JavaScript rất hay mắc phải: dùng hàm sort(). Hàm này sẽ thay đổi luôn cái mảng gốc của ông. Hãy tưởng tượng ông đang làm một danh sách trong React 19, ông chỉ muốn hiển thị danh sách theo tên nhưng lại vô tình làm thay đổi luôn dữ liệu chính trong State, dẫn đến những lỗi cực kỳ khó hiểu.

JavaScript hiện đại mang đến bộ ba: toSorted(), toReversed(), và toSpliced(). Điểm đặc biệt là chúng sẽ trả về một bản sao mới đã được xử lý, giữ cho dữ liệu gốc của ông luôn "trong trắng".

• toSorted(): Sắp xếp mảng và trả về mảng mới.
• toReversed(): Đảo ngược mảng và trả về mảng mới.
• toSpliced(): Cắt hoặc thêm phần tử và trả về mảng mới.

Việc nắm vững những tính năng mới của JavaScript không chỉ giúp ông viết code nhanh hơn mà còn thể hiện tư duy của một Senior (lập trình viên cấp cao). Đừng để bản thân bị tụt lại phía sau với những cách viết từ thời "đồ đá". Ông đã thử áp dụng Object.groupBy vào dự án thực tế nào chưa, hay vẫn đang trung thành với những vòng lặp truyền thống?

Và ông biết không, khi logic code đã gọn gàng, điều tiếp theo ông cần quan tâm chính là làm sao để giao diện cũng mượt mà như code vậy...