1. Lời nói đầu:

Trong bài viết này mình sẽ cùng các bạn tìm hiểu về callback function trong javascript, tại sao chúng ta lên sử dụng callback function và với hàng loạt các hàm hỗ trợ mới, và đặc biệt là Arrow Function thì liệu callback function có bị lỗi thời. Và một số lựa chọn mới sẽ tốt hơn callback function trong một số trường hợp

2. Callback Function là gì:

Theo định nghĩa

A callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time.

---

Trước tiên, ta cần biết rằng một function trong JavaScript thực chất là một first-class object, bởi thế hàm sẽ mang nhiều tính chất giống các kiểu dữ liệu thông thường như Number string, array. Do vậy chúng ta có thể thực hiện những việc như: Lữu trữ hàm trong một biến, truyền một hàm vào như một tham số, khai báo một hàm bên trong một hàm, return hàm như một giá trị trả về.

Chúng ta cùng đi vào một ví dụ nhỏ để hiểu hơn nhé: Mình sẽ có một bài toán khi thấy mình chơi game, đám bạn mình sẽ auto khen, ok bắt đầu bài toán nào.

function khenNgoi(noiDung) {
    return  console.log("Wow " + noiDung); 
}
function chsGame(friend, khenNgoi) {
    const noiDung = "M chs hay thế, bất ngờ ***";
    khenNgoi(noiDung);
}

Theo ví dụ trên thì khenNgoi() là một hàm Callback function còn chsGame gọi là Higher-order function. Như các bạn thấy thì Callback function là hàm được truyền vào một hàm cha khác như một tham số đầu vào, sau đó sẽ được gọi kích hoạt bên trong hàm cha này. Higher-order function: là hàm có hoạt động dựa trên 1 hàm khác, tức là: nó có thể nhận 1 hàm làm tham số đầu vào(hàm cha trong khái niệm callback function chính là một higher-order function), hoặc sẽ return ra 1 hàm khác. Một trong 2 điều kiện đó xảy ra thì được gọi là hàm higher-order.

3. Callback Function hoạt động như thế nào

Ta có thể truyền function như là một biến và return nó trong một function khác. Khi ta truyền callback function như là một tham số tới một function khác, ta chỉ truyền định nghĩa. Nó sẽ được thực thi khi ta truyền cả function dưới dang tham số

Và chúng ta đã có định nghĩa của function callback dưới dạng tham số, ta có thể thực thi bất kì lúc nào trong function chứa nó.

Chú ý: Function Callback không tự thực thi. Mà chỉ được thực thi khi function chứa nó gọi đến callback function. Đây cũng là một trong các tính chất dùng để phát triển tính bất đồng bộ trong javascript.

Một ví dụ nhỏ để các bạn thấy cách thức hoạt động của callback function: Mình có bài toán cộng tổng 2 số a và b như sau

Viết thường không sử dụng callback:

let add = (a, b) => (a + b);

Sử dụng callback: trong trường hợp này mình sử dụng callback để trả ra cho người đang sử dụng hàm này

let add = (a, b, CallBack) => {
   setTimeout(() => {
       let err, result;
       if(typeof a != 'number' || typeof b != 'number') {
           err = 'Tham so phai co kieu number';
           return CallBack(err, result);
       }
       result = a + b;
       CallBack(err, result);
   }, 1000);
};

Khi gọi hàm add, thứ ta cần quan tâm không phải là callback vì nó chỉ là hàm trả ra thôi, chúng ta chỉ cần nó trả ra err thì là lỗi gì nếu không thì trả ra kết quả.

//Su dung mot callback, thứ tự của các đối số rất quan trọng
add(4, 5, (err, result) => {
   if(err) return console.log('Error' + err);
   console.log('Ket qua: ' + result);
});

Hoặc có thể viết ngắn gọn như sau:

let add = (a, b, CallBack) => {
   setTimeout(() => {
       if(typeof a != 'number' || typeof b != 'number') {
           return CallBack(new Error('Tham so phai co kieu number'));
       }
       CallBack(undefined, a + b);
   }, 1000);
};
 
add(4, 5, (err, result) => {
   if(err) return console.log('Error' + err);
   console.log('Ket qua: ' + result);
});

Chúng ta sẽ ngầm hiểu CallBack này sẽ gồm 2 tham số là error và result như sau:

return CallBack(new Error('Tham so phai co kieu number'), undefined);

Chúng ta có hoàn toàn có thể viết lại như sau:

return CallBack(new Error('Tham so phai co kieu number'));

4. Kết luận

Đọc tới đây chắc các bạn cũng đã hình dung được callback function và một số hàm cơ bản trong callback function là gì cũng như cách sử dụng, hoạt động của nó rồi đúng không ạ . Thường thì callback function thường được dùng để thực hiện các tác vụ bất đồng bộ hoặc cho những tác vụ event listeners/handlers. Nhưng hiện nay các tác vụ bất đồng bộ sẽ không còn sử dụng callback nữa vì nó sẽ gập phải một số vấn đề về callback hell, mình sẽ nói dõ vấn đề này hơn ở bài Promise mong các bạn ủng hộ.