Javascript Fundamentals: Development for Absolute Beginners

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

    • marilda

      sem comentario

    • Jags

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

    • Stegee

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

    • BobTabor
    • 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. ;)

    • 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!

    • 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!

    • 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!!!

    • 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...

    • 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".

    • Yumikokk

      Hi Bob,

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

    • 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.