Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

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 Once More with Feeling

Once More with Feeling

Tim Kadlec

Thumbnail for CSS Grid Layout

CSS Grid Layout

Rachel Andrew

Thumbnail for Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Stephanie Rewis

Thumbnail for The Power and Responsibility of Unicode Adoption

The Power and Responsibility of Unicode Adoption

Katie McLaughlin

Thumbnail for Does Your Web App Speak Schadenfreude?

Does Your Web App Speak Schadenfreude?

Greg Rewis

Thumbnail for CSS: Code Smell Sanitation

CSS: Code Smell Sanitation

Fiona Chan

Thumbnail for Zen of JavaScript

Zen of JavaScript

Dmitry Baranovskiy

Thumbnail for Progressing Your Web Apps With Service Worker

Progressing Your Web Apps With Service Worker

Marcos Caceres

More presentations from Code 2015

    Thumbnail for The State of the Animation

    The State of the Animation

    Rachel Nabors

    Thumbnail for What Comes Next for the Web Platform?

    What Comes Next for the Web Platform?

    Alex Russell

    Thumbnail for Async and Await

    Async and Await

    James Hunter

    Thumbnail for Async Frontiers in JavaScript

    Async Frontiers in JavaScript

    Domenic Denicola

    Thumbnail for Classing up ES6

    Classing up ES6

    Andy Sharman

    Thumbnail for Canvas Cold War

    Canvas Cold War

    Simon Swain

    Thumbnail for Current Best Practice in Front End Ops

    Current Best Practice in Front End Ops

    Alex Sexton

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

    Stop the Fanaticism – Using the Right Tools for the Job

    Kassandra Perch

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

© Conffab 2025