Javascript Memoization

Developer in action

What is Memoization ?

Memoization is an optimisation technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result whenever same inputs are passed.

Why do we need Memoization?
Let’s understand where we might need memoized functions!

function square(num) {
  return num*num;
}

sqaure(2) // returns 4
square(9999999999999999) // This is an expensive computation
square(9999999999999999) // Should we re-compute for same large input?

The above function seems simple enough when we pass small numbers as parameters, but imagine if we have a huge number for example, 9999999999999999. If we call , square(9999999999999999) twice, it is an expensive computation which we can avoid.

How to convert the above function to memoized function ?

function square(n) {
  return n * n;
}

function memoizedSquare() {
  let cache = {};
  return function optimizedSquare(num) {
    if (num in cache) {
      console.log('Returning from cache');
      return cache[num]
    } else {
      console.log('Computing square');
      const result = square(num);
      cache[num] = result;
      return result;
    }
  }
}

const memoSquare = memoizedSquare();
console.log(memoSquare(9999999999999999));
console.log(memoSquare(9999999999999999));

// Outputs:
// "Computing square"
// 1e+32

// "Returning from cache"
// 1e+32

As we can see in the example, we create a function memoizedSquare() that uses javascript closures and objects.
We check if the input number is already present in the cache, if yes we return the cached result else we perform the calculations. This will help avoid expensive computations wherever possible.

Improved re-usable memoize function

function memoize(callback) {
 let cache = {};
  return function(...args) {
   const key = args.toString();
    if(key in cache) {
     console.log('Returning from cache!');
      return cache[key];
    } else {
     console.log('Computing result...');
      const result = callback(...args);
      cache[key] = result;
      return result;
    }
  }
}

function multiply(a,b) {
 return a*b;
}

const memoMulitplication = memoize(multiply);
console.log(memoMulitplication(10, 10));
console.log(memoMulitplication(10, 10));

// Outputs
// "Computing result..."
// 100
// "Returning from cache!"
// 100 

Potential drawbacks of memoization technique

1. Increased memory usage: Since memoization involves caching the results of function calls, it can increase the amount of memory your program uses, especially if the cache grows large over time. You’ll need to be careful about managing memory if you decide to use memoization extensively in your code.
2. Cache invalidation: If the input to a memoized function changes over time (e.g., if you’re caching the results of a network request that returns different data each time), then you’ll need to manage the cache carefully to ensure that it stays up-to-date. In some cases, this can be more trouble than it’s worth.
3. Increased complexity: Memoization can add complexity to your code, especially if you need to handle edge cases or optimize the cache size for performance. You’ll need to weigh the benefits of memoization against the added complexity and potential bugs that it can introduce.

In conclusion, memoization is a powerful technique that can help improve the performance of your JavaScript code, but it may not be appropriate for every use case. Before using memoization, carefully consider the potential benefits and drawbacks to determine if it’s the right choice for your application.