Callback Function trong JavaScript là gì? Hướng dẫn chi tiết kèm ví dụ

Callback Function trong JavaScript là gì? Hướng dẫn chi tiết kèm ví dụ

Callback Function trong JavaScript là gì? Hướng dẫn chi tiết kèm ví dụ

Trong JavaScript, callback functions là một khái niệm quan trọng giúp chúng ta xây dựng mã linh hoạt và mạnh mẽ hơn. Đặc biệt, chúng thường được sử dụng trong các hàm bậc cao (higher-order functions), những hàm có khả năng nhận một hàm khác làm đối số. Trong bài viết này, chúng ta sẽ khám phá callback functions là gì, cách sử dụng chúng, và lý do tại sao chúng lại hữu ích trong việc lập trình JavaScript.

Callback function trong JavaScript là gì?

Callback là một hàm được truyền làm đối số cho một hàm khác. Hàm cha (parent function) thường được thiết kế để sử dụng với nhiều loại hàm khác nhau, nhưng callback function lại được sử dụng trong những trường hợp cụ thể mà hàm cha yêu cầu.

Cách tạo callback function trong JavaScript

Bạn có thể tạo một callback function giống như bất kỳ hàm nào khác trong JavaScript:

JavaScript
function callbackFunction() {
    // logic xử lý của callback
}

Điểm khác biệt giữa một callback function và hàm thông thường là cách mà nó được sử dụng. Callback function được thiết kế để được truyền như là một đối số cho hàm khác:

JavaScript
function anyFunction(fun) {
    // Gọi hàm callback được truyền vào
    fun(a, b, c);
}

anyFunction(callbackFunction);

Để tạo một callback function, bạn cần biết cách mà hàm cha sử dụng callback đó, các tham số mà nó truyền vào, và thứ tự của các tham số đó.

Ví dụ về callback function

Hãy cùng viết một callback function để thấy cách chúng hoạt động. Trong JavaScript, các phương thức bậc cao như every, filter, và map đều sử dụng callback function. Chẳng hạn, phương thức every của mảng sử dụng callback để kiểm tra tất cả các phần tử của mảng có thỏa mãn một điều kiện nhất định hay không.

Ví dụ, hãy xây dựng một callback function để kiểm tra các phần tử trong một mảng chuỗi. Điều kiện bao gồm:

  1. Chuỗi phải có đúng 3 ký tự.
  2. Các ký tự đều là chữ hoa.
  3. Các ký tự không được trùng nhau.
  4. Không có chuỗi nào bị lặp lại trong mảng.

Dưới đây là cách chúng ta viết callback function cho trường hợp này:

Xây dựng callback function trong JavaScript

Bước đầu tiên là kiểm tra phần tử có phải là chuỗi hay không:

JavaScript
function callbackFunction(element, index, array) {
    // Kiểm tra nếu element không phải là chuỗi
    const isNotString = typeof element !== "string";
    if (isNotString) {
        return;
    }
}

Tiếp theo, kiểm tra chuỗi có độ dài là 3 ký tự, tất cả là chữ hoa. Để làm điều này, ta có thể sử dụng biểu thức chính quy (regex):

JavaScript
const isItThreeUpperCaseLetters = /^[A-Z]{3}$/.test(element);
if (!isItThreeUpperCaseLetters) {
    return;
}

Giải thích biểu thức chính quy:

  • ^[A-Z]{3}$: Chuỗi phải bắt đầu và kết thúc với đúng 3 ký tự thuộc dải chữ cái từ A đến Z.

Sau đó, chúng ta cần kiểm tra xem các ký tự trong chuỗi có trùng nhau hay không:

JavaScript
const allDifferentCharacters = element[0] !== element[1] && element[0] !== element[2] && element[1] !== element[2];
if (!allDifferentCharacters) {
    return;
}

Cuối cùng, kiểm tra xem chuỗi có bị lặp lại trong mảng hay không bằng cách sử dụng phương thức indexOf:

JavaScript
const isItFirstAppearence = array.indexOf(element) === index;
if (!isItFirstAppearence) {
    return;
}

return true;

Đây là toàn bộ mã callback function:

JavaScript
function callbackFunction(element, index, array) {
    // Kiểm tra nếu element không phải là chuỗi
    const isNotString = typeof element !== "string";
    if (isNotString) { return; }

    // Kiểm tra chuỗi có độ dài 3 ký tự và chỉ gồm chữ hoa
    const isItThreeUpperCaseLetters = /^[A-Z]{3}$/.test(element);
    if (!isItThreeUpperCaseLetters) { return; }

    // Kiểm tra các ký tự có trùng nhau không
    const allDifferentCharacters = element[0] !== element[1] && element[0] !== element[2] && element[1] !== element[2];
    if (!allDifferentCharacters) { return; }

    // Kiểm tra xem chuỗi có bị lặp lại trong mảng
    const isItFirstAppearence = array.indexOf(element) === index;
    if (!isItFirstAppearence) { return; }

    return true;
}

Cách sử dụng callback function

Bây giờ chúng ta đã có callback function, bạn có thể sử dụng nó với phương thức every:

JavaScript
const arr = ["ABC", "DEF", "GHI"];
const result = arr.every(callbackFunction);
console.log(result); // true hoặc false tùy thuộc vào các điều kiện

Tại sao chúng ta nên sử dụng callback function trong JavaScript?

Callback functions giúp mã của bạn linh hoạt và tái sử dụng hơn. Với các hàm bậc cao như filter, map, replace, bạn có thể truyền các logic cụ thể vào để tùy chỉnh cách chúng hoạt động trong từng trường hợp.

Sử dụng callback function giúp mã của bạn tách biệt logic tổng quát với các hành động cụ thể, giúp bạn dễ dàng bảo trì và mở rộng mã nguồn hơn.

Kết luận

Callback functions là một khái niệm quan trọng trong JavaScript giúp chúng ta xây dựng mã linh hoạt hơn. Bằng cách sử dụng chúng cùng với các hàm bậc cao, bạn có thể dễ dàng tùy chỉnh cách mà các hàm xử lý dữ liệu trong nhiều trường hợp khác nhau. Hy vọng qua bài viết này, bạn đã hiểu rõ hơn về cách tạo và sử dụng callback function trong JavaScript.

Tags:

Leave a Reply