Javascript: Currying In JavaScript

Nội dung bài viết

Currying là một khái niệm quan trọng là trung tâm của bất kỳ ngôn ngữ lập trình chức năng nào. Vì vậy, trong bài viết này chúng ta hãy xem nó là gì và tại sao nên sử dụng nó trong ngôn ngữ lập trình JavaScript.

Có bao giờ developers đã nghe về khái niệm này chưa? Hoặc bao lâu rồi devjs chưa nghe về Currying In JavaScript. Vậy hôm nay sau bao nhiêu năm, chúng ta sẽ thảo luận khái niệm này một lần nữa. 

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Mình tin rằng khi đọc bài này xong, devjs cũng lên một trình mới. 

Tại sao lại dùng Currying ?

Với một developer trong giấc mơ của họ là viết mã và có thể sử dụng nó nhiều lần với ít tốn kém thời gian hơn. Nó expressive vì bạn viết theo cách diễn đạt những gì cần thiết, và nó sử dụng lại bởi vì .. Currying giúp chúng ta quá tốt trong việc sử dụng lại các chức năng. Bạn có cần gì nữa không? 

Vậy Currying là gì?

Currying là một kỹ thuật đánh giá function với multiple arguments, thành một chuỗi hàm với single argument duy nhất. Nói cách khác, khi một function, thay vì lấy tất cả arguments cùng một lúc, lấy hàm thứ nhất và trả về hàm mới lấy hàm thứ hai và trả về hàm mới lấy hàm thứ ba, và tiếp tục cho đến khi tất cả các đối số đã được hoàn thành. 

Ví dụ đối với ES5

var add =   function (a){
    return function(b){
        return function(c){
            return a+b+c;
         }        
    }
}
console.log(add(2)(3)(4)); //output 9
console.log(add(3)(4)(5)); //output 12

Dưới đây chúng ta sẽ đi sâu hơn về khái niệm này qua các ví dụ cụ thể hơn để giúp chúng ta có cái nhìn và nắm bắt cụ thể hơn. 

Trong ES6 chúng ta có thể viết lại tốt hơn ở ví dụ trên :

const add = (a, b) => a + b

add(1, 2) //should return 3

Theo cách Currying thì chúng ta nên làm theo cách này :

const add = a => b => a + b

add(1)(2) //should return 3

Chúng ta để ý một chút ở function add. Đây là một function lấy một đối số và trả về một hàm khác nhận đối số thứ hai. Một khi tất cả các đối số ở đó, tính toán xảy ra.

Vì vậy, trong ví dụ này, gọi add (1) trả về một hàm. Curry có thể có trong JavaScript vì các hàm là first-class(https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function). Điều đó có nghĩa là gì? Nó có nghĩa là các chức năng giống như bất kỳ giá trị khác. Chúng có thể được gán cho các biến, được truyền dưới dạng đối số cho các hàm khác và được trả về bởi các hàm.

 Đến đây tôi cá rằng các bạn vẫn chưa hình dung được sự quang trong của Currying đúng không? Ok bây giờ chúng ta sẽ nói về tầm quan trọng của Currying trong việc trọng tâm của các function. 

Tại sao Currying lại quan trọng

Currying cung cấp cho bạn cơ hội để cấu hình một phần chức năng và sau đó, nó là phương tiện để tạo các chức năng có thể sử dụng lại. Hãy lấy một ví dụ khác. Giả sử tôi có collection như thế này:

const movies = [
  {
    "id": 1,
    "name": "Matrix"
  },
  {
    "id": 2,
    "name": "Star Wars"
  },
  {
    "id": 3,
    "name": "The wolf of Wall Street"
  }
]

Bây giờ tôi muốn xuất id của các bộ phim thì tôi làm cách này, còn nhiều cách khác nhưng tôi viết theo cách tôi hay dùng. Đừng ý kiến cò gì đây nha :D So ez:

movies.map((movie) => movie.id) 

//should return [ 1, 2, 3 ]

Điều đó ok với mọi người. Nhưng chuẩn bị có biến nè, tôi có collection thứ 2

const series = [
  {
    "id": 4,
    "name": "South Park"
  },
  {
    "id": 5,
    "name": "The Simpsons"
  },
  {
    "id": 6,
    "name": "The Big Bang Theory"
  }
]

