js pattern problems

Question

I'm confused by a javascript design pattern I'm reading about:

var class = (function() {

  ...a bunch of code...

  return {

  .. some more code..

  ;

  // or, in some cases

  return function(constructorArgs) {

  };

})();

My question is: What is the return statement doing? Why is it there? I'm confused because no-one wants to mention it or talk about it.

The `return` statement returns from the function it's in (what did you expect it to do?). — melpomene, Jan 20 '13 at 22:25
@JaPerk14 Start here: http://stackoverflow.com/questions/8228281/what-is-this-construct-in-javascript — Šime Vidas, Jan 20 '13 at 22:28

score 3 · Accepted Answer · answered Jan 20 '13 at 22:35

3

There's two distinct patterns that you're mentioning, I think.

Anonymous Closures

The first is using an anonymous function to wrap a block of code in order to create a closure:

var outer = (function() {
  var inner = "now you see me!";

  return inner + " now you don't"
})()

The anonymous function creates a new scope for var-defined variables. In effect, this allows you to define variables that are only visible within that particular function.

In the example above, you have access to inner within the function, but it is not defined outside of it.

"Classes"

The second is a common pattern for defining "classes" in JavaScript:

var MyClass = (function() {
  function MyClass(arg) {
    this.arg = arg
  }

  return MyClass
})()

By defining the constructor function within a closure, you can be sure that your class is well contained. It also enables you to share class-wide state or private helper methods without polluting the global namespace, or resorting to placing them as properties on your class constructor's prototype.

answered Jan 20 '13 at 22:35

Nevir

7,951
4
41
50

1

Wow. Someone's pretty trigger-happy with the old down-vote button. +1 for a good explanation of classes - I couldn't find the words. – Jeff Jan 20 '13 at 22:40
I'm downvoting every answer that contains an incorrect explanation of "closure". Using an anonymous function that wraps a block of code is not a closure; it's just an anonymous function. The `MyClass` example doesn't involve a closure either. A closure is a function that refers to external local variables, i.e. variables from a surrounding scope. – melpomene Jan 20 '13 at 22:42
1

http://en.wikipedia.org/wiki/Closure_(computer_science) - a lexical closure is independent from a function; it just happens that in JavaScript, _functions define lexical closures within their bodies_. – Nevir Jan 20 '13 at 22:51
1

The code executed within the block of _any_ JS function is being executed within a new closure. It may not be referencing variables defined (lexically) outside of the closure's immediate scope - but that does not make the function body any less of a closure. – Nevir Jan 20 '13 at 22:53
1

next time, rather than downvote every explanation you don't like, try to write your own. Cheers. – vtortola Jan 21 '13 at 12:57

score 2 · Answer 2 · edited May 23 '17 at 10:34

the code to the right of the = symbol is of this form: (function(){})(); What this does is compile a function - effectively the same as the following:

function temp() {
}

class = temp();

Inside the function in your example, however, there is another function being returned. What this means is that class is now also a function - the class function can then reference all of the variables etc. that are declared in the temp function, due to the closure effect referenced by vtortola.

The idea of this is to allow the inner function to refer to some state that you don't want to have hanging around in your "global" (or semi-global) scope - it doesn't matter where the class method is called, or who by, it will always have access to that data.

Edit: It appears from the code that the purpose of the pattern in this case is to create a "class" type function - so then you'd be able to call it with the following code:

var myInstance = new class();

Though I've a feeling that none of the code will work as I'm reasonably certain that class is a reserved word...

score 2 · Answer 3 · answered Jan 20 '13 at 22:36

This is called a closure.

var myVar = (function (param1, param2){
    //do things
}('myParam1','myParam2')):

The javascript engine will immediatly execute what is between the parenthesis.

And the value of myVar will be what the function function (param1, param2){ ... } returns.

This function will use ('myParam1','myParam2') as arguments.

You can write closure in two different ways :

(function (receivedArgs){
  //do things
})(yourArguments);

or

(function (receivedArgs){
   //do things
}(yourArguments));

score 1 · Answer 4 · answered Jan 20 '13 at 22:28

1

It is a closure. A function is returning an inner function enclosing some variables in the middle.

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

Cheers.

answered Jan 20 '13 at 22:28

vtortola

34,709
29
161
263

js pattern problems

4 Answers4

Anonymous Closures

"Classes"