Understanding the Lazy Loading Attribute Pattern in JavaScript

Traditionally, developers create properties in JavaScript classes for any data that might be needed in an instance. For small pieces of data that are readily available in the constructor, this is not a problem. However, if you need to compute some data before it is available in the instance, you might not want to pay that fee upfront. For example, consider this class:

class MyClass {
    constructor() {
        this.data = someExpensiveComputation();
    }
}

Here, data property is created as a result of performing some expensive calculations. If you are not sure whether the property will be used, it may not be efficient to perform that calculation up front. Fortunately, there are several ways to postpone these actions until later.

On-demand attribute mode

The simplest way to optimize the execution of an expensive operation is to wait until the data is needed before performing the calculation. For example, you can use an accessor property with a getter to do the calculation on demand, as follows:

class MyClass {
    get data() {
        return someExpensiveComputation();
    }
}

In this case, your expensive computation doesn't happen until someone reads that data attribute for the first time, which is an improvement. However, the same expensive calculation is performed every time data attribute is read, which is worse than the previous example, where at least the calculation was only performed once. This isn't a good solution, but you can build on this to create a better one.

Messy lazy loading property pattern

Performing calculations only when a property is accessed is a good start. What you really want is to cache the information after that point and only use the cached version. But where do you cache this information for easy access? The simplest way to do this is to define a property with the same name and set its value to the calculated data, like this:

class MyClass {
    get data() {
        const actualData = someExpensiveComputation();
 
        Object.defineProperty(this, "data", {
            value: actualData,
            writable: false,
            configurable: false,
            enumerable: false
        });
 
        return actualData;
    }
}

Here, the data property is again defined as a getter on the class, but this time it caches the result. Calling Object.defineProperty() creates a new property called data that has a fixed value actualData and is set to be non-writable, configurable, and non-enumerable (to match the getter). Afterwards, the value itself is returned. The next time data accesses the property, it will read from the newly created property instead of calling the getter:

const object = new MyClass();
 
// calls the getter
const data1 = object.data;
 
// reads from the data property
const data2 = object.data;

In fact, all calculations are done only the first time data attribute is read. Each subsequent read of data property returns the cached version.

One drawback of this pattern is that data properties start out as non-enumerable prototype properties and end up as non-enumerable own properties:

const object = new MyClass();
console.log(object.hasOwnProperty("data")); // false
 
const data = object.data;
console.log(object.hasOwnProperty("data")); // true

While this distinction doesn't matter in many cases, it is important to understand this pattern because it can cause subtle problems when passing objects around. Fortunately, this is easily fixed using an updated model.

Pattern for lazy loading properties of a class

If you have a use case where it is important that the lazy-loaded property always exists in the instance, then you can create the property in the class constructor using Object.defineProperty() . It's a little messier than the previous example, but it will ensure that the property only exists on the instance. Here is an example:

class MyClass {
    constructor() {

        Object.defineProperty(this, "data", {
            get() {
                const actualData = someExpensiveComputation();

                Object.defineProperty(this, "data", {
                    value: actualData,
                    writable: false,
                    configurable: false
                });

                return actualData;
            },
            configurable: true,
            enumerable: true
        });

    }
}

Here, the constructor data uses Object.defineProperty() . The property is created on the instance (by using this ) and defines a getter and specifies that the property is enumerable and configurable (typical of own properties). It is especially important to make data property configurable so that you can call Object.defineProperty() on it again.

The getter function then does the calculation and calls Object.defineProperty() again. The data attribute is now redefined as a data attribute with a specific value and is non-writable and non-configurable to protect the final data. The calculated data is then returned from the getter. The next time data property is read, it will read from the stored value. As a bonus, the data property now exists only as its own property, and behaves the same both before and after the first read:

const object = new MyClass();
console.log(object.hasOwnProperty("data")); // true
 
const data = object.data;
console.log(object.hasOwnProperty("data")); // true

For classes, this is most likely the pattern you want to use; object literals, on the other hand, allow for a simpler approach.

Object literal lazy loading property pattern

If you use an object literal instead of a class, the process is much simpler because getters defined on an object literal are defined as enumerable own properties (rather than prototype properties), just like data properties. This means you can use the messy lazy-loaded property pattern for classes without having it be messy for objects:

const object = {
    get data() {
        const actualData = someExpensiveComputation();
 
        Object.defineProperty(this, "data", {
            value: actualData,
            writable: false,
            configurable: false,
            enumerable: false
        });
 
        return actualData;
    }
};
 
console.log(object.hasOwnProperty("data")); // true
 
const data = object.data;
console.log(object.hasOwnProperty("data")); // true

in conclusion

The ability to redefine object properties in JavaScript provides a unique opportunity to cache information that might be expensive to compute. By starting with accessor properties redefined as data properties, you can defer calculation until the first time the property is read, and then cache the result for later use. This approach works for both classes and object literals, and is a little simpler in object literals because you don't have to worry about your getters ending up on the prototype.

One of the best ways to improve performance is to avoid doing the same work repeatedly, so any time you can cache results for later use, you can speed up your program. Techniques such as the lazy loading property pattern allow any property to become a caching layer to improve performance.

The above is the details of the lazy loading attribute mode in JavaScript. For more information about js lazy loading attributes, please pay attention to other related articles on 123WORDPRESS.COM!