What can javascript closures be used for?

Question

I've been wondering for a while - what can JavaScript closures be used for?

I know how to write them and I know how they work, but I just can't get the idea of how they can be used.

function closure() {
  var name = "John";
  function displayName() {
    return 'Hello, ' + name;
  }
  return displayName;
}

So far I only found one use for them - encapsulating data, so it won't be visible outside the function.

But what else can they be used for? Should I write OOP with closures? Do I need to put all my code inside a closure so it wont mess the global scope?

Any clarifications are highly appreciated!

Isn't "encapsulating data" (including functions) itself a BIG use in JS? — Passerby
– Passerby, Commented Mar 28, 2013 at 3:57
Hiding data and persisting data via "closed over" variables - as opposed to object properties. "OOP" is orthogonal to closures. The "Module Pattern" is designed to avoid messing with the global scope: however, it doesn't mandate the use of closures. — user166390
– user166390, Commented Mar 28, 2013 at 3:59

TGH · Accepted Answer · 2013-03-28 04:06:54Z

1

Can also be used to protect your code inside the colsure against naming conflicts between different libraries outside the closure. Ex whenever I create a JQuery plugin I create it as a self calling closure where I pass In "JQuery", but can safely refer to $ inside the closure because of the local scope of the named $ variable in my function definition. Even if there are other libraries using the $ variable for a different purpose

(function($){ //use $ safely inside the closure })
(jQuery);

edited Mar 28, 2013 at 4:06

answered Mar 28, 2013 at 4:00

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karol · Accepted Answer · 2013-03-28 04:28:00Z

Personally, besides obvious things like encapsulating or creating private contexts, I like Singleton JavaScript Design Pattern:

function Singleton() {
    // cached instance
    var instance = this;

    //proceed as normal - adding some variables
    this.variable1 = 1000;
    this.variable2 = 3000000;

    Singleton = function() {
        return instance;
    }
}

var singleton1 = new Singleton();
var singleton2 = new Singleton();

if(singleton1 === singleton2) {
    console.log("Singleton works :)");
}
else {
    console.log("Singleton doesn't work :/");
}

You can paste this code directly into Chrome JavaScript console.

Of course you can tweak it to suit your needs. There is also some drawback - you can overwrite Singleton function, and you will not be able to access instance anymore. But this is another problem.

I found it a long time ago in JavaScript Patterns book by Stoyan Stefanov (O'Reilly) . Check this out as there are other useful design patterns and examples of closures application. According to this book:

You can use closure to store some private data, which is accessible by the returned function but not to the outside code.

Collectives™ on Stack Overflow

What can javascript closures be used for?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related