DEV Community

ABISHEK M
ABISHEK M

Posted on

Scope Chain in JavaScript

1. What is Scope?

Scope means the area of a program where a variable can be accessed.

let name = "Abishek";

console.log(name);
Enter fullscreen mode Exit fullscreen mode

Here, name can be accessed because it is available in that scope.

2. What is Scope Chain?

Scope Chain is the process JavaScript uses to find a variable.

When JavaScript needs a variable, it first searches in the current scope. If it is not found, it searches in the outer scope. It continues searching until it reaches the global scope.

Simple Flow

Current Scope
      ↓
Outer Scope
      ↓
Global Scope
Enter fullscreen mode Exit fullscreen mode

3. Example of Scope Chain

let a = 10;

function outer() {
    let b = 20;

    function inner() {
        let c = 30;

        console.log(a);
        console.log(b);
        console.log(c);
    }

    inner();
}

outer();
Enter fullscreen mode Exit fullscreen mode

There are three scopes:

Global Scope
     ↓
outer() Scope
     ↓
inner() Scope
Enter fullscreen mode Exit fullscreen mode

Finding c

JavaScript searches:

inner scope → c found ✅
Enter fullscreen mode Exit fullscreen mode

So:

30
Enter fullscreen mode Exit fullscreen mode

Finding b

JavaScript searches:

inner scope → b not found ❌
       ↓
outer scope → b found ✅
Enter fullscreen mode Exit fullscreen mode

So:

20
Enter fullscreen mode Exit fullscreen mode

Finding a

JavaScript searches:

inner scope → a not found ❌
       ↓
outer scope → a not found ❌
       ↓
global scope → a found ✅
Enter fullscreen mode Exit fullscreen mode

So:

10
Enter fullscreen mode Exit fullscreen mode

4. What if the Variable is Not Found?

If JavaScript searches the entire scope chain and cannot find the variable, it gives a ReferenceError.

function test() {
    console.log(x);
}

test();
Enter fullscreen mode Exit fullscreen mode

JavaScript searches:

test scope  → x ❌
     ↓
global scope → x ❌
Enter fullscreen mode Exit fullscreen mode

Since x is not found:

ReferenceError: x is not defined
Enter fullscreen mode Exit fullscreen mode

5. Inner Scope Can Access Outer Scope

An inner function can access variables from its outer scope.

function outer() {
    let a = 10;

    function inner() {
        console.log(a);
    }

    inner();
}

outer();
Enter fullscreen mode Exit fullscreen mode

Output:

10
Enter fullscreen mode Exit fullscreen mode

Why?

Because JavaScript searches outward:

inner → outer → global
Enter fullscreen mode Exit fullscreen mode

6. Outer Scope Cannot Access Inner Scope

An outer function cannot access variables declared inside an inner function.

function outer() {

    function inner() {
        let b = 20;
    }

    console.log(b); // Error
}
Enter fullscreen mode Exit fullscreen mode

b belongs only to the inner scope.

The scope chain does not search inward.

outer → inner ❌
Enter fullscreen mode Exit fullscreen mode

It only searches outward:

inner → outer → global
Enter fullscreen mode Exit fullscreen mode

7. Important Rule

Scope Chain always searches:

Inside → Outside
Enter fullscreen mode Exit fullscreen mode

or

Current Scope → Parent Scope → Global Scope
Enter fullscreen mode Exit fullscreen mode

It does not search:

Outside → Inside
Enter fullscreen mode Exit fullscreen mode

The inner scope can access outer variables, but the outer scope cannot access inner variables.


Top comments (0)