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.