Và tôi cũng muốn lấy id từ trong series array này thì tôi cũng phải lặp lại một lần nữa? Xin nhấn mạnh rằng, lặp lại một lần nữa.

series.map((serie) => serie.id) //should return [ 4, 5, 6 ]

Bạn thấy có phiền không? Khi một callback trong map() lại được lặp lại một cách giống nhau. Có thể bạn bình thường nhưng với tôi điều đó là quá tệ cho sự lặp lại đó. Vậy Currying đã giúp chúng ta như thế nào trong trường hợp nay. Chúng ta hãy thực hiện một lệnh gọi hàm nên trích xuất một thuộc tính từ một đối tượng: Dùng Currying ES6:

const get = property => object => object[property];

ES5 const get = function (pro){ return function (object){ return object[pro] } } Bây giờ từ hàm này get() tôi có thể tạo một hàm khác, được gọi là getId, đó chỉ là một cấu hình một phần của hàm get:

const getId = get('id');

Và tiếp theo getId vẫn là một chức năng và điều này thật tuyệt vời vì giờ đây chúng ta có thể sử dụng nó trong các map() ở hai collection trên

movies.map(getId); //should return [ 1, 2, 3 ]
series.map(getId); //should return [ 4, 5, 6 ]

Điều đó không tốt sao? Nhưng chúng ta có thể tiến thêm một bước. Giả sử bây giờ, chúng tôi muốn trích xuất tên từ các đối tượng của chúng tôi. Làm thế nào bạn có thể đạt được điều đó? Chỉ cần tạo một hàm gọi là getName có nguồn gốc từ hàm get:

const getName = get('name')

Và làm tương tự như vậy chúng ta sẽ lấy được các thuộc tính name

movies.map(getName); //should return [ 'Matrix', 'Star Wars', 'The wolf of Wall Street' ]

Wow quá ngon, vì đây là ví dụ đơn giản để bạn thấy mà nó đã quá cool rồi thì các hàm phức tạp thì như thế nào? Các bạn cần thêm ví dụ nào nữa không, nếu không thì chúng ta sẽ đi vào phần tiếp theo, à jquery cũng đa số sử dụng Currying á nha. ví dụ như addClass thì các bạn hình dung nó như thế nào? Nó sẽ là thế này.

function addClass(cssClass, element) {
    $(element).addClass(cssClass);
}

Code full:

const movies = [
  {
    "id": 1,
    "name": "Matrix"
  },
  {
    "id": 2,
    "name": "Star Wars"
  },
  {
    "id": 3,
    "name": "The wolf of Wall Street"
  }
]

const series = [
  {
    "id": 4,
    "name": "South Park"
  },
  {
    "id": 5,
    "name": "The Simpsons"
  },
  {
    "id": 6,
    "name": "The Big Bang Theory"
  }
]

//Không tốt
console.log(series.map((serie) => serie.id)) //should return [ 1, 2, 3 ])

console.log(movies.map((movie) => movie.id)) //should return [ 1, 2, 3 ])

//Tốt 
const get = property => object => object[property];

const getId = get('id'); // if need get name then get('name')

console.log(movies.map(getId)); //should return [ 1, 2, 3 ]
console.log(series.map(getId)); //should return [ 4, 5, 6 ]

Kết Luận

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Currying là một phần quan trọng của một functional programing. Tôi khuyến khích bạn sử dụng với nó như tôi đã làm trong bài viết này. À nếu bạn sử dụng các thư viện chức năng như Ramda hoặc Lodash / fp, hầu hết các chức năng đều được curryfied theo mặc định, điều này thật tuyệt! 

Vì vậy, hãy nhớ rằng phân tách các hàm của n đối số thành n hàm của 1 đối số không phải là một nhiệm vụ thực sự khó khăn với cú pháp ES6 và các hàm lamda! Vì vậy, bạn không có lý do gì để không tạo mã có thể tái sử dụng nhờ vào Currying! 

Bài viết được tham khảo rất nhiều nguồn 

http://www.breck-mckye.com/blog/2014/05/javascript-curry/

https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function

https://www.codementor.io/michelre/currying-in-javascript-g6212s8qv

https://hughfdjackson.com/javascript/why-curry-helps/