Scope chain in Javascript

Introduction

The scope chain helps JavaScript find variables by looking in the right places step-by-step.

When you want to understand where a variable comes from in your code.

When you have functions inside other functions and want to access variables from outside.

When debugging why a variable has a certain value.

When writing code that uses nested functions or blocks.

When you want to avoid naming conflicts by knowing which variable is used.

Syntax

Javascript

function outer() {
  let outerVar = 'hello';
  function inner() {
    console.log(outerVar);
  }
  inner();
}

Variables are looked up starting from the current function, then moving outward.

If a variable is not found in the current scope, JavaScript checks the next outer scope.

Examples

The inner function sayHello uses the variable name from the outer function.

Javascript

function greet() {
  let name = 'Alice';
  function sayHello() {
    console.log('Hello ' + name);
  }
  sayHello();
}
greet();

The function check accesses a variable from the global scope.

Javascript

let globalVar = 'I am global';
function check() {
  console.log(globalVar);
}
check();

The inner function has its own x, so it prints 2, then the outer prints 1.

Javascript

function outer() {
  let x = 1;
  function inner() {
    let x = 2;
    console.log(x);
  }
  inner();
  console.log(x);
}
outer();

Sample Program

This program shows how the scope chain works with two variables named message in different scopes.

Javascript

function outer() {
  let message = 'Hi from outer';
  function inner() {
    let message = 'Hi from inner';
    console.log(message); // inner message
  }
  inner();
  console.log(message); // outer message
}
outer();

Important Notes

Each function creates a new scope for its variables.

If a variable is not found in the current scope, JavaScript looks outward until it finds it or reaches the global scope.

Variables declared with let and const are block-scoped, meaning they only exist inside the block they are declared in.

Summary

The scope chain is how JavaScript finds variables by checking current and outer scopes.

Inner functions can access variables from outer functions.

Variables with the same name in inner scopes hide outer ones.

Practice

1. What does the scope chain in JavaScript help with?

easy

A. Sorting arrays automatically

B. Finding variables by checking current and outer scopes

C. Managing asynchronous code execution

D. Styling HTML elements dynamically

Solution

1. Step 1: Understand the role of scope chain

   The scope chain is a mechanism JavaScript uses to look for variables starting from the current scope and moving outward.

2. Step 2: Compare options with scope chain definition

   Only Finding variables by checking current and outer scopes correctly describes this behavior; others describe unrelated concepts.

3. Final Answer:

   Finding variables by checking current and outer scopes -> Option B

4. Quick Check:

   Scope chain = variable lookup [OK]

Hint: Scope chain = variable search from inner to outer [OK]

Common Mistakes:

• Confusing scope chain with asynchronous behavior
• Thinking scope chain sorts or styles elements
• Mixing scope chain with event handling

2. Which of the following is the correct way to declare a variable accessible only inside a function in JavaScript?

easy

A. function x() {}

B. const x = 10;

C. var x = 10;

D. let x = 10;

Solution

1. Step 1: Identify function-scoped variable declarations

   Variables declared with var are function-scoped, meaning they are accessible anywhere within the function.

2. Step 2: Check accessibility inside a function

   Declaring var x = 10; inside a function limits x to that function's scope.

3. Final Answer:

   var x = 10; -> Option C

4. Quick Check:

   Use var for function-scoped variables [OK]

Hint: Use var for variables inside functions [OK]

Common Mistakes:

• Using let or const which are block-scoped
• Confusing function declaration with variable declaration

3. What will be the output of the following code?

let x = 5;
function outer() {
  let x = 10;
  function inner() {
    console.log(x);
  }
  inner();
}
outer();

medium

A. 10

B. 5

C. undefined

D. ReferenceError

Solution

1. Step 1: Understand variable shadowing in nested functions

   The inner function looks for x in its own scope, then outer scopes. It finds x = 10 in outer().

2. Step 2: Determine the logged value

   Since inner() uses the x from outer(), it logs 10.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Inner function uses nearest x = 10 [OK]

Hint: Inner uses closest variable named x [OK]

Common Mistakes:

• Thinking it logs global x = 5
• Expecting undefined because inner has no x
• Confusing with ReferenceError due to scope

4. Find the error in this code related to scope chain:

function test() {
  console.log(a);
  let a = 3;
}
test();

medium

A. No error, logs 3

B. SyntaxError due to let usage

C. Logs undefined

D. ReferenceError because a is used before declaration

Solution

1. Step 1: Understand temporal dead zone with let

   Variables declared with let are not accessible before their declaration inside their scope.

2. Step 2: Analyze console.log usage before declaration

   Using a before let a = 3; causes a ReferenceError due to temporal dead zone.

3. Final Answer:

   ReferenceError because a is used before declaration -> Option D

4. Quick Check:

   let variables can't be accessed before declaration [OK]

Hint: let variables cause ReferenceError if accessed early [OK]

Common Mistakes:

• Assuming var behavior with undefined
• Thinking no error occurs
• Confusing with SyntaxError

5. Consider this code:

let x = 1;
function outer() {
  let x = 2;
  function inner() {
    let x = 3;
    console.log(x);
  }
  inner();
  console.log(x);
}
outer();
console.log(x);

What is the output sequence?

hard

A. 3, 2, 1

B. 1, 2, 3

C. 3, 3, 3

D. 2, 3, 1

Solution

1. Step 1: Trace inner function console.log(x)

   Inside inner(), x is 3, so it logs 3.

2. Step 2: Trace outer function console.log(x)

   After inner(), outer() logs its own x which is 2.

3. Step 3: Trace global console.log(x)

   Outside all functions, global x is 1, so it logs 1.

4. Final Answer:

   3, 2, 1 -> Option A

5. Quick Check:

   Each scope logs its own x value [OK]

Hint: Each console.log uses nearest x in its scope [OK]

Common Mistakes:

• Assuming all logs print global x
• Mixing order of outputs
• Ignoring variable shadowing in inner scopes