Can someone explain the following piece of Javascript code?

Question

I was reading another question, and I saw this:

var basketModule = (function() {
var basket = []; //private

return { //exposed to public
       addItem: function(values) {
            basket.push(values);
        },
        getItemCount: function() {
            return basket.length;
        },
        getTotal: function(){
            var q = this.getItemCount(),p=0;
            while(q--){
                p+= basket[q].price;
            }
        return p;
        }
      }
}());

Can you please explain why does he wrap the function in ( and )'s? Also, what is the purpose of that return? Couldn't he just write self.addItem = ... and so on?

keune · Accepted Answer · 2012-04-28 11:30:44Z

2

When you wrap a function with parantheses, and add () to the end of it, it's a self executing function.

(function() x() {
 //do something;
})();

And, by returning he's making basket variable somewhat private. Try getting basketModule.basket from anywhere else, and you'll get undefined.

edited Apr 28, 2012 at 11:30

answered Apr 28, 2012 at 11:25

keune

5,8054 gold badges39 silver badges53 bronze badges

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

Comments

Aliostad · Accepted Answer · 2012-04-28 11:38:31Z

1

That is called javascript Module Pattern. Defining a function and calling it immediately to prevent variables to be in the global space or to define a function name.

edited Apr 28, 2012 at 11:38

answered Apr 28, 2012 at 11:27

Aliostad

81.9k21 gold badges164 silver badges209 bronze badges

1 Comment

Pavel Veller Over a year ago

I would only add that this is all part of a technique called unobtrusive JavaScript: en.wikipedia.org/wiki/Unobtrusive_JavaScript

tech-man · Accepted Answer · 2012-04-28 11:26:12Z

0

Note parentheses in the last line: (). The function is defined and immediately called: (function() { })();

return { ... } returns an object having a method addItem

answered Apr 28, 2012 at 11:26

tech-man

3,2562 gold badges20 silver badges18 bronze badges

Comments

BenMorel · Accepted Answer · 2014-01-08 12:33:30Z

0

The intention of the code is to create an object with three methods. addItem,getItemCount and getTotal. They all depend on state represented by basket.

if basket was defined globally that state would be exposed (and there could only ever be one variable basket. both of those can lead to issues so by wrapping the entire declaration the state is encapsulated and only accessible from the created object.

There are other ways of achieving the same and the pro's and con's are related to style and how many objects of that particular type you're going to need.

wrapping the function(){}() is required since function(){}() will not parse

edited Jan 8, 2014 at 12:33

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Apr 28, 2012 at 11:30

Rune FS

21.7k7 gold badges65 silver badges101 bronze badges

Collectives™ on Stack Overflow

Can someone explain the following piece of Javascript code?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related