What is this JavaScript pattern called and why is it used?

Patrick Klug

I'm studying THREE.js and noticed a pattern where functions are defined like so:

var foo = ( function () {
    var bar = new Bar();

    return function ( ) {
        //actual logic using bar from above.
        //return result;
    };
}());

(Example see raycast method here).

The normal variation of such a method would look like this:

var foo = function () {
    var bar = new Bar();

    //actual logic.
    //return result;
};

Comparing the first version to the normal variation, the first seems to differ in that:

  1. It assigns the result of a self-executing function.
  2. It defines a local variable within this function.
  3. It returns the actual function containing logic that makes use of the local variable.

So the main difference is that in the first variation the bar is only assigned once, at initialization, while the second variation creates this temporary variable every time it is called.

My best guess on why this is used is that it limits the number of instances for bar (there will only be one) and thus saves memory management overhead.

My questions:

  1. Is this assumption correct?
  2. Is there a name for this pattern?
  3. Why is this used?
MD. Sahib Bin Mahboob

Your assumptions are almost correct. Let's review those first.

  1. It assigns the return of a self-executing function

This is called an Immediately-invoked function expression or IIFE

  1. It defines a local variable within this function

This is the way of having private object fields in JavaScript as it does not provide the private keyword or functionality otherwise.

  1. It returns the actual function containing logic that makes use of the local variable.

Again, the main point is that this local variable is private.

Is there a name for this pattern?

AFAIK you can call this pattern Module Pattern. Quoting:

The Module pattern encapsulates "privacy", state and organization using closures. It provides a way of wrapping a mix of public and private methods and variables, protecting pieces from leaking into the global scope and accidentally colliding with another developer's interface. With this pattern, only a public API is returned, keeping everything else within the closure private.

Comparing those two examples, my best guesses about why the first one is used are:

  1. It is implementing the Singleton design pattern.
  2. One can control the way an object of a specific type can be created using the first example. One close match with this point can be static factory methods as described in Effective Java.
  3. It's efficient if you need the same object state every time.

But if you just need the vanilla object every time, then this pattern will probably not add any value.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

What is this design pattern called?

From Dev

What is this design pattern called?

From Dev

javascript pattern used in angular

From Dev

What is this object initialiser pattern called?

From Dev

What's this java pattern called?

From Dev

What is this anti-pattern called?

From Java

What is Bulkhead Pattern used by Hystrix?

From Dev

Why interface is used in observer pattern?

From Dev

JavaScript PubSub Pattern: What is happening with the context of "this", why is it lost?

From Dev

What is this technique called in javascript?

From Dev

What is this JavaScript construct called

From Dev

JavaScript Settings - What are these called?

From Dev

What type of Javascript Pattern is it?

From Dev

Why this pattern of wrapping javascript

From Dev

What is this pattern f(a)(b)(c) called?

From Dev

What is the @ used for in JavaScript?

From Dev

ScalaMock and the Cake Pattern - Why is my stub not called?

From Dev

When a destructor is called and what is used for in this example?

From Dev

What pattern is used in Collections.synchronizedList()

From Dev

What is the design pattern being used in this video?

From Dev

Why can't ++ be used in pattern matching?

From Dev

Why such pattern can't be used in a member function?

From Dev

What this JavaScript function method called?

From Java

What is a blob URL and why it is used?

From Dev

What is Liquibase Producer and why it is used?

From Dev

Why overriden toString() is not called in javascript

From Dev

Why is the function called? JavaScript / Window

From Dev

What is the benefit of this javascript prototype pattern?

From Dev

What is the advantage of this javascript module pattern?

Related Related

HotTag

Archive