Tìm hiểu về utility function

Table of Contents

Utility function là gì?

Utility function là những function được viết ra để giải quyết 1 vấn đề cụ thể. Nó có thể được sử dụng ở bất cứ đâu trong project của bạn.

Tại sao lại cần utility function?

Trong quá trình làm việc, chúng ta có thể gặp những function được sử dụng ở nhiều nơi khác nhau trong project, ví dụ như:

  • kiểm tra xem 1 object có phải là object rỗng hay không
  • generate 1 string ngẫu nhiên
  • định dạng ngày tháng
  • ...

Giả sử chúng ta có function isEmpty(kiểm tra object rỗng hay không) đang viết ở file A.js

giờ file B.js, cũng cần sử dụng function này, nếu chúng ta copy function này sang file B.js

và tương lai nếu muốn sử dụng function này ở file C.js nữa, chúng ta lại copy function này sang file C.js

hoặc nếu logic của function này thay đổi, ta lại phải sửa ở cả 3 file A.js, B.js, C.js.

Điều này sẽ dẫn đến việc code của chúng ta bị lặp lại, và khó bảo trì.

Vì vậy việc tạo ra các utility function là cần thiết để giải quyết vấn đề này.

Cách sử dụng utility function

Thông thường chúng ta sẽ tạo 1 folder có tên là utils, thư mục này gồm những file chứa các utility function.

Ví dụ, chúng ta cần 1 function để kiểm tra xem 1 object có phải là object rỗng hay không, chúng ta sẽ tạo 1 file có tên là isEmpty.js trong folder utils

export const isEmpty = (obj) => {
  return Object.keys(obj).length === 0
}

Và từ đó về sau chúng ta có thể sử dụng function này ở bất cứ đâu.

Nguyên tắc khi định nghĩa utility function

  • Định nghĩa ở 1 file riêng biệt chẳng hạn date_utils.js hoặc string_utils.js...
  • Không gây ra side effect

Side effect là gì?

Side effect là những thay đổi xảy ra bên ngoài function. Làm thay đổi state của ứng dụng

Ví dụ như:

  • Thay đổi giá trị của biến global
  • Tương tác với database, file system, local storage...
  • Gọi API cũng là 1 side effect, vì nó tương tác với network và có thể thay đổi các global state
  • Tương tác với DOM
  • ...

Ví dụ tương tác với DOM

export const getUserInfo = (userId) => {
  const userInfo = fetchUserInfo(userId)
  document.getElementById('user-info').innerHTML = userInfo
}

Ở ví dụ trên, ta thấy getUserInfo làm 2 việc:

  • Lấy thông tin user
  • Thay đổi DOM

Vì vậy getUserInfo là 1 function có side effect, nó không nên được định nghĩa là 1 utility function.

Vì vậy không phải reusable function nào cũng là utility function

Hi vọng bài viết này sẽ giúp ích cho những bạn đang tìm hiểu về utility function.

Cảm ơn các bạn đã đọc bài viết này.