Question on closure

justaguy

unread,

Sep 15, 2012, 4:01:35 PM9/15/12

to

I intend to get back on javascripting... what could be a good resource
to get my hands on this?
Yes, googling provides some interesting links...

Here's one specific question, closure, credit of Morris Johns.

function sayHello(name) {
var text = 'Hello ' + name;
var sayAlert = function() { alert(text); }
sayAlert();
}

With closure, the sayAlert local var can be used Multiple times if
needed vs. alert(text).
Could we see a more meaningful example?

Thanks in advance.

JJ

unread,

Sep 17, 2012, 8:57:37 AM9/17/12

to

I think closure is more like private vs public access where mostly used
to prevent direct access to a variable like below example.

Here, the MyVal object stores a number where it can only be increased or
decreased by one and get queried. The number is prevented from being
directly modified. i.e.: set to specific count.

(function() {
var theValue = 0;
myVal = {
getVal: function() {
return theValue;
},
increase: function() {
return ++theValue;
},
decrease: function(val) {
return --theValue;
}
};
})();

justaguy

unread,

Sep 17, 2012, 12:14:00 PM9/17/12

to

On Sep 17, 8:57 am, JJ <jaejunks_at@_googlemail_dot._com> wrote:

Very interesting. In this case, function is being used as an
expression (instead of a statement), is that understanding correct?
Also, may we call "getVal", "increase" methods?

Thanks.

Gene Wirchenko

unread,

Sep 17, 2012, 1:02:13 PM9/17/12

to

On Mon, 17 Sep 2012 12:57:37 +0000 (UTC), JJ
<jaejunks_at@_googlemail_dot._com> wrote:

[snip]

>I think closure is more like private vs public access where mostly used
>to prevent direct access to a variable like below example.
>
>Here, the MyVal object stores a number where it can only be increased or
>decreased by one and get queried. The number is prevented from being
>directly modified. i.e.: set to specific count.
>
>(function() {
> var theValue = 0;
> myVal = {
> getVal: function() {
> return theValue;
> },
> increase: function() {
> return ++theValue;
> },
> decrease: function(val) {
> return --theValue;
> }
> };
>})();

Could you please post the rest? How do you access the value?

Sincerely,

Gene Wirchenko

Christoph Becker

unread,

Sep 17, 2012, 1:23:01 PM9/17/12

to

Gene Wirchenko wrote:
> Could you please post the rest? How do you access the value?

Try the following variation of JJ's code:

function Counter() {
var theValue = 0;
return {

getVal: function() {
return theValue;
},
increase: function() {
return ++theValue;
},

decrease: function() {
return --theValue;
}
};
}

It can be used in the following way:

var c1 = Counter(), c2 = Counter();
c1.getVal() ===> 0
c1.increase() ===> 1
c1.getVal() ===> 1
c2.getVal() ===> 0

--
Christoph M. Becker

Christoph Becker

unread,

Sep 17, 2012, 1:32:02 PM9/17/12

to

justaguy wrote:
> I intend to get back on javascripting... what could be a good resource
> to get my hands on this?
> Yes, googling provides some interesting links...

The c.l.js FAQ also does:
<http://jibbering.com/faq/#ecmascriptResources> ;-)

--
Christoph M. Becker

Gene Wirchenko

unread,

Sep 17, 2012, 2:13:17 PM9/17/12

to

On Mon, 17 Sep 2012 19:23:01 +0200, Christoph Becker
<cmbec...@gmx.de> wrote:

>Gene Wirchenko wrote:
>> Could you please post the rest? How do you access the value?
>
>Try the following variation of JJ's code:

[snip]

Thank you. That worked nicely. I still do not understand the
syntax and how that works, but I can follow the logic now.

Sincerely,

Gene Wirchenko

justaguy

unread,

Sep 17, 2012, 2:16:14 PM9/17/12

to

Thanks. In the meantime, it would be fun to try to create something
simple and yet useful while getting to know more about it.

Gene Wirchenko

unread,

Sep 17, 2012, 4:56:49 PM9/17/12

to

On Mon, 17 Sep 2012 19:23:01 +0200, Christoph Becker
<cmbec...@gmx.de> wrote:

[snip]

