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.

Memoization works by creating a cache object that stores the results of a function based on its input arguments. The first time the function is called with a specific set of input arguments, the function is executed as normal, and the result is stored in the cache object.

Subsequent calls to the function with the same input arguments will bypass the function execution and instead retrieve the result from the cache object. This significantly speeds up the execution time of the function and can reduce the load on your server or client-side code.

Let’s understand where we might need memoized functions!

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

square(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)); // Computing square 1e+32
console.log(memoSquare(9999999999999999)); // 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) {
    const cache = new Map();

    return function(...args) {
        const key = JSON.stringify(args);

        if (cache.has(key)) {
            console.log('Returning from cache!');

            return cache.get(key);
        } else {
            console.log('Computing result...');

            try {
                const result = callback.apply(this, args);
                cache.set(key, result);

                return result;
            } catch (error) {
                console.error('Error in memoized function:', error);

                throw error;
            }
        }
    };
}

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

const memoMultiplication = memoize(multiply);
console.log(memoMultiplication(10, 10)); // Computing result... 100
console.log(memoMultiplication(10, 10)); // Returning from cache! 100

Potential drawbacks of memoization technique:

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

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.