Phong cách Point-Free trong JavaScript

Phong cách Point-Free trong JavaScript

Tin ngắn hàng ngày dành cho bạn
  • Từ lâu rồi suy nghĩ làm thế nào để tăng sự hiện diện thương hiệu, cũng như người dùng cho blog. Nghĩ đi nghĩ lại thì chỉ có cách chia sẻ lên mạng xã hội hoặc trông chờ họ tìm kiếm, cho đến khi...

    In cái áo này được cái tắc đường khỏi phải lăn tăn, càng đông càng vui vì hàng trăm con mắt nhìn thấy cơ mà 🤓

    (Có tác dụng thật nha 🤭)

    » Xem thêm
  • Một vòng của sự phát triển nhiều dự án khá là thú vị. Tóm tắt lại trong 3 bước: Thấy một cái gì đó phức tạp -> Làm cho nó đơn giản đi -> Thêm thắt tính năng cho đến khi nó phức tạp... -> Quay trở lại vòng lặp mới.

    Tại sao lại như vậy? Để mình lấy 2 ví dụ cho các bạn thấy.

    Markdown ra đời với mục tiêu tạo ra một định dạng văn bản thô "dễ viết, dễ đọc, dễ dàng chuyển thành một dạng gì đó như HTML". Vì thời đó chẳng ai đủ kiên nhẫn mà vừa ngồi viết vừa thêm định dạng cho văn bản hiển thị ở trên web như thế nào. Ấy vậy mà giờ đây người ta đang "nhồi nhét" hoặc tạo ra các biến thể dựa trên markdown để bổ sung thêm nhiều định dạng mới đến mức... chẳng nhớ nổi hết cú pháp.

    React cũng là một ví dụ. Từ thời PHP, việc khát khao tạo ra một cái gì đó tách biệt hẳn giao diện người dùng và phần xử lý logic chính của ứng dụng thành 2 phần riêng biệt cho dễ đọc, dễ viết. Kết quả là các thư viện UI/UX phát triển rất mạnh mẽ, mang lại khả năng tương tác với người dùng rất tốt, còn phần logic ứng dụng thì nằm ở một máy chủ riêng biệt. Bộ đôi Front-end, Back-end cũng từ đấy mà thịnh hành, không thể thiếu anh bồi bàn REST API. Ấy vậy mà giờ đây React trông cũng không khác biệt gì so với PHP là mấy, kéo theo là cả Vue, Svelte... lại cùng quy tất cả về một mối.

    Cơ mà không phải vòng lặp là xấu, ngược lại vòng lặp này mang tính tiến hoá nhiều hơn là "cải lùi". Nhiều khi lại tạo ra được cái hay hơi cái cũ thế là người ta lại dựa trên cái hay đó để tiếp tục lặp. Nói cách khác là chắc lọc tinh hoa từng tí một tí một á 😁

    » Xem thêm
  • Song song với các dự án chính thức thì thi thoảng mình vẫn thấy các dự án "bên lề" nhằm tối ưu hoặc cải tiến ngôn ngữ theo khía cạnh nào đó. Ví dụ nature-lang/nature là một dự án hướng tới cải tiến Go, mang lại một số thay đổi nhằm giúp cho việc sử dụng Go trở nên thân thiện hơn.

    Nhìn lại mới thấy hao hao JavaScript 😆

    » Xem thêm

Vấn đề

Bạn từng nhìn thấy đoạn mã giống như thế này xuất hiện ở đâu chưa?

fetch('https://api.example.com/endpoint')
  .then(toJSON)
  .then(handleResult)
  .catch(handleError);

Lần đầu tiếp xúc với phong cách này, tôi khá là bối rối. toJSON, handleResult, handleError ở đây là gì? Nó là một hàm vậy thì tham số của nó đâu rồi? Tại sao nó có thể chạy được khi mà không cần kết thúc bằng () để có một cuộc gọi hàm chứ? Hay chí ít là, tham số đầu vào của nó đâu?...

Chà, hàng tá câu hỏi hiện ra trong đầu, nhưng lúc đó không có ai để giải thích cho tôi hiểu. Cái gì gặp nhiều ắt sẽ quen, tôi bắt chước theo phong cách đó và ngầm hiểu "À thì ra mình cứ viết theo như vậy, nó sẽ chạy".

Mãi sau này, tôi hiểu ra phong cách trên người ta gọi là Point-Free. Vậy nếu ngay từ đầu đã khó hiểu như thế tại sao người ta vẫn dùng? Có điều gì mờ ám hoặc thú vị trong cách viết này chăng? Hãy cùng tôi tìm hiểu trong bài viết dưới đây nhé!

Phong cách Point-Free

