Importance of Functional Caching in Java script

Hi Guys, As you all know that most important prospect of any website is its performance. Web performance is very crucial part of any project, we do all development but we mostly lack in web performance. After implementing all functionalities then we think how to improve our app performance.

There are so many techniques to improve the performance but we are going to focus on functional caching and its importance in performance improvement. Functional Caching - when we heard the word Caching that means we store some data and if there is requirement of that data, we return it.

Now the question is how to implement functional caching ?

Where do we require functional caching ?

when we do some CPU intensive task, we can optimize the code by storing result of the operation in the cache. If function called with same input then we return the stored result from cache.

function someOperation(arg) {
    if(cache has operation result for arg input) {
        return the result from cache
    } else {
        perform operation and store the result in cache
    }
    return the result
}


someOperation('sameInput'); // first time it takes time and store the data

someOperation('sameInput'); // this time won't take much time as data is stored for sameInput

Some real examples, performing square root:

function squareRoot(arg) {
     return Math.sqrt(arg);
}

console.log(squareRoot(16)) // 4
console.log(squareRoot(25)) // 5

Now we can build above function with function caching

function squareRoot(arg) {
    if(!squareRoot.cache){
        squareRoot.cache = {};
    }
    if(!squareRoot[arg]) {
        return squareRoot.cache[arg] = Math.sqrt(arg)
    }
     return squareRoot.chache[arg];
}

We are saving result in cache property of function squareRoot, first we are checking if cache exists if not initialize with blank object, then checking if result exists for that argument if not perform operation store in cache and return result. We can call function many times.

squareRoot(16);
squareRoot(25);

We can create a function which will implement functional caching for all functions. We just need to pass the function to implement functional caching.

function memoize(fn) {
    return function () {
        const args = Array.prototype.slice.call(arguments);
        fn.cache = fn.cache || {};
        return fn.cache[args] ? fn.cache[args] : (fn.cache[args] = fn.apply(this, args));
    }
}

Above function accepts another function as an argument and returns a function.

With the help of functional caching, we can reduce the CPU time and improve our app performance. There are so many things to improve web performance but this is one step towards web performance. We have learned functional caching and how it could help in web performance.