Memoization is a programming technique used to speed up functions by caching the results of expensive function calls and returning the cached result when the same inputs occur again. This technique can be particularly useful in JavaScript when dealing with complex algorithms or functions that require significant computation time to complete.

Memoization can be implemented in JavaScript in a variety of ways, including using objects or arrays to store cached results. In this blog post, we will explore memoization in JavaScript and provide examples of how it can be used to optimize your code.

Memoization with Objects

One way to implement memoization in JavaScript is by using an object to store the results of expensive function calls. Here is an example of a simple function that computes the factorial of a given number:

const factorial = (n) => {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n-1);
  }
};

This function works correctly, but it can be quite slow when computing the factorial of large numbers. To improve its performance, we can use memoization to store the results of previous function calls. Here’s how we can do that:

let cache = {};

const factorial = (n) => {
  if (n === 0 || n === 1) {
    return 1;
  } else if (cache[n]) {
    return cache[n];
  } else {
    cache[n] = n * factorial(n-1);
    return cache[n];
  }
};

In this updated version of the function, we’ve added a cache object that stores the results of previous function calls. When the function is called with a value of n that has already been computed, the cached result is returned instead of recomputing the result. This significantly reduces the amount of time it takes to compute the factorial of large numbers.

Memoization with Arrays

Another way to implement memoization in JavaScript is by using an array to store the results of function calls. This approach is particularly useful when working with functions that take a limited range of input values. Here is an example of a function that computes the nth Fibonacci number:

const fibonacci = (n) => {
  if (n === 0 || n === 1) {
    return n;
  } else {
    return fibonacci(n-1) + fibonacci(n-2);
  }
};

Like the factorial function, this function can be quite slow when computing large values of n. To speed up its performance, we can use an array to store the results of the previous function calls:

let cache = [0, 1];

const fibonacci = (n) => {
  if (n < cache.length) {
    return cache[n];
  } else {
    let result = fibonacci(n-1) + fibonacci(n-2);
    cache[n] = result;
    return result;
  }
};

In this updated version of the function, we’ve created an array called cache that stores the results of previous function calls. When the function is called with a value of n that is less than the length of the cache array, the cached result is returned instead of recomputing the result. If the value of n is greater than the length of the cache array, the function computes the result and adds it to the cache array for future use.

In sum, memoization is a powerful technique that can significantly improve the performance of JavaScript functions by caching the results of expensive function calls. By using objects or arrays to store cached results, you can avoid recomputing results that have already been calculated and speed up your code. However, it’s important to be aware of the potential drawbacks of memoization, such as increased memory usage and the possibility of stale data.