• Privacy Policy
Chia sẻ kiến thức công nghệ
  • Home
  • Lập trình
  • Chia sẻ
  • Blog
No Result
View All Result
  • Home
  • Lập trình
  • Chia sẻ
  • Blog
No Result
View All Result
Duy PT Blog
No Result
View All Result
Home Lập trình

Higher order Functions là gì? Tại sao nên sử dụng chúng?

Duy Solo by Duy Solo
April 15, 2022
in Lập trình, NodeJS
Reading Time: 6 mins read
A A
Higher order Functions là gì? Tại sao nên sử dụng chúng?
Share on FacebookShare on Twitter

Mục lục

  1. Higher order Function là gì
  2. Hữu dụng hay không?
  3. Ví dụ
  4. Kết

Đây là một khái niệm rất quan trọng trong Functional Programming. Ở đây mình sẽ cho ví dụ dựa trên Javascript, cụ thể là TypeScript, do đó mình hi vọng các bạn đã có một số kiến thức nhất định về JS trước. Điều này sẽ giúp bạn nắm bắt nội dung bài viết dễ dàng hơn.

Higher order Function là gì

Higher order function không không phải là một khái niệm mới. Nó khá đặc thù và phổ biến trong Functional Programming.

Concept đơn giản ở đây là một Function nhận một hoặc nhiều function khác làm tham số, sau đó trả về giá trị hoặc một function mới.

Ví dụ, Javascript có hàm Array.filter. Đây là một higher order function, do nó nhận một function làm tham số.

const qrCodes: string[] = ['QR1', 'QR222', 'QR3333', 'QR4444', 'QR5555']

const qrCodesV3: string[] = qrCodes.filter((qrCode) => qrCode.length > 5)

console.log(qrCodesV3) //['QR3333', 'QR4444', 'QR5555']

Javascript cũng có một hàm khác Array.slice. Tuy nhiên, đây không phải là higher order function, do nó không nhận tham số là function, và giá trị trả về của nó cũng không phải một function nào cả.

const qrCodes: string[] = ['QR1', 'QR222', 'QR3333', 'QR4444', 'QR5555']

const firstTwoQrCodes: string[] = qrCodes.slice(0, 2)

console.log(firstTwoQrCodes) //['QR1', 'QR222']

Hữu dụng hay không?

Higher order Function giúp code của chúng ta ngắn gọn, linh hoạt, có thể dễ dàng maintenance.

Nhờ vào khả năng kết hợp giữa các function thông qua higher order function mà chúng được sử dụng rất phổ biến trong Functional Programming.

Ví dụ

Mình sẽ viết lại hàm một filter khác thực hiện công việc tương tự ở ví dụ đầu tiên:

const stringsLengthGreaterThan = (length: number, items: string[]): string[] => {
  const output = []

  for (const item of items) {
    if (item.length > length) {
      output.push(item)
    }
  }

  return output
}

const qrCodes: string[] = ['QR1', 'QR222', 'QR3333', 'QR4444', 'QR5555']

const qrCodesV3: string[] = stringsLengthGreaterThan(5, qrCodes)

console.log(qrCodesV3) //['QR3333', 'QR4444', 'QR5555']

Đoạn code trên có vẻ không được linh hoạt cho lắm. Thử tưởng tượng bạn cần lọc ra một danh sách các number với giá trị lớn hơn 5 chẳng hạn, bạn cần phải tạo một hàm khác, cập nhật thêm một mớ logic khác.

const numberGreaterThan = (value: number, items: number[]): number[] => {
  const output = []

  for (const item of items) {
    if (item > value) {
      output.push(item)
    }
  }

  return output
}

const numbers: number[] = [1, 3, 5, 7, 9, 11]

const highNumbers: number[] = numberGreaterThan(5, numbers)

console.log(highNumbers) //[7, 9, 11]

Hàm numberGreaterThan và stringsLengthGreaterThan hầu như giống nhau, chỉ khác nhau về điều kiện so sánh dữ liệu, điều này thì khá là tệ.

Mình theo phong cách viết càng ít logic càng tốt. Viết càng ít logic thì càng giảm thiểu số lượng unit tests cho các logic này. Rõ ràng là vừa đỡ mệt, vừa đỡ tốn thời gian, lại vừa dễ dàng bảo trì hơn, đúng không?

Giờ mình sẽ sửa lại đoạn code trên sử dụng higher order function

function higherOrderFilter<T = any>(
  iteratee: (item: T) => boolean
): (items: T[]) => T[] {
  return (items) => {
    const output: T[] = []

    for (const item of items) {
      if (iteratee(item)) {
        output.push(item)
      }
    }

    return output
  }
}

const qrCodes: string[] = ['QR1', 'QR222', 'QR3333', 'QR4444', 'QR5555']
const numbers: number[] = [1, 3, 5, 7, 9, 11]

const qrCodesV3: string[] = higherOrderFilter(
  (item: string) => item.length > 5
)(qrCodes)
console.log(qrCodesV3) //['QR3333', 'QR4444', 'QR5555']

const highNumbers: number[] = higherOrderFilter(
  (item: number) => item > 5
)(numbers)
console.log(highNumbers) //[7, 9, 11]

Đấy, code đã clean hơn rất nhiều. Do logic filter đã được tách biệt khỏi điều kiện filter, nên bạn cũng tái sử dụng lại được logic từ hai hàm numberGreaterThan và stringsLengthGreaterThan.

