DEV Community

Cover image for Javascript scope and scope chain
hacker4world
hacker4world

Posted on

Javascript scope and scope chain

A scope is like a place where we can access a certain declared variable in Javascript, when the variable is not availabe in a certain scope it cannot be used there.

Types of scopes

there are 3 main types of scopes found in Javascript

The global scope

This is the scope where you can access any declared variable or function and it is on the top level

const name = "John";
console.log(name); // John
Enter fullscreen mode Exit fullscreen mode

the variable name is created in the global scope so it is accessible everywhere even inside a function scope

const name = "John";
function logName() {
    console.log(name); //John
}
logName();
Enter fullscreen mode Exit fullscreen mode

The function scope

This is the scope inside functions and methods and anything declared there cannot be accessed in the global scope

function createName() {
    const name = "John";
    console.log(name); // John
}
createName();
console.log(name); // name is not defined
Enter fullscreen mode Exit fullscreen mode

The block scope (ES6 only)

This is the scope inside if statements and loops, any variable declared there with let and const cannot be accessed outside the scope

if (true) {
    const name = "John";
}
console.log(name); // name is not defined
Enter fullscreen mode Exit fullscreen mode

however, if we declare the variable with var, it can be accessed outside the scope

if (true) {
    var name = "John";
}
console.log(name); // John
Enter fullscreen mode Exit fullscreen mode

The scope chain

If we make a scope inside a scope inside another scope we make a scope chain

Example

function fnc1() {
  //scope 2
  return function () {
    //scope 3
    return function () {
      //scope 4
      return function () {
        //scope 5
      };
    };
  };
}
Enter fullscreen mode Exit fullscreen mode

and every scope only has access to variables declared inside a higher level scope.
scope 5 has access to all scope 4, 3, 2 and global scope variables
scope 4 has access to all scope 3, 2, and global scope variables
etc

Top comments (0)