A Week in JavaScript Patterns: Lazy Function Definition
Lazy Function Definition is a pattern of functional JavaScript programming, similar to Load Time Configuration. The key difference is that the final function value isn’t configured at load time, but rather upon the first invocation of the function.
The Lazy Function Definition pattern was discovered and named by Peter Michaux.
Motivation
Generally there are two main reasons for wanting to defer defining functions until a later time (although with any pattern, many other applications exist):
- Resources required for a function to be fully defined are not available until the page fully loads or until a user-driven event (for example, determining page scroll).
- The resources created by defining the function are particularly taxing and may not even be needed (for example attaching event handlers).
Implementation
The Lazy Function Definition solves these problems by defining resources upon the first invocation of the function and then redefining itself so that they are not recreated during subsequent calls. All resources are stored via closure so they remain available to the inner function (which becomes the new definition for the outer function).
var getResource = function () {
var resource, counter;
resource = 'foo';
counter = 0;
getResource = function () {
return resource + ' has been accessed ' + (++counter) + ' times';
};
return getResource();
};
In the code above, a getResource function is defined. When the function is called the first time, resource and counter are created to store important information which is needed in future calls to getResource.
The function which immediately follows redefines the original getResource function, but because resource resource and counter are defined in the same scope as the inner function, they remain available.
Finally, the new getResource is executed and it’s value is returned. Now any future calls to getResource will use the inner function.
Conclusion
The Lazy Function Definition pattern allows for deferred function definition as well as insuring that resources that only need to be created once, are created once.
- Sunday: Self-invocation
- Monday: Load Time Configuration
- Tuesday: The Module
- Wednesday: Lazy Function Definition
4 Responses to A Week in JavaScript Patterns: Lazy Function Definition
mikeg:
Sean,
The easiest way to get a Singleton in JavaScript is to create an object literal:
‘foo’ : function () { return ‘You called foo’; },
‘bar’ : function () { return ‘You called bar’; }
};
Lazy Function Definition could be used as a Singleton Factory, if some pre-processing needs to occur before the object is returned… but generally that would be best done by a Module.
Jay Smith:
“…Is this a disconnect of design patterns and the Javascript community, or are they just called something different in JavaScript?”
Sean, the whole idea of patterns were born from solutions discovered to work around language barriers. Languages like Java, C#, C and so on are like writing in ink. Look, with those languages, the code you write is unable to modify itself while the program is running. So patterns of objects were put together in interesting ways to alleviate or workaround the constraints of compilation, strong typing.
You’ll rarely here anyone in the smalltalk, SELF, Javascript or Io community refer to these as patterns because we pull of wonders using language semantics. What would require a platoon of objects and trickery would be solved in javascript with language.
Sean shows how the getResource () function was able to fetch and compute the expensive data, then rewrite itself immediately to return the value at once on subsequent calls. This is caching at the method level using the language itself. Also known as function memoization.
Jay Smith:
typo, i meant:
“Mike shows how the getResource() function was able to fetch…”
Sean Chambers:
On August 22nd, 2008 at 7:25 am #
So this is basically a Singleton Pattern?
I find that in JavaScript there are alot of patterns that people are using but are not communicating them as the associated pattern.
Is this a disconnect of design patterns and the Javascript community, or are they just called something different in JavaScript?
If you would have said singleton at some point there I would have known what you were getting at right away.
Just curious