Pure Function trong JavaScript. Tại sao chúng ta nên biết càng sớm càng tốt?

Pure Function trong JavaScript. Tại sao chúng ta nên biết càng sớm càng tốt?

Threads
  • Ơ buồn cười thật. Ai cũng biết GIF là định dạng ảnh động thường được dùng thay cho video clip để hiển thị các nội dung ngắn trên nền tảng web. GIF tiện hơn các nội dung dạng video là vì nó được hiển thị như một bức ảnh và được hỗ trợ rộng rãi. Cơ mà GIF có dung lượng nặng quá.

    Nói thật nhiều lúc mình có vài cái hành động muốn hiển thị lên web cho mọi người xem, cơ mà định dạng GIF nó nặng với cả cũng không biết cách tối ưu cho nhẹ xuống. Hôm nay lên mạng tìm hiểu xem định dạng nào có khả năng thay thế GIF trong tương lai thì mọi người biết đó là gì không? Là WEBP (webp)!!! Đúng vậy, là định dạng ảnh mà mình đang dùng trên blog lâu nay luôn á, mà giờ mới biết là nó hiển thị được cả ảnh động nữa, hơi quê 😆

    Kết hợp với ffmpeg nữa là chuyển được tất tần tật video clip thành webp được ngay. Để vài nửa ngồi chế lại cái cli một tí là dùng ngon luôn mọi người ạ 🤪

    » Xem thêm
  • Cảm giác như Github Copilot đang cố gắng mở rộng thị trường cho anh em developer á. Mới trước họ ra mắt Github Open Copilot Chat thì mới đây lại thêm cái Using GitHub Copilot in the command line dùng để giải thích hoặc gợi ý lệnh trong terminal.

    Đây, cách dùng rất đơn giản thôi, ví dụ muốn nó giải thích câu lệnh sudo apt-get để làm gì, thì:

    $ gh copilot explain "sudo apt-get"

    Hoặc nhờ nó gợi ý lệnh mong muốn, sử dụng tiếng Việt được luôn nhé (kể cả tiếng Việt không dấu vẫn hiểu 😳)

    $ gh copilot suggest "xoá commit chưa push"

    Mình đã kiểm tra và thấy lệnh ra rất đúng, xịn thật 🤓

    » Xem thêm
  • Github có chương trình học và ôn thi để lấy chứng chỉ "ghim" vào hồ sơ cá nhân. Các chứng chỉ này xoay quanh kỹ năng sử dụng và làm việc thành thạo với git cũng như Github. Nếu bạn muốn học thêm kỹ năng mới đồng thời thu thập thêm badge cho mình thì còn chần chừ gì nữa 👇

    Showcase your expertise with GitHub Certifications

    » Xem thêm

Vấn đề

Tôi năm nay đã 26 tuổi, maintain cũng dăm ba dự án rồi mà đôi lúc tôi cũng hay gặp những trường hợp mà một số bạn trong team hay làm thế này:

function convertBirthdayToAges (person) {
  const year = new Date().getFullYear(); // 2021
  return person.map(p => p.age = year - p.year);
}
...
const persons = [{name: 'Nguyễn Văn A', year: 2000}];
convertBirthdayToAges(persons);
console.log(persons); // [{name: 'Nguyễn Văn A', year: 2000, age: 21}]

Thoạt nhìn cách viết hàm như trên có vẻ bình thường nhưng bạn hãy để ý sau khi persons đi qua hàm convertBirthdayToAges thì nó đã bị gắn thêm một attribute age.

Hay một ví dụ khác kiểu như là:

let year = 2020;
function afterManyYear(num) {
  return year + num;
}
afterManyYear(5) // 2025;

....

year = 2025;
afterManyYear(5) // 2030;

Ở ví dụ trên, ban đầu khi gọi hàm afterManyYear(5) kết quả là 2025 nhưng sau đó, do year bị thay đổi thành 2025 thì afterManyYear(5) lúc này lại trả về 2030.

Điều này có vẻ cũng bình thường nhưng hãy tưởng tượng trong giai đoạn bảo trì khi bạn không biết year bị thay đổi ở đâu thì quả là tai hại. Bạn cũng có thể nói thế thì sao không khai báo const với year: const year = 2020;? Thì tôi nghĩ khi đã khai báo với let thì trong đầu họ đã nghĩ sẽ sẵn sàng thay đổi year bất kì lúc nào rồi.

Nếu bạn là người thường xuyên làm những điều trên & thấy sự bất tiện của nó thì cũng là lúc các bạn nên biết về khái niệm Pure Function.

Pure function là gì?

Pure function đúng như tên gọi của nó: "Hàm thuần khiết".

Đó là một hàm JS & thoả mãn hai điều kiện:

  • Các đầu vào giống nhau luôn trả về đầu ra giống nhau.
  • Không có side-effects.

