JavaScript Scope

Scope is the context in which our variables are declared. We think about scope in relation to blocks because variables can exist either outside of or within these blocks.

In JavaScript, we say that variables are either in global or local scope. Global variables are variables that are accessible outside of blocks. Local variables are variables that are only accessible within blocks.

Global Scope

Variables and functions declared outside of any function or block of code have global scope. They can be accessed from anywhere in the code, including inside functions and blocks.

For example:

let color = 'blue'; // global scope

function colorUpdate() {
  color = 'red';
  console.log(color); // Output: red
}

colorUpdate();
console.log(color); // Output: red

In the example above:

• We define a variable color at the top of our code, outside of any block.
• Since this variable is not declared inside a function or block, it is in the global scope, and we can access it anywhere in our code.

Local Scope

Variables and functions declared inside a function or block have local scope. They can only be accessed within the function or block where they are declared.

For example:

function colorUpdate() {
  let color = 'purple'; // local scope
  console.log(color); // Output: purple
}

colorUpdate();
console.log(color); // Output: ReferenceError

In the example above:

• We define a variable color inside the colorUpdate function.
• Since this variable is declared inside a function, it is in the local scope, and we can only access it within that function.
• When we try to access the variable outside of the function, a ReferenceError is thrown because it is not defined outside of the function.

Block Scope

Block scope is a type of scope in JavaScript that was introduced in ECMAScript 6 (ES6) with the introduction of the let and const keywords. Variables declared with let and const have block scope, which means they are only accessible within the block of code where they are declared.

As an example:

function myFunction() {
  let x = 10;
  if (true) {
    let y = 20;
    const z = 30;
    console.log(x); // Output: 10
    console.log(y); // Output: 20
    console.log(z); // Output: 30
  }
  console.log(x); // Output: 10
  console.log(y); // Throws a ReferenceError: y is not defined
  console.log(z); // Throws a ReferenceError: z is not defined
}

myFunction();

In this example:

• x is declared with let inside the function, so it has function scope and can be accessed anywhere inside the function.
• y and z, on the other hand, are declared with let and const inside the if statement block, so they have block scope and can only be accessed within that block.
• When we try to access y and z outside of the block, a ReferenceError is thrown because they are not defined in that scope.

Local Scope

Local scope is a type of scope in JavaScript that refers to variables or functions declared inside a function or block of code. These variables or functions are only accessible within the function or block where they are declared, and they are not visible or accessible outside of that scope.

As an example:

function myFunction() {
  let x = 10; // x is declared in the local scope of myFunction
  console.log(x); // Output: 10
}

myFunction();
console.log(x); // Throws a ReferenceError: x is not defined

In this example:

• x is declared inside the myFunction function, so it has local scope and can only be accessed within that function.
• When we try to access x outside of the function, a ReferenceError is thrown because it is not defined in the global scope.

Function Scope

Function scope is a type of scope in JavaScript that refers to variables or functions declared inside a function. These variables or functions are only accessible within the function where they are declared, and they are not visible or accessible outside of that function.

As an example:

function outerFunction() {
  let x = 10; // x is declared in the local scope of outerFunction
  function innerFunction() {
    let y = 20; // y is declared in the local scope of innerFunction
    console.log(x); // Output: 10
    console.log(y); // Output: 20
  }
  innerFunction();
  console.log(x); // Output: 10
  console.log(y); // Throws a ReferenceError: y is not defined
}

outerFunction();

In this example:

• x is declared inside outerFunction, so it has function scope and can only be accessed within that function.
• y is declared inside innerFunction, so it has function scope and can only be accessed within that function.
• When we try to access y outside of the function, a ReferenceError is thrown because it is not defined in the global scope.

Lexical Scope

Lexical scope is a type of scope in JavaScript that refers to where variables and functions are defined at the time of authoring. Lexical scope is sometimes also referred to as static scope.

As an example:

function outerFunction() {
  let x = 10;
  function innerFunction() {
    let y = 20;
    console.log(x); // Output: 10
    console.log(y); // Output: 20
  }
  innerFunction();
  console.log(x); // Output: 10
  console.log(y); // Throws a ReferenceError: y is not defined
}

outerFunction();

In this example:

• x is defined in the global scope, so it has global scope and can be accessed anywhere in the code.
• y is defined in the local scope of innerFunction, so it has local scope and can only be accessed within that function.
• When we try to access y outside of the function, a ReferenceError is thrown because it is not defined in the global scope.