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

Need a 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

Need a 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
}

Need a 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

Need a hint?

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