Can't understand a JavaScript function return

Question

I am new to JS and encountered several new thins. For example I saw this piece of code:

function baz() {
    var x = 1;
    return {
        foo: function foo() {return ++x},
        bar: function foo() {return --x},
    };
}

var closures = baz();
alert(closures.foo(),closures.bar());

It is supposed to show a shared variable. My question is - what is being returned?

Is it simply an object with two functions foo() and bar()? Thanks

Yotam

Denys Séguret · Accepted Answer · 2012-12-04T09:40:13.230

Yes, it's "simply an object with two functions foo() and bar()".

But this function is also declared in a closure, which means it can have this private property x which

is visible and modifiable by both functions
can't be read or modified otherwise

The main differences with

var x = 1;
var closures = {
    foo: function() {return ++x},
    bar: function() {return --x},
};

is that

x is protected by the closure creating the object
there can be no name conflict regarding x, and the global namespace isn't cluttered

score 3 · Answer 2 · edited Dec 04 '12 at 09:24

3

The function baz returns an object with two properties (foo and bar). The values of those two properties are functions (both of which modify and return the value of the same x variable).

edited Dec 04 '12 at 09:24

arijeet

1,858
18
26

answered Dec 04 '12 at 09:19

Quentin

914,110
126
1,211
1,335

score 1 · Answer 3 · answered Dec 04 '12 at 09:23

Yo can even omit the foo() after function, because those properties will be named as you see, and those functions can be anonymous as well so: return { var foo: function() {return ++x}, var bar: function() {return --x}, };

So you have object with properties which are functions.

score 0 · Answer 4 · edited May 23 '17 at 12:27

The function baz sets a variable x to be 1 and then creates returns an object. This object has two fields one being foo and the other being bar. A little quick thing about objects is that if you want to access a field you simply need to call object.fieldname. We'll get more into that later.

The functions foo and bar are pretty simply. If you aren't sure what ++x and --x does here is a good Stackoverflow question:

Incrementing in C++ - When to use x++ or ++x?

Basically it is saying it will perform the statement and then increment or decrement x. Because it is returning x I believe it will return 1, and then increment or decrement x.

At the end of the function a variable called closures is defined and this is the object that is returned from the function. Like I said before, in order to access the fields, all you would need to do is do object.fieldname which in this case would be closures.foo() or closures.bar() (the parentheses are necessary to run the function).

I just tested it out and your alert shows 2. I believe the reason is that it doesn't understand the syntax of alert(int,int) so it shows the first alert only.

Can't understand a JavaScript function return

4 Answers4