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?

Tin ngắn hàng ngày dành cho bạn
  • Manus đã chính thức mở cửa cho tất cả người dùng rồi đấy mọi người. Cho những ai chưa biết thì đây là một công cụ viết báo cáo (làm mưa làm gió) giống như Deep Research của OpenAI á. Mỗi ngày được miễn phí 300 Credits để nghiên cứu. Mỗi lượt nghiên cứu tiêu tốn tuỳ thuộc vào độ phức tạp của yêu cầu. À với cả họ đang có chương trình tặng miễn phí Credits hay sao á. Như mình thì vào thấy được hẳn 2000.

    Mình dùng thử, so sánh với cùng một lệnh giống như đợt trước dùng bên Deep Research thì nội dung khác biệt nhau hoàn toàn. Manus báo cáo như kiểu viết văn hơn so với OpenAI là các gạch đầu dòng và bảng biểu.

    À lúc đăng ký xong có bắt nhập số điện thoại để xác minh, nếu lỗi thì các bạn đợi qua ngày thử lại xem có được không nhé.

    » Xem thêm
  • Mọi người chắc nghe nhiều về xu hướng tìm kiếm thông tin bằng AI chứ không cần công cụ tìm kiếm như Google nữa rồi đúng không? Không đâu xa ánh xạ vào bản thân thì thấy đúng thật, thi thoảng mới tìm kiếm thôi chứ còn đâu toàn hỏi tụi AI.

    Ngay từ đầu viết blog, thứ mà mình hướng đến là chia sẻ kinh nghiệm chứ không phải là những bài mang nặng tính kỹ thuật, máy móc, hướng dẫn từ đầu... Vì thời điểm đó đã có quá nhiều người làm nội dung này rồi và họ làm rất tốt, tại sao mình phải cố phát minh lại bánh xe? Một điều nữa là tin tưởng độc giả của mình có khả năng tìm hiểu vấn đề. Nếu bạn đọc đủ nhiều các bài viết trên blog thì thấy mình luôn cố gắng chèn thêm các liên kết tham khảo ngoài bài viết, nêu ra vấn đề mở và rất ít khi kết luận chắc chắn một điều gì đó.

    Mình đã cố gắng rèn luyện kỹ năng viết, kỹ năng trình bày và cả cách tương tác với độc giả để mang lại giá trị cho họ. Nhiều lúc ngồi lật lại các con số thống kê thấy lượng đọc bài viết tăng lên lại cảm thấy vui. Nhưng khi nguồn truy cập đến từ Google thì lại thấy buồn, vì điều đó chứng tỏ họ biết đến mình chỉ khi đang cố đi tìm giải pháp, có thể họ chỉ đọc chớp nhoáng, may ra tìm được cách giải quyết và thế là đóng cửa sổ trình duyệt rồi đi như một cơn gió.

    Chừng vài tháng đổ lại đây, một điều khiến mình rất vui đó là lượng người truy cập thẳng vào trang chủ mà không thông qua công cụ tìm kiếm đang tăng dần lên, có nhiều hôm lượng truy cập tự nhiên còn cao hơn cả đến từ Google. Điều đó chứng tỏ độc giả đã có thói quen quay lại trang của mình nhiều hơn và họ tìm thấy được giá trị từ blog mang lại. Vui mừng khôn xiết 🤩

    Bên cạnh đó thì lượng truy cập vào chuyên mục Threads - tức là mục mình đang viết bài này đang cao hơn bao giờ hết. Điều đó chứng tỏ xu hướng đi theo tin nhanh là đúng đắn. Mình có thể ngồi cả ngày để viết tin ngắn cho bạn đọc vì nó rất nhanh mà tiện, không tốn công đi tìm tài liệu để viết, không tốn cả thời gian viết nữa, còn mình thì có rất nhiều thứ để chia sẻ 😅. Nhưng không vì thế mà bỏ bê các bài viết dài, vì dài thì có nhiều thông tin để chia sẻ hơn.

    Vài lời tâm sự thế thôi chứ hơn một tháng nay mình chưa viết bài viết mới nào vì công việc bận quá. Xong lâu dần cứ trì hoãn lại thành lười. À với cả tháng 5 này rất thích hợp để đọc các cuốn sách về cách mạng á. Có hôm đọc đến 2 giờ sáng mới đi ngủ 🥱

    » Xem thêm
  • Mình mới nhìn thấy một trang web khá thú vị nói về các cột mốc đáng nhớ trong lịch sử phát triển Internet toàn cầu: Internet Artifacts

    Chỉ từ 1977 - khi Internet còn nằm trong hộp thí nghiệm thì nhìn xem - giờ đây Internet đã khiến mọi thứ phát triển đến mức nào 🫣

    » 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.

Cao cấp
Hello

Bí mật ngăn xếp của Blog

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

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.

Bình luận (1)

Nội dung bình luận...
Avatar
Trịnh Cường4 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ống4 năm trước
Nhớ ghé blog của mình để đọc những bài mới hơn nhé bạn.