Closures and Scope Chaining - Javascript Fundamentals

Welcome to Javascript Fundamentals (gameshow voice), where I recap my notes about… well, Javascript Fundamentals =)

I’d gone through an amazing Javascript video lesson prior to the bootcamp called Javascript: Understanding the Weird Parts, by Anthony Alicea. Back then it was actually way too in depth, and I knew that I needed to revisit the content again to really understand and appreciate the concepts that he was teaching: Scope, closures, prototypes, ‘this’…

So that brings us to today’s recap: Revisiting Javascript Closures and Scope Chains! Yay!

(Oh, I also came across this video “Javascript Scope Chains and Closures” which is really good – check it out as well. It starts off a bit slow, but the speaker, Adam Breindel, is really clear and concise)

Oh. And this isn’t meant to be a lesson on Closures and Scope Chains. They’re just a regurgitation of my thoughts and notes – so don’t expect eloquent paragraphs of enlightenment…

Javascript Engine Pointers

  • When a function is invoked/executed, the Javascript engine creates a new local scope for that function. - Every function INVOCATION, has a separate scope
  • Local variables are declared with var and are scoped to the function they are declared within
  • There’s a correlation of the lexical environment (where something is), and the scope
  • When a function is invoked/executed*, the Javascript engine looks in the local scope for any referenced properties - If no property is found in the local scope, it will work its way outside *through the scope chain, looking for that property name. It keeps going until the scope chain reaches global scope

Closure in summary: A nested function (function in a function) will keep a reference to the enclosing (outside) function’s scope environment (aka. the variables, and properties defined in that scope during invocation), through the scope chain.

  • Closure: a permanent link between a function and its scope chain
  • Anytime a function is invoked, it runs with a scope chain based on where it was defined
  • The nested function will have access to the variables outside, through it’s reference to the outer environment (scope chain)
  • When a nested function is invoked outside of its original scope chain, the original scope chain resolution will still work - Basically: the nested function still keeps a reference to the outer (chain) scopes, and all related scope properties

Where Closures Generally Come Into Play:

Any type of async callback utilizes the concept of closures – to allow the callback function invocation to utilize variables and scopes that were defined in while the containing scope was run

Explicit Closure Use

  • Javascript encapsulation is only really available through function scopes
  • Create a function and use its private/local scope as the mechanism of encapsulation (the scope contains private locals)
  • To define and expose the interface, we return an object with access to the internal locals (through scope rules)
  • See Module Pattern- Separates the interface from implementation

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!