UI Development

Memoization in Javascript

In javascript, we are required to write functions that perform a certain task or give us a particular result when it’s called with a specific parameter. Generally, this is the approach in functional JS or even in OOJS whenever we call the internal function of that object to do a specific operation. It means that a lot of heavy computation work in JS resides inside a function. So to optimize and reduce certain redundant computations we use a caching technique called Memoization which we will learn about in this Blog.

First, we need to understand what is caching. Caching is the way to store results/values/files temporarily somewhere so you can use them later on when it’s needed and it is commonly used in all web applications and websites. When a user visits a website the page information is stored in the browser as a cache so when the user visits the same website again or navigates back to the previous website the cache information can be displayed easily. It helps in reducing the start-up time for commonly visited websites by caching some of the information.

What is Memoization?

Memoization is a technique where all the previously computed results are stored, and they can be used whenever the same result is needed. Memoized function is an optimization technique to improve the performance of your code when you have to do certain computations again and again so it’s best that the result is cached or stored for later use which reduces the cost of extra computations. In JS this is done using objects most of the time and so instead of doing the whole thing again we just need to access from the data which can be done at a cost of  O(1).

So, it is very clear that memoization aims to reduce the amount of time taken in the execution of programs and improves the overall performance of the code.

Is memoization the same as caching?

Yes, memoization is a specific type of caching, it involves storing the return values of a function while caching refers to any storing technique (like HTTP caching).

Why is memoization important?

Let’s assume whenever a function is called with given input it does all the necessary work to produce the result. Now every time we call that function even with the same input value it does all that work again. We see here that there is a chance for reducing the amount of work when the same input value is going to provide the same result every time without any deviation.

Here we use memoization, so when an input is provided to a function, it does all the required computations and then stores the result to its memory(cache) before returning the value. So, in the future, if the same input is received again by the function, it wouldn’t have to do all those computations again. It can simply provide the cached result from the memory.

How does it work?

In JS we generally use Objects for Memoization. So, whenever a function is being called it will do all the computation/work it is required to do and then cache the result in memory before the final return. So on the next call of that function, we will check if that input’s result is stored or not in our memory then we will proceed with the required computation or just return the result from storage if it exists. How to do it?

  1. Take an empty Object and create a key with name as our input parameter. Do the required computation for generating the result and then save that result as a value for the key named the same as the input.
  2. Now that value is stored in the object. So, when the same input parameter is passed again to the function we will check if that parameter named key exists on the object or not. If it exists on our memory object then return the value using object[keyname]  otherwise repeat step 1.

Let’s see this in action with a simple example:

 

Output

Note: This can be done in many ways depending on the use case. This is just one of the ways which is best for this particular example. After understanding the concept I would recommend you all to go try it with your own approach and compare its performance with the performance without memoization.

When To memoize a function?

  • It works with recursive functions, which perform heavy operations. like GUI renderings etc.
  • It works best with heavy computations.
  • It works best when we know a set of inputs will produce a certain output.
  • It should be implemented on pure functions means functions that return the same output with a particular input.

 

Conclusion:

In memoization, we prevent our functions from calling functions which re-calculates the same output over and over again. So, memoization helps to reduce the amount of time taken in the execution of programs.

About The Author