The classic approach to this problem involves using a HashMap to store previously computed arguments and their results.
However, this method has limitations — as the cache grows, memory usage can become inefficient. In real-world applications, it's often necessary to set an upper limit on how much cache can be stored in memory.
There are several ways to handle this, with one common technique being the <code>Least Recently Used (LRU) cache</code>.
In an LRU cache, when the cache reaches its capacity, the least recently used entries are removed to make space for new ones.
In JavaScript, Map maintains the order of insertion, which can be leveraged for this purpose.
To implement this, we define a class called <code>LRUCache</code>. Then, inside the <code>memoize()</code> function, we initialize the cache using <code>const cache = new LRUCache()</code>.
<pre class="shiki github-dark shaku"><code>class LRUCache{ static CACHE_LIMIT = 100; constructor(){ this._cache = new Map(); } _updateEntry(key){ const result = this._cache.get(key); this._cache.delete(key); this._cache.set(key, result); } set(key, value){ this._cache.set(key, value); if(this._cache.size &gt; LRUCache.CACHE_LIMIT){ const oldestKey = this._cache.keys().next().value; this._cache.delete(oldestKey); } } has(key){ if(this._cache.has(key)){ return true; } return false; } get(key){ if(!this._cache.has(key)){ return undefined; } this._updateEntry(key); return this._cache.get(key); }}</code></pre>
Integrate <code>LRUCache</code> with <code>memorize</code>:
<pre class="shiki github-dark shaku"><code>function memoriz(callback, resolver){ const cache = new LRUCache(); let lastContext = null; return function(...args){ const cacheKey = resolver ? resolver(...args) : args.join("_"); if(lastContext === this &amp;&amp; cache.has(cacheKey)){ return cache.get(cacheKey); } const result = callback.apply(this, args); cache.set(cacheKey, result); lastContext = this; return result; }}</code></pre>
In JavaScript, when working with methods that depend on the value of <code>this</code>, it’s important to cache results based on both the arguments and the context in which the function was called.
Otherwise the following test case would fail:
<pre class="shiki github-dark shaku"><code>const funcThis = (b) =&gt; `${this.a}_{b}`;const memo = memoize(funcThis);const obj1 = {a: 1, memo};const obj2 = {a: 2, memo};obj1.memo(3);obj2.memo(3);</code></pre>
Without checking <code>lastContext</code>, <code>memorize()</code> would mistakenly treat <code>obj1.memo(3)</code> as a repeat invocation of
<code>obj2.memo(3)</code> since they have identical arguments.