JavaScript Memoization

INTRO 🔊

Memoization is a technique 🏆 used in computer programming to optimize 🚀 the performance of applications. It involves storing 💿 the results of expensive function calls and returning the cached result when the same inputs occur again. This can reduce 📉 the number of function calls and improve the overall efficiency of the program. 🎉

Sometimes we need to call the same logic again and again with different parameters. What if that logic is very expensive? To avoid it javascript has one beautiful concept which is known as Memoization 🔥. Memoization is the concept which memorises the previous result and it will return whenever we call it with the same parameters without having any operation 😎.

DEFINITION 🔊

Memoization is a technique for speeding up applications by caching the results of expensive function calls and returning them when the same inputs are used again. 🚀

USE CASE 🔊

As earlier said, Sometimes we need to do the same operation with the same inputs again and again. If that operation is expensive, every time it will take more time to run that operation. Memoization will help us overcome this problem

EXAMPLE 🔊

WITHOUT MEMOIZATION 🔕

const squareFn = (n)=>{
    let count =0
    for(let i=1; i<=n; i++){
        for(let j=1; j<=n; j++){
            count++
        }
    }
    return count
}

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()

By observing the above code we can understand that initially, we called squareFn function with parameter 30000. It is a very expensive operation so it will take more time to return the value. If you call the same squareFn function with the same parameter 30000, then also it will take same time (The time it will take to return the value previously) to return the value 😞. So here memoization helps us to remember that value and returns without any operation whenever we call that function with the same parameter 😉.

WITH MEMOIZATION 🔔

const squareFn=(n)=>{
    let count=0
    for(let i=1; i<=n; i++){
        for(let j=1; j<=n; j++){
            count++
        }
    }
    return count
}

const memoizationFn=(callback)=>{
    const memoizedObj={}
    return (n)=>{
        if(!memoizedObj[n]){
            memoizedObj[n] = callback(n)
        }
        return memoizedObj[n]
    }
}

const square = memoizationFn(squareFn)


console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()

console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()

If you call the square function the first time with parameter 30000 it will take more time to return the value. But when it's second calling with the same parameter 30000 it will return the memoized from object memoizedObj without doing any operation.

CONCLUSION 🔊

Memoization is a beautiful concept which helps increase the performance of applications. If your application has these types of properties (i.e. need to call a function with the same parameters multiple times) memoization helps you very much.

Peace 😊