Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • 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 a free membership to watch this and hundreds of other videos
  • 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 The New Age of Indie

    The New Age of Indie

    Thumbnail for Being the nice guy with the bad news

    Being the nice guy with the bad news

    Thumbnail for QA with Erin Zimmer

    QA with Erin Zimmer

    Thumbnail for The State of CSS-in-JS

    The State of CSS-in-JS

    Thumbnail for You are a Developer, the Internet is Your Friend

    You are a Developer, the Internet is Your Friend

    Thumbnail for CSS Architecture with Layers, Scope, and Nesting

    CSS Architecture with Layers, Scope, and Nesting

    Thumbnail for A voice for everyone

    A voice for everyone

    Thumbnail for Designing User Experiences with Eye Tracking

    Designing User Experiences with Eye Tracking

More presentations from Code 2015

    Thumbnail for Back to the Future with Web Components

    Back to the Future with Web Components

    Thumbnail for The State of the Animation

    The State of the Animation

    Thumbnail for Dawn of the Progressive Single Page App

    Dawn of the Progressive Single Page App

    Thumbnail for What Comes Next for the Web Platform?

    What Comes Next for the Web Platform?

    Thumbnail for Getting Offline with the Service Worker

    Getting Offline with the Service Worker

    Thumbnail for Eliminate JavaScript Code Smells

    Eliminate JavaScript Code Smells

    Thumbnail for Console Dot

    Console Dot

    Thumbnail for Current Best Practice in Front End Ops

    Current Best Practice in Front End Ops

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

© Conffab 2023