>Try the following variation of JJ's code:
>
>function Counter() {
> var theValue = 0;
> return {
> getVal: function() {

^^^^^^^^^^^^^^^^^^
Could you please give me pointer to where this syntax is
discussed? I tried the standard, but what I found -- sections 12.1
Block and 12.12 Labelled Statements -- is remarkably opaque. Do I
even have the correct section(s)? Do you know of something that
explains it better?

[snip]

Sincerely,

Gene Wirchenko

JJ

unread,

Sep 17, 2012, 5:47:18 PM9/17/12

to

Maybe this can help you understand it easier.

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

Stefan Weiss

unread,

Sep 17, 2012, 6:06:14 PM9/17/12

to

On 2012-09-17 22:56, Gene Wirchenko wrote:
> On Mon, 17 Sep 2012 19:23:01 +0200, Christoph Becker
> <cmbec...@gmx.de> wrote:
>>function Counter() {
>> var theValue = 0;
>> return {
>> getVal: function() {
> ^^^^^^^^^^^^^^^^^^
> Could you please give me pointer to where this syntax is
> discussed? I tried the standard, but what I found -- sections 12.1
> Block and 12.12 Labelled Statements -- is remarkably opaque. Do I
> even have the correct section(s)?

No, this has nothing to do with labels. The return value in this case is
an object, written in the form of an object literal. I'm sure you've
seen them before:

var obj = {
foo: 42,
bar: "baz"
};

Instead of the values 42 and "baz", you can use any valid expression,
including function expressions:

var obj = {
foo: 42,
bar: function () { return "baz"; }
};

Now you can call obj.bar() to get "baz" returned.
This is equivalent to writing -

function myFunc () {
return "baz";
}

var obj = {
foo: 42,
bar: myFunc
};

- except that in this case, myFunc could be called directly as well.
Putting it all together, Christoph's example did something like this:

return {
foo: 42,
bar: function () { return "baz"; }
};

HTH.

- stefan

Gene Wirchenko

unread,

Sep 17, 2012, 10:55:53 PM9/17/12

to

On Tue, 18 Sep 2012 00:06:14 +0200, Stefan Weiss
<krewe...@gmail.com> wrote:

>On 2012-09-17 22:56, Gene Wirchenko wrote:
>> On Mon, 17 Sep 2012 19:23:01 +0200, Christoph Becker
>> <cmbec...@gmx.de> wrote:
>>>function Counter() {
>>> var theValue = 0;
>>> return {
>>> getVal: function() {
>> ^^^^^^^^^^^^^^^^^^
>> Could you please give me pointer to where this syntax is
>> discussed? I tried the standard, but what I found -- sections 12.1
>> Block and 12.12 Labelled Statements -- is remarkably opaque. Do I
>> even have the correct section(s)?
>
>No, this has nothing to do with labels. The return value in this case is
>an object, written in the form of an object literal. I'm sure you've
>seen them before:
>
> var obj = {
> foo: 42,
> bar: "baz"
> };

Yes.

>Instead of the values 42 and "baz", you can use any valid expression,
>including function expressions:
>
> var obj = {
> foo: 42,
> bar: function () { return "baz"; }
> };

The penny drops.

JavaScript should be called BuriedTreasure. There are a lot of
these very neat things in it, but it can be quite the task to figure
them out.

[snip]

>HTH.

Quite. Thank you very much.

Sincerely,

Gene Wirchenko

Thomas 'PointedEars' Lahn

unread,

Sep 18, 2012, 5:14:26 AM9/18/12

to

Stefan Weiss wrote:

> On 2012-09-17 22:56, Gene Wirchenko wrote:

>> Christoph Becker wrote:
>>> function Counter() {
>>> var theValue = 0;
>>> return {
>>> getVal: function() {
>> ^^^^^^^^^^^^^^^^^^
>> Could you please give me pointer to where this syntax is
>> discussed? I tried the standard, but what I found -- sections 12.1
>> Block and 12.12 Labelled Statements -- is remarkably opaque. Do I
>> even have the correct section(s)?
>
> No, this has nothing to do with labels. The return value in this case is

a reference to

> an object, written in the form of an object literal. [further explanation]

ACK.

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300...@news.demon.co.uk>