r/javaScriptStudyGroup • u/ForScale • Feb 29 '16

[Week 7] Focus: Closures

So here we are at Week 7. I wanted to say a big THANK YOU!!! to all who participated in Week 6 (which can still be found over in the sidebar). Week 7's focus will be closures.

Background info on closures:

http://www.w3schools.com/js/js_function_closures.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

It will work like this:

  • Monday: Announce focus (eg, closures)

  • Build throughout the week... Two rules: 1) must use javascript 2) must use at least 1 example of a JavaScript closure.

  • Friday: Post demos/projects in this thread (can begin reviewing immediately); first line of an entry should be ENTRY and it should be a top level comment (ie, don't put your entry in a reply)

  • Sat and Sun: Review projects/figure out focus for next week

GENERAL GUIDELINES FOR FEEDBACK:

  • Be nice!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

  • If you don't want feedback, if it makes you uncomfortable or you're just not interested, simply say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything.

But that's about it... Have fun! :) Feel free to ask questions and discuss throughout the week!

4 Upvotes

100% Upvoted

45 comments sorted by

4

u/ForScale Mar 04 '16

ENTRY

http://codepen.io/anon/pen/qZOrBJ?editors=0012

I think that's a closure. I'm not entirely sure how it's anything unique. And I'm still not quite sure the utility of them. But there it is!

3

u/Cust0dian Mar 05 '16

Yep, that's a closure!

As to why they are useful: closures are a way to encapsulate data in languages where you can pass functions around like any other data.

In your example, there's no way to change or even look at the uptown string without going through the exposed funcYouUp function. /u/Volv wrote a great example that emphasizes this even more, although as a personal preference I'd get rid of objects to really drive the point home.

I think the most commonly-used example of closures in JS is a module pattern. Take for example this code: if I didn't expose orderToHtml function for tests purposes it would be impossible to call it directly, only indirectly via printToDom function that could do something more than just blindly call orderToHtml — it could add some default properties to order object before the call, it could ensure that orderToHtml will be called just one time per module lifetime, it could alter the return value somehow, etc.

The bottom line is: closures provide encapsulation and why we need encapsulation at all in software development is a much bigger topic. :)

1

u/ForScale Mar 05 '16

Awesome! Thanks so much for taking a look and explaining further!

So... is this an example of closure: http://codepen.io/anon/pen/zqvMJz?editors=0010 ?

1

u/Cust0dian Mar 05 '16

Nope, that's not a closure, because closure requires a function.

A "close enough" definition of a closure would be:

Closure is a combination of:

  1. a function itself, and

  2. a list of things that function "saw" when it was created (a.k.a. its environment)

Usually when people say "closure" they mean that second part, but it still implies a presence of a function. Makes sense?

1

u/ForScale Mar 05 '16

Hmm... You mean a function within a function? That example I put there does have a function...

a list of things that function "saw" when it was created (a.k.a. its environment)

Yes... that's making more and more sense to me. I've been listening to a YouTube clip of "Understanding the Weird Parts" and it's been talking about hoisting, scope, and execution context. I feel like the concepts are related.

But, at it's base, a closure has to have a function within a function. And that function in the function serves as a way to access the environment of the outside function? Is that correct to say?

1

u/Cust0dian Mar 05 '16

Yes, it's a function that is returned from another function (and in written code you'll see it as a function inside another function).

 

I guess my "close enough" definition isn't really helpful, so let's just get a real one:

Closure is a combination of a function and a list of free variables inside that function (more precisely, to what free variables point to).

A free variable is a variable that was not declared inside a function (via var or as a parameter to said function), so for example in this code:

function plus(a, b) {
  var sum = a + b;

  totalOfSums += sum;
  console.log('The total of all sums you have calculated is: ' + totalOfSums);

  return sum;
}

there's no declaration for totalOfSums — it's a free variable (as opposed to a, b and sum, which are bound variables).

In other words, if we were a JS engine and encountered just that function, we'd know for sure that a, b and sum will point to something, while totalOfSums is a complete mystery to us.

 

Normally, free variables are resolved by using scope:

function sums() {
  var totalOfSums = 0;

  function plus(a, b) {
    var sum = a + b;

    totalOfSums += sum;
    console.log('The total of all sums you have calculated is: ' + totalOfSums);

    return sum;
  }
}

