
What's a Closure? - gulbrandr
http://nathansjslessons.appspot.com/lesson?id=1000
======
hendi_
I found that structure of teaching awesome!

If you already know some JavaScript you can skip the beginning and start right
away at 8, "Nested Functions". Otherwise if you know any other programming
language just start with the lessons and reach the lessons and learn about
closures in less than 10 minutes, and -- maybe even more important -- learn
many of JavaScript's basic on the way.

I really hope the author of this does many more lessons. I found this to be a
really great way to introduce some of JavaScript's somewhat awkward features,
like local variables and function scope.

Compared to Eloquent Javascript that also features try-as-you-read exercises I
found this site to be more condensed. Decide for your own whether this is an
advantage or a disadvantage. I'd suggest taking the best of both worlds, use
this to get the basics and see if you get a hang on JS, and if yes continue
with the examples from Eloquent Javascript.

~~~
edtechdev
See also <http://ejohn.org/apps/learn/> and <http://code.pageforest.com/> and
<http://www.stanford.edu/class/cs101/>

And similar ideas for teaching java interactively in the browser:
<http://ijava.cs.umass.edu/> <http://math.hws.edu/javanotes/>

The idea itself is old, search for 'active essays' for example, and most
recently wolfram alpha's computational document format.

~~~
mckoss
code.pageforest.com is in early alpha now - but we'd be happy to have comments
on the system we're building. The goal is to build a site that can allow
anyone to not only solve JavaScript coding problems, but also to author new
ones.

------
roel_v
Maybe somebody could explain what the difference between a lambda, a closure
and a monad is, and how/if they are different from a function pointer (or
generalization of it like a signal), or from unary or binary function objects.
(my C++ bias in asking this question may be obvious ;) )

I see the first three concepts used interchangeably (as far as I understand),
but maybe that's because they're used slightly different between different
communities?

~~~
ScottBurson
I see several explanations here already, none of which gets at the essence of
the difference between a lambda expression and a closure.

A lambda expression (or juat "lambda" for short) is a _syntactic_ construct:
something you _write_ in your program, like "(lambda (x) (+ x 1))" or
"function (x) { return x + 1; }".

Lambda expressions, like any other evaluable expressions, have _values_. Just
as the expression "2 + 2" has the value 4 which is represented in the machine
as binary 100, so a lambda expression has a value, which is a function, and
that value has a representation in the machine.

What is that representation? It turns out that the most general representation
of a functional value is a _closure_ , which is simply a code pointer with
some associated data (or a pointer thereto). A function pointer in C is just a
code pointer; this is an impoverished representation that requires the
programmer, in order to write general higher-order functions (functions that
take functions as arguments), to explicitly pass around a data pointer along
with each function pointer, and pass the data pointer when calling through the
function pointer:

    
    
      void foo(int (*f)(void* data, int x), void* data) {
        ... (*f)(data, n) ...
      }
    

You've surely seen this idiom if you've worked with function pointers much. A
closure, again, packages up the two pieces together so you don't have to deal
with them separately.

You can see the similarity between instances and closures. An instance has a
vtable (in C++ parlance), which is an indexed collection of code pointers,
along with its data. A closure, instead of having a vtable, has a single code
pointer. Instances and closures are _duals_ : an instance provides a
collection of operations, while a closure provides only one. Other than that,
they're identical.

So, to summarize: a lambda expression, like a `new' expression, is a syntactic
construct you find in your code. Lambda expressions evaluate to closures just
as `new' expressions evaluate to instances; closures and instances are
implementation constructs, like binary integers, inside the machine.

Finally, note that the only difference between a function defined in the
traditional way and one defined by a lambda expression is that the latter has
no name. It's fine to call these "anonymous function expressions" if your
language doesn't use the word "lambda".

~~~
fanf2
There are two kinds of lambda expressions: combinators, which only combine
their arguments and make no reference to any other variables; and open
functions, which refer to variables that are not bound by the lambda
expression.

A closure is an open function paired with an environment that maps the unbound
variables to values. The pairing is called a closed function, or the closure
of an open function.

------
mwexler
This was a clever use of unit tests to help you "pass" each lesson. I've read
a bunch of tutorials on closures, but this one really helped me "get" it.
Sure, it takes liberties and glosses over things... but seeing it grow right
before my eyes was really helpful.

~~~
helentoomik
Agreed! It would have been even more helpful if the unit tests showed both the
expected result and the actual result. Now I had to guess at what the problem
might be (which led to me giving up on the last problem).

~~~
Egregore
I had the same problem, and these JavaScripts even don't allow for alert, to
see the variable value.

------
ynniv
Wow, I love the flow!

