Function Composition trong JavaScript

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về Function Composition trong JavaScript. Đây không phải là một chủ đề mới mẻ gì nhưng nó cũng rất ít được nhắc đến trong lập trình. Chỉ khi tìm hiểu sâu về một lĩnh vực hay ngôn ngữ/framework áp dụng thì chúng ta mới biết đến thuật ngữ này.

Function Composition trong JavaScript là gì?

Theo Wikipedia,

Trong toán học, Function Composition (hay còn gọi là hàm hợp) là một phép toán nhận hai hàm số f và g và cho ra một hàm số h sao cho h(x) = g(f(x)). Trong phép toán này, hàm số f : X → Y và g : Y → Z được hợp lại để tạo thành một hàm mới biến x thuộc X thành g(f(x)) thuộc Z.

Khái niệm Function Composition trong JavaScript cũng tương tự như trên.

Function Composition là ứng dụng theo chiều kim đồng hồ của một hàm này với kết quả của hàm khác. Các lập trình viên thường làm điều này theo cách thủ công hàng ngày khi họ tổ chức code lồng nhau.

Ví dụ về Function Composition trong JavaScript

compose = (fn1, fn2) => value => fn2(fn1(value))
Code language: JavaScript (javascript)

Nhưng đoạn mã này thật khó đọc. Có một cách tốt hơn là sử dụng Function Composition. Thay vì đọc chúng từ trong ra ngoài:

add2AndSquare = (n) => square(add2(n))
Code language: JavaScript (javascript)

Chúng ta có thể sử dụng một hàm thứ tự cao hơn để xâu chuỗi chúng theo một cách có thứ tự.

add2AndSquare = compose(add2, square)

Một cách triển khai đơn giản sẽ như sau:

compose = (f1, f2) => value => f2( f1(value) );
Code language: JavaScript (javascript)

Để linh hoạt hơn nữa, chúng ta có thể sử dụng hàm ReduceRight:

compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);
Code language: JavaScript (javascript)

Công dụng của Function Composition trong JavaScript

Đọc soạn từ trái sang phải cho phép phân chia rõ ràng các hàm bậc cao hơn. Các ví dụ trong thế giới thực đang thêm authentications, logging và context. Đó là một kỹ thuật cho phép khả năng tái sử dụng ở cấp độ cao nhất. Dưới đây là một số ví dụ về cách sử dụng nó:

// example
const add2        = (n) => n + 2;
const times2      = (n) => n * 2;
const times2add2  = compose(add2, times2);
const add6        = compose(add2, add2, add2);

times2add2(2);  // 6
add2tiems2(2);  // 8
add6(2);        // 8Code language: JavaScript (javascript)

Bạn có thể nghĩ rằng đây là lập trình hàm nâng cao và nó không liên quan đến lập trình giao diện người dùng. Nhưng nó cũng hữu ích trong các ứng dụng Trang đơn. Ví dụ: bạn có thể thêm hành vi vào một thành phần React bằng cách sử dụng các thành phần thứ tự cao hơn:

function logProps(InputComponent) {
  InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  return InputComponent;
}

// EnhancedComponent will log whenever props are received
const EnhancedComponent = logProps(InputComponent);Code language: JavaScript (javascript)

Kết luận

Tóm lại, Function Composition trong JavaScript cho phép khả năng tái sử dụng hàm ở mức rất cao. Nếu các hàm được cấu trúc tốt, nó cho phép các lập trình viên tạo ra hành vi mới dựa trên hành vi hiện có.

Nó cũng làm tăng khả năng đọc code. Thay vì lồng các hàm lại, bạn có thể xâu chuỗi các hàm một cách rõ ràng và tạo các hàm có thứ tự cao hơn với các tên có ý nghĩa. Chứ ai đâu rảnh đến nỗi phải đọc từng dòng code một của bạn rồi mò xem nó làm gì.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG