What is Scope and Scope Chain in JavaScript?

In JavaScript, scope refers to the visibility and accessibility of variables in different parts of your code. Every function has its own scope, which is the set of variables that are available for use within that function. In addition, JavaScript has a global scope, which is the set of variables that are available everywhere in your code.

The scope chain is the hierarchy of scopes that are used to determine the visibility and accessibility of variables in your code. When you reference a variable, the JavaScript interpreter will search for that variable in the current scope. If it is not found, the interpreter will look for the variable in the next outer scope, and so on, until it reaches the global scope.

For example, consider the following code:

// Define a global variable
const x = 10;

function foo() {
  // Define a local variable with the same name
  const x = 5;

  function bar() {
    // Reference the local variable
    console.log(x);
  }

  // Call the inner function
  bar();
}

// Call the outer function
foo();

In this code, the foo function defines a local variable named x with a value of 5. The bar function, which is defined inside the foo function, references the x variable. When the bar function is called, the JavaScript interpreter will first look for the x variable in the bar function’s scope. Since it is not found, the interpreter will look for the x variable in the foo function’s scope, where it is defined with a value of 5. This is the value that will be logged to the console when the bar function is called.

In this example, the scope chain is as follows:

  1. bar function’s scope
  2. foo function’s scope
  3. Global scope

The JavaScript interpreter will search for the x variable in each of these scopes, starting from the innermost scope (the bar function’s scope) and moving outward until it is found.

I hope this helps! Let me know if you have any questions.