Except JSLint. JSLint barfs all over otherwise valid JavaScript and provides
really unhelpful error messages. For a minute, I thought that I forgot how to
write valid JavaScript.... Hate! Hate! Hate! You're teaching folks to program,
not write syntactically pure JS.

But drop that and the experience is great.

~~~
nwhitehead
(Creator here) Ha, yeah JSLint really provokes strong emotions.

Before I added in JSLint, if you misplaced one semicolon or forgot a
parentheses, none of the tests would run and it would just say "program
failed". That was incredibly frustrating to me. I figured that if I was
getting frustrated, and I was the creator of the tests, then random users
would be REALLY frustrated. So I added in JSLint. Now you get line and column
numbers for exactly where the syntax broke down.

I'm actually happy following all of JSLint's suggestions. But my first test
user, my wife, had other thoughts. She filled out her first answer, saw the
whitespace errors, and said "hells no". So I turned off the whitespace
checking. She seemed OK with it after that.

Which checks in particular are annoying? I can change the default parameters
of JSLint to be less strict about some things. But I don't want to give up
syntax checking entirely.

~~~
cjp
_SPOILERS_

I created a successful bothC function that looks more like the simplified
version of seqC, calling fC first. But when I switch to calling gC first, I
get the following failures. Am I missing something, or is this a bug in the
unit test?

    
    
      PASSED No JSLint errors
      PASSED bothC(S, S, A, B) === undefined
      PASSED output === "SSA"
      PASSED bothC(S, F, A, B) === undefined
      FAILED output === "SSASFB"
      PASSED bothC(F, S, A, B) === undefined
      FAILED output === "SSASFBFSB"
      PASSED bothC(F, F, A, B) === undefined
      FAILED output === "SSASFBFSBFFB"

~~~
jlyke
I'm not sure that we used the same method to get to this part, but I too ran
into this output.

Interested in seeing how my solution was off, and if I was thinking about it
the wrong way. Any luck?

~~~
mokkos
Continuation Passing SPOILERS:

f_success = function() { gC(success, failure); }; f_failure = function() {
gC(failure, failure); }; fC(f_success, f_failure);

For me, the trick here was to forget about the words "success" and "failure"
because they have too much semantics embedded. I had to re-word the problem
like this: call f3, if first argument of f1 and f2 are called. All other roads
lead to f4. Both f1 and f2 has to be called in the chain no matter what.

Also, this is the first time I've seen such a pattern. Is there a practical
application of such pattern? I think it's ok to have a single level of closure
to continue execution, but if it goes to that many levels like the sample
problem, it'll be a nightmare to maintain for people who have not seen your
code yet.

------
schlichtm
Please make more lessons (html, css, javascript, node, php...). I would pay.

------
veyron
It would be awesome if the web version of LPTHW had an interactive tool just
like this.

~~~
seminal
Agreed. Once I converted all the exercises to coffeescript (syntactically
similar to python) they made more sense.

