Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
The getter helps when we need to get some dynamic value without an explicit call.
Users can follow the syntax below to work with the getters.
Syntax
{ get prop() {} }
{ get [exp]() {} }
The prop and the exp are the object's properties that bind to a function. 'prop' is a simple object property, and 'exp' is an expression.
Rules
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, and then store it in a cache for subsequent use. Because they won't recalculate the property later, we refer to them as smart-getters.
The lazy-getter memorization method makes the most of both time and space. It offers a speedier code.
Uses
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
Users can follow the syntax below to work with the lazy-getters using the general object access method.
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.
Example
The program defines an object with a lazy getter to memorize 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 to work with lazy-getters
Users can follow the syntax below to work with the lazy-getters using this method.
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>
This tutorial taught us to work with lazy-getters. Users can use lazy-getters in circumstances where time and memory efficiency is necessary.
404 Views