so in this case engine will know to use a totalOfSums from the sums function inside the plus function.

 

However, when a function is returned from another function:

function sums() {
  var totalOfSums = 0;

  return function(a, b) {
    var sum = a + b;

    totalOfSums += sum;
    console.log('The total of all sums you have calculated is: ' + totalOfSums);

    return sum;
  };
}

var plus = sums();

and engine evaluates it, it becomes something like this:

var plus = function(a, b) {
  var sum = a + b;

  totalOfSums += sum;
  console.log('The total of all sums you have calculated is: ' + totalOfSums);

  return sum;
};

i.e. that returned function is "ripped" out of original scope and we can't resolve totalOfSums. To fix it, when returning a function from another function we attach a list of free variables and what they point to. And that's what we call a closure.

Does this make more sense?

1

u/ForScale Mar 05 '16

Hmm... yeah, I think it does. I certainly have a better understand now than before looking through the examples here and discussing.

Thanks again helping me get a better understanding!

1

u/Volv Mar 05 '16

Awesome. Thanks for your further explanations. :)
 

Oddly that version with this.count was never meant for anyone to see lol. Experimentation that I thought I had kicked out... I was looking at the one you posted struggling to find the difference between it and mine lol.
 
I'm finding there is so much to read about the benefits of encapsulation and the idea that private variables = reduced coupling = awesome. At least I reckon that's the idea :)

4

u/anonymousswede Feb 29 '16

ENTRY

https://jsfiddle.net/g4u0qkxp/

Put something together real quick. I like to use the namespace pattern when working with JavaScript, creates more readability and encapsulation.

2

u/ForScale Feb 29 '16

Whoa... That was quick! :)

I'll take a look later in the week! Thanks!!

1

u/ForScale Mar 04 '16

Okay, taking another look!

Gonna be upfront here, I still don't quite understand closures... what makes em special and what they're used for. If you wouldn't mind kind of explaining what's going on with yours, that'd be awesome!

My naive understanding:

Declare a variable that's assigned a value of either itself or an empty object. There's an IIFE; almost looks like it's recursive. Set up some local scope functions, with their own local variables. By not using var in front of obj there... that declares a global variable? that's assigned an object that has the previously declared functions as it's key:value pairs. The x.Math = obj kind of confuses me...

Hmm... that's about what I've got; lol! I'd love to hear some explanation, if you're willing.

Feel free to check out my really simply entry as well! Feel free to explain and give me some pointers!

1

u/ForScale Mar 06 '16

Hey, what are your ideas on a focus for next week?

1

u/tylerr82 Mar 01 '16

Nice work. I feel like an idiot, I sat there and hit refresh waiting for something to happen. Probably should look at the code first next time.

3

u/anonymousswede Feb 29 '16

I like the fact that you put some "tutorial" and docs about the subject to get started with.

2

u/ForScale Feb 29 '16

Great! Yeah, I thought it would help to keep all of us on the same page with respect to the focus. And to be frank, I'm not very experienced with closures, so I'll definitely be looking through those links!

Also keep in mind, your entry can be as simple or complex as you like. It can be anything/everything... as long as it uses javascript and at least 1 example of a closure. Feel free to get creative with it!.. or not. Whatever you choose!

3

u/Volv Mar 04 '16

ENTRY

Codepen
 
Tried to give another use case example over my other closure stuff from a few weeks back

2

u/ForScale Mar 04 '16

Volv! Your consistency is appreciated, my friend.

Nice one! I think... maybe... I'm seeing some of the magic there. Assigning three different variables the same function return. Because scope is maintained the calls don't mess with each other...

Is that kind of what's going on there?

2

u/Volv Mar 04 '16

Pretty much.
Each function is an object, a different function object is created and returned each time and each object has its own scope.
 
Worth remembering that closures happen everywhere in JS. Every function you create is a closure over the global or window object as that function retains access to these 'global' variables and the space outside your function can't access it's internals without help.
I recommend having a look at the You don't know JS series if you haven't already. A lot of good stuff there.

2

u/ForScale Mar 04 '16

Nice!

Every function you create is a closure over the global or window object as that function retains access to these 'global' variables and the space outside your function can't access it's internals without help.