Các đầu vào giống nhau luôn trả về đầu ra giống nhau

Quá rõ ràng. Ví dụ như:

function add(x, y) {
  return x + y;
}
add(1, 2); // 3
add(1, 2); // 3

Với mỗi cặp x,y truyền vào thì giá trị trả về không bao giờ thay đổi.

Hàm này sẽ không thoã mãn:

let x = 1;
function add(y) {
  return x + y;
}
add(1); // 2
x = 2;
add(1); // 3

Khi một hàm đảm bảo điều kiện này thì chắn chắn việc đọc hiểu & gỡ lỗi sẽ dễ dàng hơn rất nhiều.

Không có side-effects

Side-effects là những "hiệu ứng" đi kèm trong hàm như:

  • Thay đổi giá trị của đầu vào.
  • console.log
  • HTTP calls (fetch/AJAX).
  • Thay đổi một file (fs).
  • Query DOM.
  • ...

Nhìn chung thì ngoài những điều liệt kê ở trên thì side-effects còn bao gồm cả những công việc có trong hàm mà không liên quan đến kết quả tính toán cuối cùng.

Ở ví dụ 1 phần mở đầu ta đã thấy convertBirthdayToAges đã làm biến đổi giá trị của đầu vào là persons. Nếu chẳng may persons bị xoá mất một attribute nào đó thì chẳng phải là một điều rắc rối hay sao!

Để giải quyết vấn đề trên, thay vì chỉnh sửa trực tiếp persons, chúng ta hãy trả về một đối tượng mới:

function convertBirthdayToAges (person) {
  const year = new Date().getFullYear();
  return [...person.map(p => p.age = year - p.year)];
}

const persons = [{name: 'Nguyễn Văn A', year: 2000}];
const newPersons = convertBirthdayToAges(persons);
console.log(persons); // [{name: 'Nguyễn Văn A', year: 2000}];

Ví dụ trên tôi đã sử dụng toán tử spread syntax (...) để tạo ra một đối tượng mảng mới. Lưu ý rằng nó chỉ có thể sao chép "nông" (shallow copy) một đối tượng, để có thể sao chép "sâu" (deep copy) tôi khuyến nghị nên dùng package clone có sẵn trên npm.

Một ứng dụng không thể nào là không có side-effect

Đúng vậy, ứng dụng của bạn không thể nào hoạt động mà không bao gồm các "hiệu ứng" như đã liệt kê ở bên trên trừ chúng quá mức đơn giản. Chúng không thể hoạt động nếu như không đọc - ghi vào database hay select một phần tử trong DOM. Nhưng quan trọng là nên giảm thiểu tối đa hoặc cấu trúc những đoạn mã side-effects một cách độc lập nhất có thể.

Ví dụ như một hàm cập nhật dữ liệu:

// Ví dụ này giả sử Person là một sequelize model

// Hàm update này mới là hàm trực tiếp có side-effect
function update(payload) {
  return Person.update(payload);
}

function updatePerson(body) {
  const name = body.name.trim();
  const year = +body.year;
  return update({ name, year });
}

Tổng kết

Pure function không phải là khái niệm mới nhưng những lợi ích mà pure function mang lại trong quá trình phát triển & bảo trì sản phẩm là cực kì tốt dựa trên kinh nghiệm làm việc của tôi.

Qua những ví dụ trên tôi mong rằng các bạn sẽ nhận ra được những lợi ích khi áp dụng pure function vào các dự án trong hiện tại & tương lai. Chỉ cần thay đổi cách diễn đạt một chút sẽ mang lại nhiều lợi ích trong việc bảo trì code sau này.

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.
Author

Xin chào, tôi tên là Hoài - một anh Dev kể chuyện bằng cách viết ✍️ và làm sản phẩm 🚀. Với nhiều năm kinh nghiệm lập trình, tôi đã đóng góp một phần công sức cho nhiều sản phẩm mang lại giá trị cho người dùng tại nơi đang làm việc, cũng như cho chính bản thân. Sở thích của tôi là đọc, viết, nghiên cứu... Tôi tạo ra trang Blog này với sứ mệnh mang đến những bài viết chất lượng cho độc giả của 2coffee.dev.Hãy theo dõi tôi qua các kênh LinkedIn, Facebook, Instagram, Telegram.

Bạn thấy bài viết này có ích?
Không

Bình luận (1)

Nội dung bình luận...
Avatar
Trịnh Cường3 năm trước
Bài viết rất hay và bổ ích. cảm ơn bạn rất nhiều vì đã chia sẻ. hóng những bài viết mới của bạn. Chúc blog ngày càng lớn mạnh. tặng bạn 1 share
Trả lời
Avatar
Xuân Hoài Tống3 năm trước
Nhớ ghé blog của mình để đọc những bài mới hơn nhé bạn.