Map và ForEach trong JavaScript khác nhau như thế nào?
Nếu bạn đã làm việc với JavaScript một thời gian, có lẽ bạn đã sử dụng qua hai phương thức gần tương tự nhau là Array.prototype.map() và Array.prototype.forEach().
Vậy, chúng có điểm gì khác nhau?

1. Định nghĩa Map & ForEach

Đầu tiên, chúng ta hãy xem các định nghĩa trên trang MDN:
  • forEach() — thực thi hàm đã được cung cấp trên mỗi phần tử của mảng.
  • map() — tạo một mảng mới là tập hợp những kết quả của việc gọi hàm được cung cấp trên mỗi phần tử trong mảng.
Chính xác thì nó là gì?
Phương thức forEach() không trả về bất cứ thứ gì. Nó đơn giản chỉ là gọi một hàm đã được cung cấp trên mỗi phần tử trong mảng của bạn. Hàm callback cho phép thay đổi ngay trên mảng được gọi.
Trong khi đó, phương thức map() cũng sẽ gọi hàm callback trên mọi phần tử trong mảng. Sự khác biệt là map() sử dụng các giá trị trả về của hàm callback và trả về một mảng mới có cùng kích cỡ với mảng ban đầu.

2. Ví dụ

Xem xét mảng bên dưới. Nếu chúng ta muốn nhân đôi mỗi phần tử trong mảng, chúng ta có thể dùng map() hoặc forEach().



    ForEach:
        Lưu ý rằng bạn không cần phải sử         dụng return trong hàm callback             bởi nó sẽ bị bỏ qua.



Map:


3. Đánh giá tốc độ

jsPerf là một website để so sánh tốc độ thực thi của các phương thức và hàm khác nhau trong JavaScript.
Đây là kết quả thu được sau khi kiểm tra hai phương thức forEach() và map():

Như bạn có thể thấy, trên máy của tôi thì forEach() chậm hơn 71% so với map().  Trên trình duyệt của bạn có lẽ sẽ khác. Bạn có thể kiểm tra các kết quả của bài test tại đây:

4. Đánh giá về chức năng

Cần hiểu rằng sử dụng map() được yêu thích hơn trong lập trình hàm.
Đó là bởi vì forEach() có thể thay đổi mảng ban đầu, trong khi map() trả về một mảng hoàn toàn mới.

5. Cái nào tốt hơn?

Điều đó phụ thuộc vào việc bạn muốn thực hiện.
forEach() thích hợp hơn khi bạn không muốn thay đổi dữ liệu trong mảng, thay vào đó ta chỉ muốn làm gì đó với nó, chẳng hạn lưu vào cơ sở dữ liệu hay in ra màn hình console:

Và map() sẽ phù hợp khi ta muốn thay đổi dữ liệu ra một mảng mới và có tốc độ tốt hơn. Điều đó cho phép chúng ta có thể gọi một chuỗi các phương thức ( map(), filter(), reduce(), …)

Ở ví dụ trên, hàm map() sẽ giúp nhân đôi giá trị các phần tử. Sau đó, filter sẽ giữ lại các giá trị lớn hơn 5.Kết quả cuối cùng nhận được là [6,8,10].
Tổng kết
  • Tất cả những gì bạn có thể làm trên forEach() bạn đều có thể làm với map() và ngược lại.
  • map() cấp phát bộ nhớ và lưu trữ các giá trị trả về. forEach() bỏ qua các giá trị trả về.
  • forEach() sẽ nhận một hàm callback để thay đổi mảng hiện tại, thay vào đó map() sẽ trả về một mảng mới.
Bài viết được dịch và sửa từ nguồn: https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
Hiện tại bên mình đang cố gắng đạt lượng Like trên Facebook để sắp tới bọn mình muốn chạy một số khoá học online trên Youtube thế nên mong các bạn hãy ủng hộ và tiếp sức cho nhóm mình nhé. Xin cảm ơn các bạn!!!!