Scope and Lexical Scope in JavaScript

Understanding scope and lexical scope is fundamental to writing efficient and error-free JavaScript code. These concepts dictate how variables are accessed and where they are available in your code.

1. Scope in JavaScript

Scope refers to the current context of execution, which determines the visibility and accessibility of variables. JavaScript has three types of scope:

A. Block Scope

• Variables declared with let and const are block-scoped, meaning they are accessible only within the block where they are defined.
• Introduced in ES6.

Example:

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B. Function Scope

• Variables declared with var are function-scoped. They are accessible within the entire function in which they are declared.
• Does not respect block boundaries.

Example:

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C. Global Scope

• Variables declared outside any function or block are in the global scope and accessible anywhere in the program.

Example:

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

2. Lexical Scope

Lexical scope means that the scope of a variable is determined by its position in the source code. Functions are executed using the scope chain that was in place when they were defined, not when they are invoked.

A. Scope Chain

The scope chain is a hierarchy of scopes that JavaScript uses to resolve variable references. If a variable is not found in the current scope, it looks in the outer scope, continuing until it reaches the global scope.

Example:

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

B. Nested Functions

Inner functions have access to variables in their outer functions due to lexical scope.

Example:

function outerFunction() {
  let outerVariable = "Outer";

  function innerFunction() {
    let innerVariable = "Inner";
    console.log(outerVariable); // Outer
    console.log(innerVariable); // Inner
  }

  innerFunction();
}
outerFunction();

3. Practical Examples

A. Accessing Outer Scope Variables

function createMultiplier(multiplier) {
  return function (value) {
    return value * multiplier; // Accesses 'multiplier' from outer scope
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

B. Lexical Scope in Closures

Closures rely on lexical scope to remember variables from their outer environment.

Example:

function outerFunction() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const counter = outerFunction();
counter(); // Output: 1
counter(); // Output: 2

4. Common Mistakes with Scope

A. Forgetting let and const

Variables declared without let, const, or var become global variables.

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B. Block Scope with var

Using var inside a block leads to unexpected results.

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C. Shadowing

A variable declared in a nested scope can shadow (override) a variable in the outer scope.

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

5. Difference Between Scope and Lexical Scope

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

The above is the detailed content of Mastering Scope and Lexical Scope in JavaScript. For more information, please follow other related articles on the PHP Chinese website!