In the last JavaScript fundamental article, we talked about how hoisting works and in that article, we also talked about the execution contexts. When an execution context is created, a scope chain is also created.

In this article, I will start with what scope is in JavaScript so we have a better understanding of different types of scope and then we will dive into how the scope chain works.

What is Scope?

Scope refers to the current context of execution and determines the accessibility of variables, meaning where the variables are available in your code.

Here is an example of scope.

myFunc();

function myFunc() {
  const msg = 'Anyong';
  console.log(msg);
}

console.log(msg);

And the result is:

Anyong
Uncaught ReferenceError: msg is not defined

A function creates a scope so msg variable defined inside myFunc() cannot be accessed from outside the myFunc() function or from other functions. That’s why we are getting an error when we try to log msg outside myFunc() function.

Types of Scope

Let’s take a look at the types of scope.

Global Scope

A variable declared outside of a function is in the global scope and there is only one global scope in your JS code. Any variable declared in the global scope are accessible from anywhere in the code.

// Global Scope
// Initialize a global variable
var msg = 'Anyong';

function myFunc() {
  console.log(msg);
}

myFunc();

the result:

Anyong

In the above example, the variable msg is defined in the global scope and accessible in myFunc() local scope.

Local/Function Scope

A variable declared inside a function is in the local (or function) scope and it can only be accessed within the function and any nested functions.

Variables can have the same name in different functions because the local variables are not accessible from other functions.

// Global Scope
// Initialize a global variable
var msg = 'Anyong';

// Local/Function Scope
function myFunc() {
  // Initialize a local variable
  var msg = 'Hello';
  var myName = "Ryan";
  console.log(`${msg}, ${myName}!`);
}

// Local/Function Scope
function myFuncTwo() {
  // Initialize a local variable
  var msg = 'Kia ora';
  console.log(msg);
}

console.log(msg);
myFunc();
myFuncTwo();
console.log(myName);

the result:

Anyong
Hello, Ryan!
Kia ora
Uncaught ReferenceError: myName is not defined

From the above example, we can have the same variable name in different scope. Also we see the error when we try to access myName outside the function.

Block Scope

In the global and local scope examples above, we have used var keyword. There are other two keywords, let and const and they are block scoped. The code block of if, for and while statements create a block scope and let and const values cannot be accessed from outside of the block scope.

// Global Scope
// Initialize a global variable
const language = 'Korean';

// Local/Function Scope
function myFunc() {
  // Initialize a local variable
  const msg = 'Anyong';

  // Block Scope
  if (msg === 'Anyong') {
    const response = 'Bab meog-eoss-eo?';
    console.log(`${language}:  ${msg} - ${response}`);
  }

  console.log(`${language}:  ${msg} - ${response}`);
}

myFunc();

the result:

Korean:  Anyong - Bab meog-eoss-eo?
Uncaught ReferenceError: response is not defined

Scopes of any type can be nested and as we can see from the code example above, the if statement is a block scope and it is nested inside the myFunc() local scope.

For the second console, we are getting a reference error because the value of the const response is block-scoped so cannot be accessed from outside of the if statement.

What is Scope Chain?

Scope chain is a stack of accessible scopes starting from the current context to the global context to resolve variables.

Let’s take a look at the code below.

function myFuncTwo() {
  console.log(msg);
}

function myFuncOne() {
  var msg = 'Kia ora';
  myFuncTwo();
}

var msg = 'Anyong';
myFuncOne();

And the result is:

Anyong

Probably you might have thought that we might get undefined or Kia ora because in the myFuncTwo(), msg isn’t declared. However it logs Anyong. Why is that?

It’s because, each execution context references to its outer lexical environment. In the code above, myFuncTwo lexically (physically) sits in the global environment which is same level as where var msg = 'Anyong' sits. So when the JavaScript engine cannot find the msg variable inside the myFuncTwo(), it will look for the outer environment which is the global execution context and find it there. That’s why we are getting the result, Anyong.

If we move myFuncTwo() inside myFuncOne(),

function myFuncOne() {
  var msg = 'Kia ora';

  function myFuncTwo() {
    console.log(msg);
  }

  myFuncTwo();
}

var msg = 'Anyong';
myFuncOne();

the result is:

Kia ora

It’s because now myFuncTwo() lexically sits inside the myFuncOne(), the outer reference of the myFuncTwo() is myFuncOne(), and it found the var msg = 'Kia ora' so it logs Kia ora.

Conclusion

The scope is the way of accessing variables, functions and objects from your code during runtime, and the scope chain is the link to the outer environments to find the variables.

Understanding what the scope is and how the scope chain works is important as they are the fundamental concepts of JavaScript. I hope this article helps you have better ideas of what scope and scope chain are and how they work.

Happy coding and have a wonderful day 👋