Scope: what a function can see

Welcome back

In JavaScript for Beginners you wrote functions, loops, arrays, and objects. This course is about how JavaScript actually works underneath, the material interviews are made of. Scope is the right place to start because half the bugs you will debug at work come down to which variable a line of code is actually touching, and closures (next lesson) — the mechanism behind every event handler, debounce, and React hook — are nothing but these scope rules applied carefully.

First term: scope, the set of variables a piece of code can see. JavaScript uses lexical scope: what a function can see is decided by where it is written in the source code, not where it is called from.

A function written inside another function can read the outer function's variables:

function outer() {
  const secret = "level 1";
  function inner() {
    console.log(secret); // inner can see outer's variables
  }
  inner();
}

The scope chain

When JavaScript needs a variable, it looks in the current function first. Not there? It steps outward to the enclosing function, then outward again, all the way to global scope. This path is the scope chain.

Two rules to memorize:

• Lookup only goes outward, never inward. outer cannot read variables declared inside inner.
• If two scopes declare the same name, the closest one wins (this is called shadowing).