Ở ví dụ trên, có thể có nhiều bạn sẽ thắc mắc tại sao mình lại đem iteratee function làm đối số đầu tiên, và array dữ liệu mẫu làm đối số thứ hai. Thực ra, chúng đều có dụng ý cả.

Ví dụ bên dưới đây sẽ sử dụng thêm thư viện lodash/fp.

Mình sẽ thực hiện việc loại bỏ các giá trị thừa và lặp lại thông qua hàm _.compact và _.uniq, sau đó sẽ trả về các QR codes có length lớn hơn 6.

import _ from 'lodash/fp'

const qrCodes: string[] = [
  '',
  'QR222',
  'QR3333',
  'QR4444',
  'QR5555',
  'QR5555',
  'QR5555',
  'QR66666',
  'QR66666',
  'QR66666',
  'QR77777',
  'QR77777',
  'QR77777',
]

const qrCodesV4: string[] = _.pipe(
  _.compact,
  _.uniq,
  higherOrderFilter((item: string) => item.length > 6)
)(qrCodes)
console.log(qrCodesV4) //['QR66666', 'QR77777']

Bây giờ mình sẽ viết lại hàm higherOrderFilter và đảo ngược thứ tự hai đối số để xem sự khác biệt nhé.

import _ from 'lodash/fp'

const qrCodes: string[] = [
  '',
  'QR222',
  'QR3333',
  'QR4444',
  'QR5555',
  'QR5555',
  'QR5555',
  'QR66666',
  'QR66666',
  'QR66666',
  'QR77777',
  'QR77777',
  'QR77777',
]

function higherOrderFilterReverse<T = any>(
  items: T[]
): (iteratee: (item: T) => boolean) => T[] {
  return (iteratee) => {
    const output: T[] = []

    for (const item of items) {
      if (iteratee(item)) {
        output.push(item)
      }
    }

    return output
  }
}

const qrCodesV5: string[] = _.pipe(
  _.compact, 
  _.uniq, 
  (items: string[]) => higherOrderFilterReverse(items)((item: string) => item.length > 6)
)(qrCodes)
console.log(qrCodesV5) //['QR66666', 'QR77777']

Kết quả vẫn giống như ví dụ trước, nhưng do đối số đầu tiên của hàm higherOrderFilterReverse là một string array (tức kết quả trả về của hàm _.uniq trước đó), chúng ta bắt buộc phải tạo một hàm mới để có thể khai báo iteratee function.

Mình luôn cố gắng viết các đối số cuối cùng của higher order function sao cho có thể nhận giá trị trả về từ các function trước. Lúc đó, code của bạn sẽ ngắn gọn hơn rất nhiều.

Kết

Higher order Function làm một phần cực kỳ quan trọng trong Functional Programming. Nắm rõ chúng sẽ giúp các bạn viết code tốt hơn, ngắn gọn, clean hơn, ứng dụng của bạn cũng sẽ dễ dàng bảo trì hơn.

Mình hi vọng các bạn thích bài viết này. Nếu bạn có câu hỏi, đừng ngại inbox mình hoặc để lại comment nhé.

Cám ơn các bạn rất nhiều.

Related Posts

Hướng dẫn cài đặt LEMP trên CentOS Stream 9
Lập trình

Hướng dẫn cài đặt LEMP trên CentOS Stream 9

by Duy Solo
May 24, 2022
0

Bài viết này sẽ hướng dẫn các bạn cài đặt LEMP stack trên CentOS Stream 9 mới nhất trên Vultr...

Read more
Lập trình

Xóa một property của Object trong Javascript

by Duy Solo
April 24, 2022
0

Mình sẽ giới thiệu 2 cách để xóa một property trong Javascript Object. Một cách sử dụng mutable, một cách...

Read more
NodeJS

NestJS – Providers

by Duy Solo
August 29, 2021
0

Providers là thành phần cơ bản và cực kỳ quan trọng trong Nest để thực hiện Dependency Injection.

Read more
NodeJS

Các design pattern cần biết khi làm việc với NestJS – phần 2

by Duy Solo
August 28, 2021
0

Một số design patterns chính đang được sử dụng bởi NestJS mà bạn cần nắm rõ để làm việc với...

Read more
Load More
Next Post

Xóa một property của Object trong Javascript

Hướng dẫn cài đặt LEMP trên CentOS Stream 9

Hướng dẫn cài đặt LEMP trên CentOS Stream 9

Discussion about this post

POPULAR POST

  • LocalStorage và Cookies – chọn cái nào để lưu JWT Tokens hiệu quả và an toàn?

    1066 shares
    Share 426 Tweet 267
  • Hướng dẫn reset trial cho các sản phẩm IntelliJ trên MacOS

    933 shares
    Share 373 Tweet 233
  • Repository Design Pattern và ứng dụng của nó trong Laravel

    919 shares
    Share 368 Tweet 230
  • Decorators trong Typescript

    848 shares
    Share 339 Tweet 212
  • Các thư viện Date Pickers tốt nhất cho React

    743 shares
    Share 297 Tweet 186
Duy PT Blog

© 2021 Duy PT Blog

Liên kết

  • Lập trình
  • Chia sẻ
  • Blog
  • Privacy Policy

Theo dõi

No Result
View All Result
  • Home

© 2021 Duy PT Blog