Callback Function trong JavaScript là gì? tại sao lại được sử dụng nhiều như vậy?

Xin chào các bạn đọc của homiedev, chúng ta đã cùng nhau đi được một đoạn đường kha khá với các bài viết về học JavaScript cơ bản rồi. Để tiếp tục thì hôm nay chúng ta sẽ cùng nhau tìm hiểu về Callback Function trong JavaScript nhé!

CallBack Function trong JavaScript

Như chúng ta đã biết function là một khối code thực hiện một tác vụ nào đó khi nó được gọi. Ví dụ:

// function
function displayBlogName(name) {
    console.log(`Chào các bạn, đây là blog ${name}`);
}

displayBlogName('homiedev.com'); 
// Chào các bạn, đây là blog homiedev.com

Trong chương trình trên, mình đã truyền giá trị chuỗi name cho hàm displayBlogName().

Trong JavaScript, chúng ta cũng có thể truyền một function khác làm đối số cho một function. Function được truyền như một đối số và sử dụng bên trong một function khác được gọi là callback function 😋. Ví dụ:

// function có tham số là: name và function callback 
// callback là tên tùy các bạn đặt - nó là hàm mà chúng ta muốn truyền

function displayText(name, callback) {
    console.log('Hi mình là ' + name);
    callback(); // thực thi hàm callback
}

// callback function
function displayAge() {
    console.log('Mình 16 tuổi 👧');
}

// truyền function displayAge làm đối số của displayText
displayText('Nhi', displayAge);

Kết quả chúng ta nhận được:

Hi mình là Nhi
Mình 16 tuổi 👧

Trong đoạn code trên, có hai function. Khi gọi hàm displayText(), chúng ta truyền hai đối số bao gồm một string và một function.

Hàm displayAge được truyền như một đối số và sử dụng bên trong hàm displayText, lúc này displayAge được gọi là callback function 😀.

Callback Function giúp được gì?

Khi sử dụng một callback function, chúng ta có thể đợi kết quả của một hàm trước đó và sau đó thực hiện một lệnh gọi hàm khác.

Trong ví dụ dưới đây, chúng ta sẽ sử dụng method setTimeout() để giả lập một chương trình cần thời gian thực thi, ví dụ như chúng ta chờ lấy dữ liệu từ máy chủ.

function greet() {
    console.log('Đây là blog homiedev!');
}

function displayName(name) {
    console.log(`Xin chào ${name}`);
}

setTimeout(greet, 2000);
displayName('Minh');

Kết quả:

Xin chào Minh
Đây là blog homiedev!

Như chúng ta đã biết, method setTimeout() sẽ thực thi một khối mã sau thời gian đã thiệt lập.

Ở đây, hàm greet() sẽ được gọi sau 2000 mili giây (2 giây). Trong thời gian chờ để hiển thị giá trị từ greet(), hàm displayName('Minh') được thực thi và hiện kết quả. Đây là lý do tại sao Xin chào Minh được in trước Đây là blog homiedev!. Nói cách khác JavaScript sẽ không đợi thực thi xong greet() mà nó sẽ nhảy đến đoạn code tiếp theo và thực thi luôn (bất đồng bộ - asynchronous).

Đoạn code trên, hàm thứ hai displayName() không đợi hàm đầu tiên greet() hoàn thành.

Nếu chúng ta muốn đợi kết quả của lệnh gọi hàm trước đó trước khi câu lệnh tiếp theo được thực thi, thì các bạn có thể sử dụng callback function.

Chúng ta sẽ giải quyết vấn đề ở ví dụ trên nhé!

function greet(name, myFunction) {
    console.log('Đây là blog homiedev!');

    // thực thi đoạn code trên xong thì gọi myFunction
    // callback function
    myFunction(name);
}

// callback function
function displayName(name) {
    console.log(`Xin chào ${name}`);
}

// gọi hàm sau 2 giây
setTimeout(greet, 2000, 'Minh', displayName);

Kết quả:

Đây là blog homiedev!
Xin chào Minh

Trong chương trình trên, đoạn code đã được thực thi đồng bộ (synchronous). Hàm displayName() được truyền như một đối số cho hàm greet().

Method setTimeout() sau 2 giây sẽ thực thi hàm greet(). Tuy nhiên, hàm displayName() chúng ta đã truyền vào là một callback function cho nên khi thực thi hàm greet() thì displayName() mới được gọi.

Như vậy, bằng cách sử dụng callback function chúng ta đã chạy các đoạn code đúng thứ tự theo ý muốn 🥳. Đây chính là điểm hữu ích nhất mà các callback function đem lại cho chúng ta.

Một số bài viết liên quan hay các bạn nên đọc:

1. Higher order functions trong Javascript là gì?
2. Compose và Pipe trong Javascript là gì? những lợi ích mà nó mang lại cho lập trình viên