How to Understand Scope and Scope Chain in JavaScript

Scope defines where a variable is accessible in your code. A variable is in scope if the current execution context can access it. A variable is out of scope if accessing it throws a ReferenceError. JavaScript uses lexical scoping, meaning scope is determined by where the code is physically written in the source file, not by where functions are called from.

Variables declared outside any function or block exist in the global scope. In a browser, they become properties of the window object. In Node.js, they become properties of the global object. Global variables are accessible from anywhere in your program. Minimize global variables because they can be accidentally overwritten from anywhere in the codebase, leading to hard-to-find bugs.

Variables declared inside a function with var, let, or const are scoped to that function. They are created when the function is called and destroyed when the function returns. Code outside the function cannot access these variables. Each function call creates a brand new independent scope, so two calls to the same function have their own separate copies of the function's local variables.

Variables declared with let or const inside a block defined by curly braces are scoped to that block. A block can be an if statement, a for loop, a while loop, or simply a pair of curly braces. The variable does not exist outside the block. Variables declared with var inside a block are not block-scoped and leak out to the nearest enclosing function scope, which is a common source of bugs.

Lexical scope means that a function's scope is determined by where it is defined in the source code, not by where it is called. When a function is written inside another function, the inner function has access to all variables in the outer function's scope. This relationship is established at the time the code is written and does not change based on how or where the function is invoked.

When JavaScript encounters a variable reference, it searches for that variable in the current scope first. If not found, it moves up to the outer scope, then to that scope's outer scope, continuing up the chain until it reaches the global scope. If the variable is not found in the global scope either, a ReferenceError is thrown. This chain of nested scopes is called the scope chain.

Imagine nested functions as concentric boxes. The innermost function is the smallest box. The outer function is a larger box containing it. The global scope is the largest box containing everything. A variable lookup starts in the smallest box and expands outward until the variable is found or the outermost box is exhausted. Variables in inner boxes are invisible to outer boxes but variables in outer boxes are visible to inner boxes.

Variable shadowing occurs when an inner scope declares a variable with the same name as a variable in an outer scope. The inner variable shadows the outer one, making the outer variable temporarily inaccessible within that inner scope. The outer variable is not destroyed or modified. Once the inner scope ends, the outer variable is accessible again. Shadowing is valid JavaScript but can cause confusion and should be used intentionally.