Conffab by Web Directions
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In

Search Conffab

Search presentations, speakers, transcripts, slides and topics.

Searching Conffab

Stop the Hand Waving – Scope Chains & Closures

Jess Telford at Code 2015
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • References
  • Keypoints

Scope Chains, Closures, Hoisting, and Garbage Collection all have one thing in common: They’re often hand-waved away. How do closures actually work? When does Garbage Collection occur? What really IS the Scope Chain?

In this talk, we will discover it’s not black magic after all; No hand waving is required to explain these language features, in fact you’ve been using them all along without realising.

Slides

1. Scope

  • var – lexical scoping
  • let – block scoping
  • const – block scoping

1.5 Hoisting

  • JS does 2 pass parsing.
  • First pass (hoisting) gives scope – variables get ‘hoisted’ up to the top of the function.
  • This is where lots of confusing bugs begin. Google this if you aren’t comfortable with it.

1 Scopes…

  • Scopes can be nested
  • You can access outer scope but not inner scope.
  • You can have multiple inner scopes
  • This does indeed look like a tree of scopes when you look from outer to inner (top down)
  • When you look the other way, inner to outer, you get a chain (bottom up) not a tree

2 Scope chains

  • If you look for a value, JS walks up the scope chain; if nothing has that value you end up in the global scope.

3 Closures

  • Closures occur when an inner scope references a variable in outer scope.
  • This closes over the referenced variable.

4 Garbage Collection

  • GC kicks in when all the code that might need a value has been executed

5 Shadowing

  • This one is a good concept but a lot of people don’t understand it too well
  • When a value is defined more than once in a scope chain, JS reaches the first one and stops; the top-most scope is not closed over.
  • You can avoid a lot of problems here by emulating hoisting and putting all your vars at the top of scope. Use a linter to enforce this!

If you are still not sure:

  • Nodeschool.io
  • npm install -g scope-chains-closures (self paced workshop)

You may also be interested in

Thumbnail for Pop-up Accessibility

Pop-up Accessibility

Rhiana Heath

Code 2015

Thumbnail for What Comes Next for the Web Platform?

What Comes Next for the Web Platform?

Alex Russell

Code 2015

Thumbnail for Console Dot

Console Dot

Warwick Cox

Code 2015

Thumbnail for Back to the Future with Web Components

Back to the Future with Web Components

Jonathon Creenaune

Code 2015

Thumbnail for Crossing The Streams

Crossing The Streams

Simon Knox

Code 2015

Thumbnail for Dawn of the Progressive Single Page App

Dawn of the Progressive Single Page App

Mark Dalgleish

Code 2015

Thumbnail for Eliminate JavaScript Code Smells

Eliminate JavaScript Code Smells

Elijah Manor

Code 2015

Thumbnail for ES6 Symbols, What They Are and How to Use Them

ES6 Symbols, What They Are and How to Use Them

Clark Pan

Code 2015

More presentations from Code 2015

Thumbnail for The State of the Animation

The State of the Animation

Rachel Nabors

Code 2015

Thumbnail for What Comes Next for the Web Platform?

What Comes Next for the Web Platform?

Alex Russell

Code 2015

Thumbnail for Async and Await

Async and Await

James Hunter

Code 2015

Thumbnail for Async Frontiers in JavaScript

Async Frontiers in JavaScript

Domenic Denicola

Code 2015

Thumbnail for Classing up ES6

Classing up ES6

Andy Sharman

Code 2015

Thumbnail for Canvas Cold War

Canvas Cold War

Simon Swain

Code 2015

Thumbnail for Current Best Practice in Front End Ops

Current Best Practice in Front End Ops

Alex Sexton

Code 2015

Thumbnail for Stop the Fanaticism – Using the Right Tools for the Job

Stop the Fanaticism – Using the Right Tools for the Job

Kassandra Perch

Code 2015

© 2026

  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up