Phong cách Point-Free có nghĩa là không cần chỉ định các đối số cho từng ứng dụng hàm. Thuật ngữ "Point" để chỉ một tham số của hàm và Point-Free có nghĩa là không "có chỗ" cho các tham số đó. Mô hình này muốn người đọc tập trung vào chức năng là gì, không quan tâm đến tên cụ thể của các tham số của nó.

Trở lại với một ví dụ đơn giản nhất, chúng ta tạo ra 4 hàm mà nhìn qua thôi cũng đủ biết nó làm gì:

const testOdd = x => x % 2 === 1;
const testUnderFifty = x => x < 50;
const duplicate = x => x + x;
const addThree = x => x + 3;

Sau đó, áp dụng một loạt các thay đổi trên một danh sách dữ liệu số:

const myArray = [22, 9, 60, 24, 11, 63];

const result = myArray
  .filter(testOdd)
  .map(duplicate)
  .filter(testUnderFifty)
  .map(addThree);

Nhìn vào dòng chảy của dữ liệu, theo thứ tự từ trên xuống dưới, lọc ra số lẻ, nhân đôi nó lên, lọc tiếp ra số nhỏ hơn 50 rồi cuối cùng cộng tất cả chúng thêm với 3.

Với phong cách này, tất cả những gì bạn thấy là tên hàm, cả với dòng chảy của dữ liệu. Phong cách này đạt được sự ngắn gọn, nhưng bạn phải cố gắng chọn những tên hàm hay, dễ hiểu.

Trở lại với ví dụ mở đầu, nếu viết theo cách thông thường, mã của bạn có thể trông giống như:

fetch("https://api.example.com/endpoint")
  .then((res) => res.json())
  .then((resJSON) => {
    const { data } = resJSON;
    const dataFiltered = data.filter((item) => item.active === true);
    return dataFiltered;
  })
  .catch((err) => {
    if (err instanceof RangeError) {
      throw new RangeError("The number is outside the range");
    } else if (err instanceof EvalError) {
      throw new EvalError("The code could not be evaluated");
    }
  });

Hơi có nhiều thứ cần phải đọc hiểu nhỉ, hãy "refactor" lại một chút:

const toJSON = res => res.json();
const handleResult = data => data.filter(item => item.active === true);
const handleError = err => {
  if (err instanceof RangeError) {
    throw new RangeError("The number is outside the range");
  } else if (err instanceof EvalError) {
    throw new EvalError("The code could not be evaluated");
  }
};

fetch("https://api.example.com/endpoint")
  .then((res) => toJSON(res))
  .then((resJSON) => handleResult(resJSON))
  .catch((err) => handleError(err));

Ok hơn rồi nhưng vẫn còn mã thừa, chuyển nó thành Point-Free:

fetch('https://api.example.com/endpoint')
  .then(toJSON)
  .then(handleResult)
  .catch(handleError);

Ưu và nhược điểm

Ưu điểm dễ nhận thấy nhất của Point-Free là nó tập trung vào hàm thay vì dữ liệu, giúp mã ngắn gọn và dễ đọc hơn nếu đặt tên đủ tốt. Sử dụng kết hợp với các thư viện theo phong cách Point-Free như ramda.js, lodash/fp với rất nhiều hàm tiện ích có thể tạo ra sự thống nhất trong dự án của bạn.

Ví dụ thứ 2 sau khi sử dụng hoàn toàn bằng thư viện ramda.js sẽ trông giống như:

const R = require('ramda');

const isOdd = R.pipe(R.modulo(R.__, 2), R.equals(1));
const isUnderFifty = R.lt(R.__, 50);
const double = R.multiply(2);
const addThree = R.add(3);

const handle = R.pipe(
  R.filter(isOdd),
  R.map(double),
  R.filter(isUnderFifty),
  R.map(addThree)
);

const myArray = [22, 9, 60, 24, 11, 63];
handle(myArray);

Tuy nhiên, ưu cũng có thể trở thành nhược điểm cho người mới, người chưa quen với phong cách Point-Free này, nó có thể trở nên khó hiểu hoặc mất nhiều thời gian hơn để tiếp cận.

Tổng kết

Point-Free là một phong cách lập trình tập trung vào tên hàm và bỏ qua tầm quan trọng của đối số. Với cách viết này, chúng ta tập trung nhìn vào luồng xử lý hơn là logic đằng sau chúng. Đối với những người mới bắt đầu, Point-Free có thể gây khó đọc hoặc khó hiểu. Nhưng một khi đã quen, bạn sẽ thấy nó vô cùng hữu ích.

Cao cấp
Hello

Tôi & khao khát "chơi chữ"

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên 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 (0)

Nội dung bình luận...