Expensive calculations
Compute a costly value only when code first needs it.
JS Puzzles · Const
getter memoization
A memoized getter computes a property value on first access and caches it for subsequent reads. It combines lazy evaluation with property-level memoization.
How it works
A memoized getter delays an expensive calculation until the property is first read, then replaces or stores the result so later reads reuse it. This is useful when the value is expensive, may never be needed, and remains stable after calculation.
Syntax
get propertyName() { /* ... */ }Returns
The getter's returned value becomes the value observed through the property.
Key points
- A getter exposes property-like access while running a function when the property is read.
- The calculation is deferred until the first property access.
- The initial read performs the expensive calculation.
- Memoization is suitable for costly CPU, memory, worker, or remote-data operations.
- Lazy evaluation avoids doing work for a property that is never accessed.
Common mistakes
- Do not use this pattern for values that can change: the cached result will not be recalculated.
- Declaring a getter alone does not cache anything; the caching behavior must be implemented explicitly.
Example: A memoized getter
const object = {
get expensiveValue() {
delete this.expensiveValue;
return (this.expensiveValue = calculateValue());
},
};
function calculateValue() {
console.log("calculated");
return 42;
}
console.log(object.expensiveValue);
console.log(object.expensiveValue);The first access computes and replaces the getter with a data property; later accesses read the cached value.
When to use it
Deferred resources
Avoid loading or retrieving data that may never be used.
Stable derived state
Reuse an immutable derived value across repeated property reads.
Related
getsetterObject.defineProperty()Object.defineProperties()