JavaScript Behind The Scenes: Scope & The Scope Chain

Hey fellow developers, so now that we are well verse with The Execution Context and Call Stack, its now time to dive a little deeper into JavaScript and understand what The Scope and Scope Chain is.

What do we mean by 'Scope'?

Scope is an environment in which a variable is accessible. It determines the visibility of a variable. We cannot access a variable outside its scope. JavaScript follows Lexical Scoping , which determines the scope of a variable by how the functions and blocks are placed in our code. Following are the different types of scopes in JavaScript:

1. Global Scope: Variables defined in global scope are defined outside any function or block. These variables can be accessed anywhere throughout the code.

2. Function Scope: Variables which are defined inside a function, have their visibility limited to inside the function. If we try to access them outside the function, we get a ReferenceError.

3. Block Scope: Block Scope was introduced with ES6 and only the variables defined with let and const have their scope limited to the block they are defined in. A block is any section of code between two curly braces {} (like in if, for and switch statements). However, the variables defined with var have their scope limited to the execution context i.e., global scope if the block is defined in global context and function scoped if the block is defined inside a function.

Here is a code snippet to explain the same:

    const myName = 'Pawan Bhatt';
    // Globally Scoped, can be accessed anywhere throughout the code

    function myFunc() {
    const age = 20;
    // Function Scoped, can be accessed inside the function only
    if (age > 18) {
        const teenager = false;
        // Block scoped, cannot be accesses outside the if block
        var student = 'No';
        // Function scoped, can be accessed outside if but not outside myFunc()
    }
    console.log(`${myName} is aged ${age} and is teenager? ${teenager}`);
    // ReferenceError: teenager not defined
    }
    myFunc();
    console.log(student); // ReferenceError: student is not defined

Understanding the Scope Chain:

Scope chain is what helps JavaScript to resolve the value for a variable. Scope Chain enables JavaScript to look for a particular variable or value and inherit it from the parent if it is not found in the current scope. For instance:

function a() {
  const x = 5;

  function b() {
    console.log(x);
    // Value picked up from parent scope
  }
  b();
}
a();

Let us consider the below code example and try to understand Scope Chain in a better way:

const name = 'Pawan';

function first() {
  const marks = 90;

  if (marks > 35) {
    var result = 'Pass';
  }

  function second() {
    const rank = 1;
    console.log(`${name} has marks ${marks} and result is ${result}`);
  }
  second();
}

first();

For the code snippet above, if we try to build the scope chain, it will look like:

And the scope chain flow goes like:

This means that: "Every scope has access to all the variables from its outer scope".
However, "The outer scope cannot access the variables defined in inner scope".

That was all we had to cover about Scope and The Scope Chain. For any queries or suggestions, feel free to use the comment section.

Stay Safe and Happy Learning🙌