Lexical Scoping

In short: a function's scope — which variables it can see — is fixed by where it is written in the code, permanently, the moment it's defined. It can read any variable from every scope it's nested inside at that point, no matter where it's later called from. This is different from asking "who called this function?" — lexical scoping only ever cares about "where does this function live on the page?"

Reading labels from every room you're nested in

A function nested inside two others can see variables from both:

callOut is written inside announce, which is written alongside shopName. So callOut can read item (its immediate parent's variable) and shopName (the outer scope's) — both walls of the rooms it's nested in are visible from where it's standing.

The scope is set once, at definition, not at every call

Call a function many times, and its scope doesn't change — only the values inside that fixed scope can:

inner was written inside outer, so it can always read and change outer's count — that relationship is locked in by where inner sits in the code, not by anything about how outer() gets invoked.

Called from somewhere else entirely — the scope doesn't move

This is the part that separates lexical scoping from "whoever calls me":

greet was written inside makeGreeter, where greeting is "Hello". Passing greet into runElsewhere and calling it there doesn't change that — runElsewhere's own greeting is a completely different variable in a completely different scope, invisible to greet. The function "remembers" where it was born, not where it currently happens to be running.

Quick practice