Memoization in JavaScript

Mert — Mon, 02 Mar 2020 20:26:39 +0000

What is memoization?

Memoization is a technique that makes your function calls faster in exchange of memory space. Although it is generic for all programing languages, I'm going to use JavaScript to implement a simple memoization function.

Why to use it?

As our application grows, there may be some cases where hard computational algorithms might happen to be slowing down your application. You may want to store those computations' results and use them over and over again to improve your application's performance and that's where memoization comes in...

Memoization technique gives you the ability of caching results in function scope and lets you use it from inner functions. This caching mechanism provides you better performance especially in terms of expensive function calls.

Let's say you have a simple factorial function and you don't want to calculate factorial of any given number after it has already been calculated.

By returning a function and storing factorial result in its closure, we can create a memory cache.

As shown above, we created a memoizedFactorial function and store every calculated factorial in the cache object. This way we create closure for returning function and it has access to this cache object therefore second function call with same parameter will not call factorial function.

Conclusion

We prevent our application from calling function over and over again in the exchange of memory space because closured data is stored on heap memory.

Also you can read;

How to Handle Dynamic Import Errors in Vuejs

Mert — Wed, 26 Feb 2020 11:50:19 +0000

Nowadays, one of the most challenging parts of frontend development is error handling. Sometimes we don't want to think about the worst cases or we just don't have time to handle them because of deadlines but it doesn't mean they aren't important.

Today, I'm going to talk about dynamic import error handling. Although this topic is about Vuejs, you can see this as a generic solution for other view libraries.

As our application grows, we may want to reduce JavaScript bundle size in order to decrease initial load time and performance. There are couple of techniques to achieve this goal like reducing image sizes, lazy loading and code splitting.

Code splitting is a technique which allows you to split your JavaScript bundles into different parts which can be loaded at anytime in the future. We can split route codes with JavaScript's import() method but due to nature of it, it returns a promise after completion or failure of an asynchronous operation.

How

In Vuejs, we can set import methods return value to component key of route object like below. With this way JavaScript bundle of About page will be only called if user navigate to it.

With this code above, we only handle the success scenario. If we want to handle failure case, we can create a generic component which isn't imported dynamically and then return it on catch like below.

This generic DynamicImportError component will be loaded on initial request. What if our initial request fails? Well... I think that is different problem.

Conclusion

You can say that DynamicImportError will increase initial bundle size, but it is a dummy component and it only informs visitors that something went wrong so it won't have a big size. In my opinion it has a pretty low opportunity cost.

Forem: Mert

Memoization in JavaScript

What is memoization?

Why to use it?

Conclusion

How to Handle Dynamic Import Errors in Vuejs

How

Conclusion