------
Troll_Whisperer
This was a great tutorial. There's a long discussion on reddit:
[http://www.reddit.com/r/programming/comments/iviw3/whats_a_c...](http://www.reddit.com/r/programming/comments/iviw3/whats_a_closure_javascript_interactive_tutorial/)

------
127
I have no idea what I'm supposed to do in problem 12. Everything else was
fairly obvious. I just can't comprehend what's going on in number 12.

------
lostmypw
I'm late to the party again.

To understand the importance of closures it might be interesting to look at
this poster[1]. Look at the node in the top left that says "Functional
programming". Every paradigm that descends from that node depends on closures.
THAT's how important they are.

[1] <http://www.info.ucl.ac.be/~pvr/paradigms.html>

------
MikeTaylor
Or there is this -- [http://reprog.wordpress.com/2010/02/27/closures-finally-
expl...](http://reprog.wordpress.com/2010/02/27/closures-finally-explained/)
\-- which takes a much more informal approach. (Disclaimer: I wrote it myself,
so it reflects my own rather practical moment of enlightenment rather than
rigorous computer science.)

~~~
billybob
Nice. I also took a crack at explaining them - here's my version, in case it
helps anyone.

[http://sleeplessgeek.blogspot.com/2009/12/so-what-are-
these-...](http://sleeplessgeek.blogspot.com/2009/12/so-what-are-these-
closure-thingys.html)

------
nkassis
Sorry if this is a stupid question but when you use continuations-passing
style, what happens to the stack in javascript? Does it clean it self up or
does the language just keeps going functions all the way down and fills up?

~~~
sausagefeet
If you're doing CPS in a language with tail-call optimization then the same
stack frame will be used for all your function calls. I don't know if V8 does
this. In something like Node you don't do full CPS, you have portions of your
code in CPS but usually only a few layers deep as you need to give control
back to the event loop at some point.

~~~
ricardobeat
I don't think JS has tail-call optimization. At some point you'll likely hit
an error similar to _too much recursion_ , but it would require a scope chain
in the thousands.

------
f7u12
Thanks for sharing. Running through this tied up some loose ends for me.

------
chewbranca
Focused on javascript, but this is a great introduction to closures:
<http://jibbering.com/faq/notes/closures/>

------
DNeb
My C++ brain must be getting too old -- head is swimming :( From all the talk,
these must be very useful, but I don't understand why? Why not just use an
object?

~~~
rufus_t
Many a brain have pondered the same question since the beginning of time. For
instance, you can meditate over the following koan:

\-----

The venerable master Qc Na was walking with his student, Anton. Hoping to
prompt the master into a discussion, Anton said "Master, I have heard that
objects are a very good thing - is this true?" Qc Na looked pityingly at his
student and replied, "Foolish pupil - objects are merely a poor man's
closures."

Chastised, Anton took his leave from his master and returned to his cell,
intent on studying closures. He carefully read the entire "Lambda: The
Ultimate..." series of papers and its cousins, and implemented a small Scheme
interpreter with a closure-based object system. He learned much, and looked
forward to informing his master of his progress.

On his next walk with Qc Na, Anton attempted to impress his master by saying
"Master, I have diligently studied the matter, and now understand that objects
are truly a poor man's closures." Qc Na responded by hitting Anton with his
stick, saying "When will you learn? Closures are a poor man's object." At that
moment, Anton became enlightened.

\-----

Anton van Straaten in [http://people.csail.mit.edu/gregs/ll1-discuss-archive-
html/m...](http://people.csail.mit.edu/gregs/ll1-discuss-archive-
html/msg03277.html)

------
shard
Anyone else try to do a lazy AND evaluation for chapter 12 and have it fail? I
did

fC(gC(function(){success,failure};),failure);

but the desired answer checked gC even if fC already failed..

~~~
cjp
My first attempt was about the same, until I realized I missed a requirement:

> Your function bothC should call both fC and gC no matter what

What happens in your code if fC fails?

~~~
shard
Ah good point, forgot about that requirement.

------
re_todd
A closure is a function that can access variables that don't have to be passed
in as parameters.

------
jordinl
is it me or this is confusing?

"Define a function named generate that takes one argument, a function f. It
should return an array that consists of the function f and another function
that doubles its input."

~~~
jonsen
Define a function

    
    
      var ... = function( ... ){ ... };
    

named generate

    
    
      var generate = function( ... ){ ... };
    

that takes one argument, a function f

    
    
      var generate = function( f ){ ... };
    

It should return an array

    
    
      var generate = function( f ){ return [ ... ]; };
    

that consists of the function f

    
    
      var generate = function( f ){ return [ f, ... ]; };
    

and another function

    
    
      var generate = function( f ){ return [ f, function( ... ){ ... } ]; };
    

that doubles its input

    
    
      var generate = function( f ){ return [ f, function( x ){ return 2*x; } ]; };

~~~
pankajdoharey
Your Answer is superb but can you tell me what is wrong with this

var generate = function (f) {

    
    
       var double = function (x){return x * 2;};
        
       var list = [f,double];
        return list;

};

On the other hand this one passes the JSLInt test given here at :
<http://nathansjslessons.appspot.com/lesson?id=1050>

var generate = function (f) {

    
    
        function double(x){return x * 2;}
        
        var list = [f,double];
         return list;
        

};

~~~
jonsen
I'm sorry I can't. I'm not into the details of Javascript (yet) and know
nothing about JSLint.

------
dreamdu5t
The closure articles are a perfect reason for merging threads on HN. One of
these appears weekly!

------
ck2
I found that structure of teaching awkward.

If someone already knows some basic javascript, you could show them a basic,
familiar function but then show them how it can become a closure. Then make
them realize that everything can be treated essentially as an object in
javascript, nearly everything, but especially functions.

I didn't know the formal names of "Stateful Closures" or "Continuation
Passing" but I knew that I can make a copy of a function as another object so
it retains different values than another copy and that I can pass a function
as a return value.

They should also cover self-executing closures and using timers in closures
via setTimeout(function(){ - I don't think those concepts are too advanced.

~~~
angdis
The pedagogical structure he is using is known as "programmed instruction." It
was popular in the 60's through the 80's for many kinds of technical
instruction. One of the interesting characteristics about it is that its
progression always seems very easy (often too easy) because it takes small
steps and uses repetition. This ensures that the learner is ready for the
subsequent step.

It is highly effective if you want the learner to understand a specific set of
details quickly. I like it in this context.

