Callback Function - Sự quan trọng và triển khai trong JavaScript

Khi bạn đã học lập trình, chắc hẳn bạn đã biết về function - một khái niệm cơ bản không thể thiếu trong lập trình. Nhưng bạn đã nghe đến Callback Function chưa? Callback Function là một phần quan trọng của JavaScript và nắm vững khái niệm này sẽ giúp bạn trở thành một lập trình viên JavaScript giỏi hơn rất nhiều.

1. Callback Function là gì?

Theo Wikipedia, Callback Function là một đoạn mã được sử dụng như một tham số truyền vào cho một hàm B nào đó. Hàm A được gọi ngay lập tức hoặc trễ một chút sau khi hàm B được gọi. Đơn giản hơn, hàm callback là một hàm được gọi khi một sự kiện xảy ra trong lập trình.

Hàm callback là một khái niệm lấy được từ lập trình hàm và đi vào chi tiết cách các hàm được sử dụng như một tham số (đối số). Trong JavaScript, mỗi hàm đều là một object hạng nhất và có thể được sử dụng như những object khác (ví dụ: chuỗi, số...). Điều này cho phép chúng ta sử dụng hàm callback như một tham số cho một hàm khác. Đây chính là ý tưởng cốt lõi đằng sau Callback Function.

2. Tại sao cần sử dụng Callback Function?

Hầu hết thời gian, chúng ta xây dựng chương trình và phần mềm theo hướng xử lý đồng bộ, có nghĩa là bước 2 chỉ được thực hiện sau khi bước 1 hoàn thành và chương trình mới chạy tiếp. Khi chúng ta yêu cầu dữ liệu từ một nguồn dữ liệu khác như API (phương thức trung gian), chúng ta không biết dữ liệu sẽ được trả về vào lúc nào.

Trong trường hợp như vậy, chúng ta muốn đợi dữ liệu xuất hiện, nhưng không muốn chương trình dừng lại trong quá trình tìm kiếm dữ liệu. Đây là lúc mà hàm callback trở nên hữu ích. Ngoài ra, callback còn giúp chúng ta tái sử dụng code.

Với JavaScript, callback function càng trở nên quan trọng hơn bao giờ hết. Lý do là JavaScript là một ngôn ngữ lập trình hướng sự kiện. Điều này có nghĩa là JavaScript có khả năng thực thi các tác vụ đồng thời và "lắng nghe" các sự kiện. Điều quan trọng là JavaScript không chờ đợi phản hồi từ một hàm để thực hiện hàm khác. Điều này có thể gây ra những vấn đề không mong muốn. Callback function giúp đảm bảo rằng một code chỉ được thực thi sau khi một code khác đã hoàn thành.

3. Phân loại Callback

Callback Function được chia thành 2 loại, dựa trên cách chúng được gọi: synchronous (xử lý đồng bộ) và asynchronous (xử lý không đồng bộ).

Synchronous callback function, còn được gọi là blocking callback function, khiến cho Higher-Order Function (hàm bậc cao) không hoàn thành nếu callback chưa chạy xong.

Greet() là một callback đồng bộ vì nó được chạy cùng lúc với hàm bậc cao map(). Cách gọi callback như sau:

1. Hàm bậc cao bắt đầu chạy: 'map() bắt đầu'
2. Hàm callback chạy: 'greet() đã được gọi'
3. Hàm bậc cao hoàn thành: 'map() hoàn thành'

Asynchronous callback, còn được gọi là non-blocking callback, đảm bảo rằng hàm bậc cao sẽ không chờ đợi callback function thực thi. Hàm bậc cao chỉ đảm bảo rằng callback function sẽ được thực thi trong tương lai sau một sự kiện xảy ra. Ví dụ: later() được thực thi sau 2 giây.

Ví dụ về hàm callback không đồng bộ

4. Cách triển khai

Hãy xem ví dụ dưới đây để hiểu cách triển khai Callback Function trong JavaScript:

// Từ dòng 1-9: Hàm calculateSum nhận một số n và một hàm callback. Nó tính tổng từ 1 đến n, xuất tổng tìm được và truyền cho callback function ở dòng 8.
function calculateSum(n, callback) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  callback(sum); // Gọi callback function và truyền tổng tìm được
}

// Từ dòng 12-14: Khi gọi hàm calculateSum, chúng ta cũng định nghĩa callback function bên trong hàm gọi. Callback function này nhận tổng từ calculateSum và tính giá trị trung bình.
calculateSum(5, function(sum) {
  let average = sum / 5;
  console.log("Giá trị trung bình là: " + average);
});

Hy vọng rằng với bài viết trên, bạn đã hiểu cơ bản về Callback Function và cách sử dụng nó trong JavaScript. Hãy tiếp tục học tập và áp dụng kiến thức này để trở thành một lập trình viên JavaScript giỏi!