Cách JavaScript Array Methods giúp bạn "dọn dẹp" code và thoát cảnh for-loop rối rắm

Tạm biệt những vòng lặp for dài dằng dặc

Bạn đã bao giờ nhìn vào một đoạn code JavaScript dài hàng chục dòng chỉ để lọc ra vài cái tên từ danh sách, rồi thầm nghĩ: "Ủa, có cách nào viết ngắn hơn mà vẫn dễ hiểu không?" chưa? Ngày xưa, khi mới học code, chúng mình thường dùng for cho mọi thứ. Nhưng thực tế, việc lạm dụng for khiến code trở nên rất khó bảo trì và dễ gây ra lỗi "off-by-one" (sai lệch 1 đơn vị) cực kỳ khó chịu.

Sử dụng JavaScript Array Methods chính là cách giúp bạn viết code theo phong cách Declarative (khai báo) — nghĩa là bạn chỉ cần nói cho máy tính biết bạn muốn kết quả gì, thay vì phải chỉ từng bước cách thực hiện. Điều này cũng giống như việc bạn dùng ESLint & Prettier để dọn rác code, giúp mọi thứ trở nên sạch sẽ và chuyên nghiệp hơn hẳn.

map() - Khi bạn muốn mọi thứ "biến hình"

Hãy tưởng tượng bạn có một danh sách giá sản phẩm và muốn thêm ký hiệu "$" vào trước mỗi con số. Thay vì tạo một mảng trống rồi push từng phần tử vào, map() sẽ giúp bạn làm điều đó trong một nốt nhạc. Nó tạo ra một mảng mới với các giá trị đã được thay đổi mà không hề làm ảnh hưởng đến mảng gốc.

const prices = [10, 20, 30];
const formattedPrices = prices.map(price => `${price}`);
// Kết quả: ["$10", "$20", "$30"]

filter() - Chỉ giữ lại những gì thực sự xứng đáng

Trong quá trình làm dự án thực tế, việc lọc dữ liệu là chuyện như cơm bữa. Bạn muốn tìm những đơn hàng đã thanh toán, hay những bài viết có lượt xem cao? filter() sinh ra là để làm việc này. Nó giống như một cái rây lọc, chỉ cho phép những phần tử thỏa mãn điều kiện đi qua.

Việc nắm vững cách lọc dữ liệu không chỉ giúp code gọn hơn mà còn hỗ trợ đắc lực khi bạn làm việc với các thư viện hiện đại như trong React 19 để quản lý state hiệu quả. Đừng quên tham khảo thêm tài liệu chuẩn tại MDN Web Docs để hiểu sâu hơn về các tham số của hàm này nhé.

reduce() - Người "thu dọn" cuối cùng

Đây có lẽ là phương thức gây lú nhất cho những bạn mới bắt đầu. Tuy nhiên, sức mạnh của reduce() là không giới hạn. Nó có thể biến một mảng thành bất cứ thứ gì: một con số tổng, một object gom nhóm dữ liệu, hoặc thậm chí là một chuỗi văn bản duy nhất.

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((accumulator, current) => accumulator + current, 0);
// Kết quả: 10

Khi đã làm chủ được bộ ba map, filter và reduce, bạn sẽ thấy việc xử lý dữ liệu ở Frontend không còn là cực hình nữa. Code của bạn sẽ trông sang xịn mịn như cách bạn dùng CSS Grid để vẽ layout vậy.

Nhưng mà này, liệu việc sử dụng quá nhiều Array Methods có làm ứng dụng của bạn chạy chậm đi khi dữ liệu lên tới hàng nghìn phần tử không? Chúng mình sẽ cùng mổ xẻ vấn đề hiệu năng này ở bài viết tiếp theo tại uxui.edu.vn nhé!