Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Smart / self-overwriting / lazy getters in javaScript?
In this tutorial, let us discuss the smart, self-overwriting, or lazy-getters in JavaScript.
A getter binds the property of an object to a function, but the getter will not calculate the property value until we access it. Smart or lazy getters are a special pattern where the getter replaces itself after the first computation, avoiding recalculation and improving performance.
The getter helps when we need to get some dynamic value without an explicit call. Smart getters are particularly useful for expensive operations that should only run once.
Syntax
{ get prop() {} }
{ get [expression]() {} }
The prop and the expression are the object's properties that bind to a function. 'prop' is a simple object property, and 'expression' is a computed property name.
Rules for Getters
The getter can be a string or a number.
Never declare any parameters.
Duplicate getters are invalid.
Should not assign a getter to the object's key.
The lazy getters delay the object property calculation time. They gain access to the property, compute it once, and then store the result in a cache for subsequent use. Because they won't recalculate the property later, we refer to them as smart-getters.
The lazy-getter memoization method makes the most of both time and space. It offers speedier code execution for expensive operations.
Common Use Cases
To optimize situations such as more CPU or RAM time, remote file access, cryptographic hashes decoding, and much more.
To use the value only later.
To avoid the recalculation process.
Let us now discuss the methods through which the lazy-getter access a value.
Using General Object Access
The basic pattern for a smart getter involves deleting the getter after first use and replacing it with a static value.
Syntax
const objLazy = {
get lazyfunction() {
delete this.lazyfunction;
return this.lazyfunction = value;
},
}
objLazy.lazyfunction;
The object in the syntax contains a getter function that returns some value and replaces itself on first access.
Example
The program defines an object with a lazy getter to memoize it even after deleting it. Apply the delete keyword to the getter to remove it, then use the same getter to get a DOM value.
<html>
<body>
<h2> Illustrating the lazy-getter memorization</h2>
<p id="lazyGtrDomInp"> </p>
<div id="lazyGtrDomBtnWrap">
<button id="lazyGtrDomBtn"> Go Lazy </button>
</div>
<br>
<br>
<p id="lazyGtrDomOut"></p>
<script>
var lazyGtrDomBtn = document.getElementById("lazyGtrDomBtn");
var lazyGtrDomBtnWrap = document.getElementById("lazyGtrDomBtnWrap");
var lazyGtrDomInp = document.getElementById("lazyGtrDomInp");
var lazyGtrDomOut = document.getElementById("lazyGtrDomOut");
lazyGtrDomInp.innerHTML = "<b>Input = </b>" + new Date();
lazyGtrDomBtn.onclick = function() {
const objLazy = {
get lazyfunction() {
delete this.lazyfunction;
return this.lazyfunction = lazyGtrDomInp.innerHTML;
},
}
lazyGtrDomOut.innerHTML = "<b>The deleted lazy getter function access DOM content </b><br><br>" + objLazy.lazyfunction;
};
</script>
</body>
</html>
Using a Class with Lazy Getters
You can implement smart getters in classes by deleting the getter from the prototype and replacing it with a static value.
Syntax
class lazyClass {
get lazyClassGetter() {
delete this.constructor.prototype.lazyClassGetter;
return this.constructor.prototype.lazyClassGetter = value;
}
}
var lazyClsObj = new lazyClass();
lazyClsObj.lazyClassGetter
The class in the syntax contains a getter function that returns some value and accesses this lazy-getter using the class object.
Example
The program defines a class with a lazy getter function. Use the constructor syntax to remove this getter, then assign a value. Access the lazy-getter by creating a class object.
<html>
<body>
<h2> Illustrating the lazy-getter using a class </h2>
<p id="lazyGtrClsInp"></p>
<div id="lazyGtrClsBtnWrap">
<button id="lazyGtrClsBtn"> Lazy Assign </button>
</div>
<br>
<br>
<p id="lazyGtrClsOut"></p>
<script>
var lazyGtrClsBtn = document.getElementById("lazyGtrClsBtn");
var lazyGtrClsBtnWrap = document.getElementById("lazyGtrClsBtnWrap");
var lazyGtrClsInp = document.getElementById("lazyGtrClsInp");
var lazyGtrClsOut = document.getElementById("lazyGtrClsOut");
lazyGtrClsInp.innerHTML = "<b>Lazy getter input = 10</b>";
lazyGtrClsBtn.onclick = function() {
class lazyClass {
get lazyClassGetter() {
delete this.constructor.prototype.lazyClassGetter;
return this.constructor.prototype.lazyClassGetter = 10;
}
}
var lazyClsObj = new lazyClass();
lazyClsObj.lazyClassGetter
lazyGtrClsOut.innerHTML = "<b>The deleted lazy getter function assigns a value </b><br><br>" + lazyClsObj.lazyClassGetter;
};
</script>
</body>
</html>
How Smart Getters Work
Smart getters follow this pattern:
- First access: Execute the expensive computation
- Delete the getter function from the object/prototype
- Replace it with the computed value as a regular property
- Subsequent access: Return the cached value directly (no function call)
Conclusion
Smart or lazy getters provide an elegant way to implement memoization for expensive operations. They execute only once and cache results for better performance. Use them when you need to delay computation until first access and avoid repeated calculations.
787 Views
