Higher Order Function trong Javascript là gì?

Rate this post

Biết cách sử dụng function (hàm) như data và tăng cường khả năng mở rộng của nó là đặc điểm được nhắc đến nhiều nhất của higher order function trong Javascript.

Thế nào là Higher Order Function trong Javascript?

Function chấp nhận đầu vào và/hoặc đầu ra là một function được gọi là higher order function.

Thay vì string, number, boolean, nó sử dụng function khác để làm in/out, nên vì thế ở cấp độ cao hơn như việc vận hành function.

Với function trong Javascript, bạn có thể:

Lưu chúng như biến
Sử dụng như array
Assign các thuộc tính như một object
Cho vào các giá trị argument
Return từ một function khác

Bạn có thể hình dung việc truyền vào function và đầu ra cũng là function giống như một function bình thường bạn vẫn làm. Hãy cứ nghĩ thế trước đã để bắt đầu.

Hàm sử dụng với dữ liệu

Hãy cùng quay trở lại tìm hiểu những gì cơ bản nhất. Ta mô phỏng lại các dạng thức hàm phổ biến hay được dùng khi mới học Javascript. Các dữ liệu loại gì được truyền vào trong function đơn thuần?

String

const welcome = (name) => `Hi ${name}. Thanks for coming!`
console.log(welcome('Khoi Pro')) // Hi Khoi Pro. Thanks for coming!

Numbers

const plus2 = (number) => number + 2
console.log(plus2(3)) // 5

Boolean

const loadVIPMember = (isVIP) => isVIP ? `VIP Member` : null
console.log(loadVIPMember(false)) // null
console.log(loadVIPMember(true)) // VIP Member

Objects

const getUserEmail  = (user) => user.email
const demoUser = {
  name: 'Khoi Pro',
  email: '[email protected]'
}
console.log(getUserEmail(demoUser)) // [email protected]

Arrays

const getFirstItem = (array) => array[0]
const numbers = [1, 2, 3]
console.log(getFirstItem(numbers)) // 1

Như các bạn đã thấy, đây là 5 first-class trong mọi ngôn ngữ lập trình. Tại sao? Vì bạn có thể làm việc với chúng như 5 chức năng mình nhắc đến ở phía trên.

Function cũng là data

Giờ ta sẽ quan tâm tới phần kế tiếp, khi làm việc và coi hàm cũng tương tự như data.

Function là biến đầu vào

const largeThan5 = (number) => number > 5
const numbers = [1,3,5,7,9,11]
console.log(numbers.filter(largeThan5)) // [7,9,11]

Như ví dụ ở trên, largeThan5 thực chất chỉ là một function, nhưng lại đóng vai trò là một parameter vào function filter().

Vòng lặp của filter sẽ chạy qua lần lượt các item và sử dụng function largeThan5 (return true/false) để xem và lọc ra các item phù hợp.

Function trả lại

Hãy thử ví dụ đơn giản nhất:

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

Function ở trên yêu cầu hai biến, nhưng không yêu cầu cả hai đều cho vào cùng một lúc. Hãy tưởng tượng nó như một người bảo vệ, khi bạn chìa ra chỉ một tấm vé thì vẫn được cho qua cổng nhưng lại gặp cánh cổng thứ hai yêu cầu chìa nốt tấm vé thứ hai thì mới thực thi.

Điều này khả thi vì Javascript cho phép function return lại giá trị, như string, số, true/false.

Bạn có thể thêm cả hai biến a,b như sau:

console.log(add(3)(6)) // 9

Hoặc lần lượt như sau:

const add3 = (a) => a + 3
console.log(add3(6)) // 9

Giờ hãy thử:

console.log(add3) // (a) => a + 3

Kết quả hiện ra sẽ là một function, đúng không nào? Điều này giúp ta hiểu được cách function hoạt động và trả về, dù chưa đủ parameter.

Sử dụng khả năng tái sử dụng cao của Higher Order Function

Một khi nắm được lợi thế của việc function đóng vai trò như data, ta có thể phát triển lên nhiều trong lối tư duy.

Hãy thử xem ta có thể làm gì nhé. Hãy thử hình dung ta có một tập hợp người dùng như sau:

const users = [
  {
    name: 'Kevin',
    experienceYears: 6
  },
  {
    name: 'Jenifer',
    experienceYears: 4
  },
  {
    name: 'Duck',
    experienceYears: 1
  },
]

Ta có bài toán: tách những ai có số năm kinh nghiệm lớn hơn 2 ra thành một tập hợp mới.

Cách viết thông thường nhiều người hay làm:

const getExperienceYear = (user) => user.experienceYears
const results = []
for (let i = 0; i < users.length; i++) {
  const year = getExperienceYear(users[i]);
  if (year > 2) {
    results.push(users[i])
  }
}
console.log(results)

Cách viết theo .Filter() kết hợp với Higher Order Function sẽ triển khai như sau:

const hasMoreThan2YearsExp = (user) => user.experienceYears > 2
const results = users.filter(hasMoreThan2YearsExp)

Bạn thấy không? Mọi thứ dường như đơn giản và dễ hiểu hơn dù răng cách thực hiện vẫn ra một kết quả.

Kết luận

Higher order function sẽ giúp bạn sử dụng function và chia nhỏ function cho những tác vụ cần thiết giúp khả năng tái sử dụng và phát triển mở rộng của hệ thống được nâng cao.

Bài viết có dựa trên lược dịch từ freecodecamp.

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.

Tìm hiểu về Javascript Higher order function