Memoization in JavaScript (Live Playground)

In this tutorial, we will explore memoization, an optimization technique used in JavaScript to cache the results of expensive function calls, thus improving the performance of your web applications.

What is Memoization?

Memoization is a programming technique that stores the results of expensive function calls and returns the cached result when the same inputs occur again. This technique is particularly useful when dealing with recursive functions, where the same input is calculated multiple times, leading to a significant reduction in processing time.

Memoization Example

In this example, we will implement a simple memoization function for calculating the factorial of a number.

function memoize(func) {
  const cache = {};

  return function (n) {
    if (cache[n]) {
      console.log('Returning cached result');
      return cache[n];
    }

    console.log('Calculating result');
    const result = func(n);
    cache[n] = result;
    return result;
  };
}

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

const memoizedFactorial = memoize(factorial);

console.log(memoizedFactorial(5)); // Calculating result, returns 120
console.log(memoizedFactorial(5)); // Returning cached result, returns 120

In this example, we create a memoize function that takes another function as an argument and returns a new function. The new function checks if the result for the given input is already cached. If it is, the cached result is returned; otherwise, the original function is called, and the result is cached for future use.

We then create a simple factorial function and use the memoize function to create a memoizedFactorial function. When calling memoizedFactorial with the same input, the cached result is returned instead of recalculating the factorial.

Live Playground, Try it Yourself

Conclusion

Memoization is an effective optimization technique in JavaScript that can significantly improve the performance of your web applications by caching the results of expensive function calls. By understanding and implementing memoization, you can optimize your code to run faster and more efficiently, providing a better user experience.