Javascript uses scope chains to determine the scope of a given function. There is usually a global scope and each defined function has its own nested scope. Any function defined within another function has a local scope linked to the outer function. It is always the location in the source code where the scope is defined.

An element in a scope chain is basically a map with a pointer to its parent scope.

When parsing variables, JavaScript starts from the innermost scope and searches outward.

TLDR

JavaScript has lexical (also called static) scope and closures. This means you can determine the scope of an identifier by looking at the source code.

The four scopes are as follows:

1. Global - Visible to all content
2. Function - Visible inside a function (and inside its subfunctions and blocks)
3. Block - Visible inside a block (and inside its subblocks)
4. Module - visible inside the module

Except for the special cases of global and module scope, variables use var (function scope), let (block scope) and const ( block scope) declaration. In strict mode, most other forms of identifier declarations have block scope.

Overview

Scope is the area in the code base where the identifier is valid.

The lexical environment is a mapping between identifier names and the values ​​associated with them.

A scope is formed by a linked nesting of lexical environments, with each nesting level corresponding to the lexical environment of an ancestor execution context.

These linked lexical environments form a scope "chain". Identifier resolution is the process of searching along this chain for a matching identifier.

Identifier parsing will only be done outward. This way, the outer lexical environment cannot "see" the inner lexical environment.

When deciding the scope of an identifier in JavaScript, there are three relevant factors:

1. Declaration method of identifier
2. Declaration location of identifier
3. Whether it is in strict mode or non-strict mode

Declaration methods of some identifiers:

1. var, let and const
2. Function parameters
3. catch block parameters
4. Function declaration
5. Named function expression
6. Implicitly defined properties on global objects (i.e. var is omitted in non-strict mode)
7. importStatement
8. eval

Declaration location of some identifiers:

1. Global context
2. Function body
3. Normal block
4. The top of the control structure (e.g., loop, if, while, etc.)
5. Control structure
6. Module

Declaration style

var

Identifiers declared using var have function scope unless they are declared directly in the global context, in which case they are added as properties of the global object and have global scope area. There are separate rules for their use in the eval function.

let and const

Identifiers declared using let and const have block scope unless they are declared directly in the global context, in which case they have global scope .

Note: let, const and var are all promoted . This means that their logical place of definition is at the top of their enclosing scope (block or function). However, variables declared using let and const cannot be read or assigned until the flow of control passes through the declaration point in the source code. This temporary period is called the temporary dead zone.

function f() {
    function g() {
        console.log(x)
    }
    let x = 1
    g()
}
f() // 1 because x is hoisted even though declared with `let`!