Fundamentals of JavaScript Closures - 20

Download this episode

Download Video

Description

Closures are a slightly advanced topic, but are at the core simply a means by which you can marry a function along with its environment variables and input parameters. This video demonstrates the basics of closures as a first step toward mastering this important structure in JavaScript.

Tag:

JavaScript

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      marilda

      sem comentario

    • User profile image
      Jags

      Thanks for putting that great concept into easy words. But I guess the real power lies in knowing how/where to use this.

    • User profile image
      Stegee

      Really like this Tutorials.When is Windows Mobile Development Tutorials Coming out?

    • User profile image
      BobTabor
    • User profile image
      skube

      I've read countless blogs and pages trying to understand JS closures, but somehow your screencast and the way you talked through it finally gave me that aha! moment. Thank you so much. I think I can now describe a closure on my own.

      As you say however, knowing when to use it is another matter. ;)

    • User profile image
      antonio

      Hey Bob,
      The series is fantastic! Just found these in the app store and
      I really appreciate the easy going and fresh approach to the videos!!!
      Question. I think I am getting the concept of closures and began experimenting in the browser.
      From what I understand, it's a way of porting functions and all it's related values to another variable/context? The global space???
      Anyway, I have input this in the chrome dev tools:

      function f(){
      var b = "b";
      return function(){
      return b;
      }
      }

      var n = f();
      n();
      "b" // <-- got this
      I figure this means I have attached this function to the global scope and saved all the info for that function into a new context?

      But when I ran just f(); I got this...
      function (){
      return b;
      }
      I have no idea what that means!!!

      Anyway, thanks again for a terrific tool for learning javaScript!

    • User profile image
      antonio

      Hey Bob,
      The series is fantastic! Just found these in the app store and
      I really appreciate the easy going and fresh approach to the videos!!!
      Question. I think I am getting the concept of closures and began experimenting in the browser.
      From what I understand, it's a way of porting functions and all it's related values to another variable/context? The global space???
      Anyway, I have input this in the chrome dev tools:

      function f(){
      var b = "b";
      return function(){
      return b;
      }
      }

      var n = f();
      n();
      "b" // <-- got this
      I figure this means I have attached this function to the global scope and saved all the info for that function into a new context?

      But when I ran just f(); I got this...
      function (){
      return b;
      }
      I have no idea what that means!!!

      Anyway, thanks again for a terrific tool for learning javaScript!

    • User profile image
      BobTabor

      @skube: Awesome feedback, thanks!

      @antonio: App store?  Channel9's or ... ?  

      As far as your question goes ... would you do me a favor and create a jsFiddle example?  I'm having a hard time parsing through this in the comments.  It would be easier to see it in jsFiddle and play around with it and try to figure it out there before I comment.  Thanks!!!

    • User profile image
      antonio

      Hey Bob,
      Thanks for responding!!!! I found the series in the mac app store...

      Here is the example...
      http://jsfiddle.net/antonio_ortiz/LUJpF/2/

      Again, very cogent and succinct series for the newb...

    • User profile image
      BobTabor

      @antonio: Try this:

      http://jsfiddle.net/LUJpF/3/

      It's based on your closure example ... I think the key concept is that we create a "factory" along with all variables it needs to produce a given result.  I've created two such results from the same factory ... bob() and steve().  Now, I can run bob() and steve() whenever I need an implementation of that function specific to "Bob" or "Steve".

    • User profile image
      Yumikokk

      Hi Bob,

      The example on jsFIDDLE was so blur...Are there any places I can get the code? Thank you.

    • User profile image
      BobTabor

      @Yumikokk: If you have problems streaming the video, try downloading.  The should be as crystal clear as this text I type.  (I agree ... for some reason, this streaming video is fuzzy).

      http://jsfiddle.net/vnkuZ/

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.