Function scope in Javascript - Mini Project: Build & Apply

Function scope

📖 Scenario: Imagine you are organizing a small event and you want to keep track of the number of guests inside the event hall. You will use functions to manage this count, but you want to understand how variables inside and outside functions behave.

🎯 Goal: You will create a variable to count guests, write a function that changes this count inside its own scope, and then see how the count changes outside the function.

📋 What You'll Learn

Create a variable called guestCount and set it to 10

Create a function called addGuests that declares a local variable guestCount and sets it to 20

Inside the function addGuests, print the local guestCount

Outside the function, print the original guestCount variable

💡 Why This Matters

🌍 Real World

Understanding function scope helps avoid bugs when managing data in different parts of a program, like counting guests or tracking inventory.

💼 Career

Many programming jobs require clear understanding of variable scope to write clean, bug-free code.

1

Create the initial guest count variable

Create a variable called guestCount and set it to 10.

Javascript

// Create a variable called guestCount and set it to 10
// Your code here

Hint

Use let to create the variable guestCount and assign it the value 10.

2

Create a function with a local guestCount variable

Create a function called addGuests that declares a local variable guestCount and sets it to 20.

Javascript

let guestCount = 10;
// Create a function called addGuests with a local guestCount variable set to 20
// Your code here

Hint

Inside the function addGuests, declare a new variable guestCount using let and assign it 20.

3

Print the local guestCount inside the function

Inside the function addGuests, add a line to print the local guestCount using console.log.

Javascript

let guestCount = 10;

function addGuests() {
    let guestCount = 20;
    // Print the local guestCount
    // Your code here
}

Hint

Use console.log(guestCount); inside the function to print the local variable.

4

Call the function and print the original guestCount

Call the function addGuests() and then print the original guestCount variable using console.log.

Javascript

let guestCount = 10;

function addGuests() {
    let guestCount = 20;
    console.log(guestCount);
}

// Call addGuests and print the original guestCount
// Your code here

Hint

Call addGuests() first, then print guestCount with console.log(guestCount);.

Practice

1. What does function scope mean in JavaScript?

easy

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

B. Variables declared inside a function are accessible everywhere in the program.

C. Functions can only be called inside other functions.

D. Variables declared outside a function are not accessible inside it.

Solution

1. Step 1: Understand variable accessibility

   Variables declared inside a function are private to that function and cannot be accessed outside.

2. Step 2: Compare options with this rule

   Only Variables declared inside a function are only accessible within that function. correctly states this behavior.

3. Final Answer:

   Variables declared inside a function are only accessible within that function. -> Option A

4. Quick Check:

   Function scope = variables inside function only [OK]

Hint: Remember: function variables stay inside the function [OK]

Common Mistakes:

• Thinking variables inside functions are global
• Confusing function scope with block scope
• Assuming functions can't access outer variables

2. Which of the following is the correct way to declare a variable with function scope inside a function?

easy

A. if (true) { var x = 5; }

B. let x = 5;

C. function x = 5;

D. const x = 5;

Solution

1. Step 1: Identify valid function-scoped declarations

   Inside a function, let, const, and var declare variables with function or block scope.

2. Step 2: Check syntax correctness

   function x = 5; is invalid syntax. let x = 5; and const x = 5; use block scope. if (true) { var x = 5; } declares var with function scope, as it is hoisted to the function level.

3. Final Answer:

   if (true) { var x = 5; } -> Option A

4. Quick Check:

   Use const or let inside functions [OK]

Hint: Use var inside functions for function scope [OK]

Common Mistakes:

• Using 'function' keyword to declare variables
• Confusing block scope with function scope
• Assuming var is block scoped

3. What will be the output of this code?

function test() {
  let a = 10;
  if (true) {
    let a = 20;
    console.log(a);
  }
  console.log(a);
}
test();

medium

A. 10\n10

B. 20\n20

C. 20\n10

D. ReferenceError

Solution

1. Step 1: Understand variable shadowing inside blocks

   The inner let a = 20; creates a new variable scoped to the if-block, shadowing the outer a = 10.

2. Step 2: Trace console.log outputs

   Inside the if-block, a is 20, so first log prints 20. Outside the block but inside the function, a is still 10, so second log prints 10.

3. Final Answer:

   20 10 -> Option C

4. Quick Check:

   Block scope shadows outer variable = 20 then 10 [OK]

Hint: Inner let shadows outer let inside blocks [OK]

Common Mistakes:

• Assuming both logs print the same value
• Confusing block scope with function scope
• Expecting ReferenceError for inner variable

4. Find the error in this code:

function example() {
  console.log(x);
  let x = 5;
}
example();

medium

A. Outputs undefined

B. No error, outputs 5

C. SyntaxError due to missing semicolon

D. ReferenceError because x 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 the function, causing a ReferenceError if accessed earlier.

2. Step 2: Analyze the console.log usage

   The code tries to log x before it is declared with let x = 5;, causing a ReferenceError.

3. Final Answer:

   ReferenceError because x is used before declaration -> Option D

4. Quick Check:

   Accessing let before declaration = ReferenceError [OK]

Hint: Don't use let variables before declaring them [OK]

Common Mistakes:

• Thinking var behaves the same as let here
• Expecting undefined instead of error
• Ignoring temporal dead zone rules

5. You want to create a function that counts how many times it has been called using function scope. Which code correctly does this?

function counter() {
  // Your code here
}
console.log(counter());
console.log(counter());
console.log(counter());

hard

A. function counter() {
let count = 0;
count++;
return count;
}

B. function counter() {
if (!counter.count) counter.count = 0;
counter.count++;
return counter.count;
}

C. let count = 0;
function counter() {
count++;
return count;
}

D. function counter() {
const count = 0;
count++;
return count;
}

Solution

1. Step 1: Understand function scope and persistence

   Variables declared inside the function reset each call, so to keep count, it must be stored outside or as a property.

2. Step 2: Analyze each option

   function counter() { let count = 0; count++; return count; } resets count to 0 every call, so always returns 1. function counter() { if (!counter.count) counter.count = 0; counter.count++; return counter.count; } uses a property on the function to store count, preserving it across calls. let count = 0; function counter() { count++; return count; } uses a global variable, which works but is not function scope. function counter() { const count = 0; count++; return count; } tries to increment a constant, causing error.

3. Final Answer:

   function counter() { if (!counter.count) counter.count = 0; counter.count++; return counter.count; } -> Option B

4. Quick Check:

   Use function property to store persistent count [OK]

Hint: Use function properties to keep data across calls [OK]

Common Mistakes:

• Resetting count inside function each call
• Using const and trying to increment
• Using global variables instead of function scope