Scope chain in Javascript - Mini Project: Build & Apply

Understanding Scope Chain in JavaScript

📖 Scenario: Imagine you are organizing a small event and you have different teams responsible for different tasks. Each team has its own list of tasks, but some tasks are shared or accessible by other teams depending on the event's structure.This is similar to how JavaScript manages variables in different scopes using the scope chain.

🎯 Goal: You will create variables in different scopes and write functions to access these variables, demonstrating how the scope chain works in JavaScript.

📋 What You'll Learn

Create a global variable called eventName with the value 'Community Meetup'.

Create a function called teamTasks that declares a local variable tasks with the value ['Setup', 'Registration'].

Inside teamTasks, create a nested function called printTasks that accesses both tasks and eventName and prints a message.

Call the teamTasks function to display the message.

💡 Why This Matters

🌍 Real World

Understanding scope chain helps in writing clear and bug-free code by knowing where variables can be accessed.

💼 Career

Most programming jobs require knowledge of variable scope to manage data and avoid errors in complex applications.

1

Create the global variable

Create a global variable called eventName and set it to the string 'Community Meetup'.

Javascript

// Your code here

Hint

Use const to create a variable that holds the event name.

2

Create the teamTasks function with local tasks

Create a function called teamTasks that declares a local variable tasks set to the array ['Setup', 'Registration'].

Javascript

const eventName = 'Community Meetup';

// Your code here

Hint

Define the function with function teamTasks() and inside it declare const tasks = ['Setup', 'Registration'].

3

Add nested function to access both scopes

Inside the teamTasks function, create a nested function called printTasks that prints the message: Tasks for Community Meetup: Setup, Registration by accessing both tasks and eventName.

Javascript

const eventName = 'Community Meetup';

function teamTasks() {
    const tasks = ['Setup', 'Registration'];
    // Your code here
}

Hint

Define printTasks inside teamTasks. Use console.log with a template string to include eventName and tasks.join(', ').

4

Call the teamTasks function to show output

Call the teamTasks function to display the message in the console.

Javascript

const eventName = 'Community Meetup';

function teamTasks() {
    const tasks = ['Setup', 'Registration'];
    function printTasks() {
        console.log(`Tasks for ${eventName}: ${tasks.join(', ')}`);
    }
    printTasks();
}

// Your code here

Hint

Simply call teamTasks() to run the code and see the message.

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