Scope chain in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the global variable inside the function.

Javascript

let message = 'Hello';
function greet() {
  console.log([1]);
}
greet();

Drag options to blanks, or click blank then click option'

Agreet

Bconsole

Cmessage

Dlog

Attempts:

3 left

💡 Hint

Common Mistakes

Using the function name instead of the variable name.

Trying to access console or log as variables.

The variable message is declared globally and can be accessed inside the function greet due to the scope chain.

2fill in blank

medium

Complete the code to print the local variable inside the function.

Javascript

function showNumber() {
  let number = 5;
  console.log([1]);
}
showNumber();

Drag options to blanks, or click blank then click option'

Aconsole

Bnumber

CshowNumber

Dnum

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not declared.

Trying to use the function name as a variable.

The variable number is declared inside the function and can be accessed there.

3fill in blank

hard

Fix the error in accessing the variable inside the nested function.

Javascript

function outer() {
  let outerVar = 'outside';
  function inner() {
    console.log([1]);
  }
  inner();
}
outer();

Drag options to blanks, or click blank then click option'

AouterVar

BinnerVar

Cconsole

Douter

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access a variable that does not exist in the inner function.

Using the inner function name as a variable.

The inner function can access outerVar because of the scope chain linking inner and outer functions.

4fill in blank

hard

Fill the blank to create a closure that increments the outer variable.

Javascript

function makeCounter() {
  let count = 0;
  return function() {
    count [1];
    return count;
  };
}
const counter = makeCounter();
counter();

Drag options to blanks, or click blank then click option'

A=

B+

C--

D++

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of ++ to increment.

Returning an expression instead of the variable.

The inner function increments count using ++ and returns the updated value.

5fill in blank

hard

Fill all three blanks to correctly shadow a variable and access both values.

Javascript

let value = 10;
function test() {
  let value = [1];
  console.log(value);
  console.log([2]);
  function inner() {
    console.log([3]);
  }
  inner();
}
test();

Drag options to blanks, or click blank then click option'

A20

Bvalue

Cwindow.value

DglobalThis.value

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access the global variable by just using 'value' inside the function.

Using 'window.value' which may not work in all environments.

The local value shadows the global one. Inside test, value is 20. To access the global value, use globalThis.value. Inside inner, value refers to the local one in test.

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