Yes!! I think that's why I think the hype around closures is somewhat elusive too me. Like, I think I take for granted the fact that variables declared in global scope can be accessed within functions, but not vice versa. It's one of the early things I learned when venturing in to js. So when I look at simple closure examples, I'm like "Well... yeah." I don't know.

I recommend having a look at the You don't know JS series if you haven't already. A lot of good stuff there.

Nice! You're the second person that's recommended that to me recently. I've never looked in to it. I'm currently listening through a 3 hour youtube video on "the Weird Parts." It's been pretty fascinating so far talking about hoisting and scope.

1

u/Volv Mar 05 '16 edited Mar 05 '16

Will probably have a look at that - trying to learn more of the in depth sort of stuff.
The ah-ha moment when closures, hoisting, scope, this etc click is the best :)
A few months ago I spent ages trying to make closures click - same as you... right I kinda get it but WHY?... Which is what inspired my other example :)
 
Edit - More complex example, trying out some of the other new ideas I've been reading about Codepen

2

u/ForScale Mar 05 '16

The ah-ha moment when closures, hoisting, scope, this etc click is the best :)

Nice! I still feel a little hazy on the closures... I'm having trouble seeing it as something separate from just general scope. I think I have a pretty good understanding of this... as far as it being a special variable created within each scope... I like using it in event handlers...

Looking at your other example here... What's this? let inc = () => ++count;

I understand let as new ES6 declaration... is () just like saying function()? and then the fat arrow I'm somewhat familiar with at this point... Is it just Babel doing it's thing?

2

u/Volv Mar 05 '16 edited Mar 05 '16

Yes exactly like saying function. (except how this is handled) inc is a function that returns the value of ++count
I tend to write mostly ES5 style and then refactor with the new ES6 stuff when I'm done. I like the 'code golf' style challenge and I figure this way I get familiar with both.

1

u/ForScale Mar 06 '16

Hey, what are your ideas on a focus for next week?

2

u/Volv Mar 06 '16 edited Mar 06 '16

  • Prototypical inheritance and object composition.

  • Pattern example? Observer?

  • Implement some structure / algorithm. Tree, sort, search etc.

  • Polyfill some es5/6 features. No cheating. Implement Array.map or String.split or Array.forEach or similar

2

u/tylerr82 Mar 05 '16

Entry

http://codepen.io/niners52/pen/oxjWaZ

About as basic as a closure could be.

1

u/ForScale Mar 05 '16

Nice! Looks like you nailed it! And basic is good, helps with understanding.

How are you feeling about the concept in general? It's still kind of hazy to me...

2

u/tylerr82 Mar 06 '16

Still very hazy to me. I worked on something all week and just couldn't get it to work so I just did something as simple as possible as my entry once I was good and irritated.

1

u/ForScale Mar 06 '16

Ha! I definitely take that approach sometimes. I think your entry was good and got to the heart of the matter; demonstrated it simply, which is good!

1

u/ForScale Mar 06 '16

Hey, what are your ideas on a focus for next week?

2

u/tylerr82 Mar 06 '16

Anything practical. What on this reddit page is done in Javascript, and try to build something like that.

1

u/ForScale Mar 06 '16

Okay, cool. Thanks!

0

u/[deleted] Mar 02 '16

[deleted]

3

u/ForScale Mar 02 '16

Awesome! Thanks!!

I typically don't start giving feedback till later in the week (assuming you're wanting some). Feel free to check out other entries though!

I'll check back later in the week...

1

u/ForScale Mar 04 '16

Okay, looking at it some more now! I like it! Full disclosure though, I'm still having some trouble wrapping my head around the idea of closures (what makes them special and what their utility is).

Care to give kind of a high level/ELI12 of what's going on with it?

Oh! And I submitted one following the pattern I saw on MDN. Feel free to take a look!

0

u/[deleted] Mar 04 '16

[deleted]

1

u/ForScale Mar 04 '16

Yeah, in reading about them, that seemed to be what they were focusing on the importance of them being.

1

u/ForScale Mar 06 '16

Hey, what are your ideas on a focus for next week?

0

u/[deleted] Mar 06 '16

[deleted]

1

u/ForScale Mar 06 '16

Nice! Thanks!!