Smart / self-overwriting / lazy getters in javaScript?

Javascript Web Development Front End Technology

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>