Scope chain in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the scope chain in JavaScript?

The scope chain is the order in which JavaScript looks for variables. It starts from the current function's scope and moves outward to parent scopes until it reaches the global scope.

beginner

How does JavaScript find a variable when it is used inside a function?

JavaScript first looks inside the function's own scope. If it doesn't find the variable there, it looks in the outer (parent) scopes, following the scope chain until it finds the variable or reaches the global scope.

beginner

What happens if a variable is not found anywhere in the scope chain?

If the variable is not found in any scope, JavaScript throws a ReferenceError saying the variable is not defined.

beginner

Explain the difference between local scope and global scope.

Local scope means variables defined inside a function or block and only accessible there. Global scope means variables defined outside any function and accessible anywhere in the code.

intermediate

How does nested function scope affect the scope chain?

Nested functions create new scopes inside outer functions. The inner function's scope chain includes its own scope plus all outer scopes up to the global scope.

Where does JavaScript look first when resolving a variable inside a function?

A In the global scope

B In the browser's console

C Inside the function's own scope

D In the parent window

JavaScript first checks the current function's scope before moving outward.

What error occurs if a variable is not found in any scope?

A TypeError

B RangeError

C SyntaxError

D ReferenceError

JavaScript throws a ReferenceError when a variable is not defined in any scope.

Which scope is accessible everywhere in your JavaScript code?

A Block scope

B Global scope

C Local scope

D Function scope

Global scope variables are accessible anywhere in the code.

If a variable is declared inside a nested function, where can it be accessed?

A Only inside that nested function

B Anywhere in the outer function

C Anywhere in the global scope

D Anywhere in the program

Variables declared inside a nested function are only accessible within that function.

What does the scope chain help JavaScript do?

A Find the right variable value

B Run faster

C Create new variables

D Stop errors

The scope chain helps JavaScript find the correct variable by checking scopes in order.

Explain how JavaScript uses the scope chain to find a variable inside nested functions.

Think about how JavaScript checks each scope one by one.

Describe the difference between local and global scope and how the scope chain connects them.

Consider where variables are declared and where they can be used.

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