Tìm hiểu về Memoization trong JavaScript

Memoization là gì?

Memoization là kỹ thuật tối ưu hóa được sử dụng để tăng tốc cho các chương trình máy tính bằng cách ghi nhớ kết quả trả về của hàm. Nếu input truyền vào giống với lần trước đó thì thay vì tính toán để đưa ra kết quả, nó sẽ trả về kết quả đã lưu trong bộ nhớ.

Chúng ta cùng xem một ví dụ để hiểu rõ hơn về kỹ thuật này:

Ta sẽ tạo một hàm plusBy5 như sau:

const plusBy5 = (n) => (n + 5);

console.log(plusBy5(20)); // 25

Ta truyền một số bất kỳ vào plusBy5, kết quả sẽ là số này cộng thêm 5. Đây là một hàm tính toán đơn giản, tốn không quá nhiều thời gian thực thi. Với các tính toán phức tạp(expensive function) ta có thể sử dụng kỹ thuật Memoization.

Dưới đây là một ví dụ ta sử dụng Memoization để ghi nhớ kết quả của hàm trên.

function memoizedPlusBy5() {
  let memo = {};
  return (value) => {
    if (value in memo) {
      console.log('Trả về kết quả đã ghi nhớ');
      return memo[value];
    } else {
      console.log('Tính toán và trả về kết quả');
      let result = value + 5;
      memo[value] = result;
      return result;
    }
  }
}

const plusBy5 = memoizedPlusBy5();

Hàm memoizedPlusBy5 là một higher order functions.

memo có thể ghi nhớ kết quả vì memoizedPlusBy5 return về một function, function này là một Closure.

Chúng ta cùng chạy thử ví dụ trên:

plusBy5(20); // Tính toán và trả về kết quả => 25
plusBy5(20); // Trả về kết quả đã ghi nhớ => 25

Các bạn có thể thấy, ở lần tính toán đầu tiên kết quả chưa được ghi nhớ, với lần tiếp theo thì nếu truyền cùng input là 20 thì hàm sẽ lấy kết quả đã ghi nhớ từ lần trước và trả về kết quả cho chúng ta. Với kỹ thuật này ta có thể cải thiện performance cho trang web ^^.

Kỹ thuật này cũng được sử dụng trong Redux với libary là Reselect, trong React là memo, useMemo, và useCallback.

Kết luận

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

Hy vọng bài viết sẽ giúp ích cho các bạn. Chúng ta sẽ gặp nhau trong các bạn viết sắp tới nhé.