Block scope in Javascript - Mini Project: Build & Apply

Understanding Block Scope in JavaScript

📖 Scenario: Imagine you are organizing a small event and you want to keep track of the number of guests in different rooms. Each room has its own count that should not affect the others.

🎯 Goal: You will learn how to use block scope with let to keep variables limited to their blocks. This helps avoid mistakes when variables with the same name are used in different parts of your code.

📋 What You'll Learn

Create a variable with let inside a block

Create another variable with the same name in a different block

Show that the variables do not interfere with each other

Print the values of the variables to see block scope in action

💡 Why This Matters

🌍 Real World

Block scope helps when you work on projects with many parts, like web pages with different sections or apps with multiple features. It keeps variables safe inside their areas.

💼 Career

Understanding block scope is important for writing clean, bug-free JavaScript code, a key skill for web developers and software engineers.

1

Create a variable guestCount with value 5 outside any block

Write a line of code to create a variable called guestCount using let and set it to 5 outside any block.

Javascript

let guestCount = 5;  // Your code here

Hint

Use let guestCount = 5; to create the variable.

2

Create a block and inside it create a new guestCount variable with value 10

Add a block using curly braces { }. Inside this block, create a new variable called guestCount using let and set it to 10.

Javascript

let guestCount = 5;
{
  // Your code here
}

Hint

Use curly braces to create a block and declare let guestCount = 10; inside it.

3

Inside the block, add a console.log to print the inner guestCount

Inside the block you created, add a line to print the value of guestCount using console.log.

Javascript

let guestCount = 5;
{
  let guestCount = 10;
  // Your code here
}

Hint

Use console.log(guestCount); inside the block to print the inner variable.

4

Print the outer guestCount variable outside the block

Add a line after the block to print the value of the outer guestCount variable using console.log.

Javascript

let guestCount = 5;
{
  let guestCount = 10;
  console.log(guestCount);
}
// Your code here

Hint

Use console.log(guestCount); after the block to print the outer variable.

Practice

1. Which keyword creates a variable that is limited to the block inside { } in JavaScript?

easy

A. function

B. var

C. let

D. global

Solution

1. Step 1: Understand block scope

   Block scope means variables exist only inside curly braces { }.

2. Step 2: Identify keywords that create block scope

   let and const create block-scoped variables, while var does not.

3. Final Answer:

   let -> Option C

4. Quick Check:

   Block scope = let [OK]

Hint: Remember: let and const are block scoped [OK]

Common Mistakes:

• Thinking var is block scoped
• Confusing function with variable declaration
• Assuming global is a keyword

2. Which of the following is the correct syntax to declare a block-scoped constant variable named score with value 10?

easy

A. var score = 10;

B. score = 10;

C. let score = 10;

D. const score = 10;

Solution

1. Step 1: Identify constant declaration syntax

   To declare a constant, use const followed by the variable name and value.

2. Step 2: Check block scope and immutability

   const creates a block-scoped variable that cannot be reassigned.

3. Final Answer:

   const score = 10; -> Option D

4. Quick Check:

   Constant declaration = const [OK]

Hint: Use const for constants, let for variables [OK]

Common Mistakes:

• Using var which is not block scoped
• Omitting let or const
• Trying to reassign a const variable

3. What will be the output of the following code?

if (true) {
  let x = 5;
}
console.log(typeof x);

medium

A. "undefined"

B. "ReferenceError"

C. "object"

D. "number"

Solution

1. Step 1: Understand variable scope of let

   The variable x is declared with let inside the if block, so it exists only inside that block.

2. Step 2: Check access outside the block

   typeof on an undeclared variable returns "undefined". Direct access like console.log(x) would throw ReferenceError.

3. Final Answer:

   "undefined" -> Option A

4. Quick Check:

   typeof undeclared = "undefined" [OK]

Hint: typeof returns "undefined" for undeclared vars, no error [OK]

Common Mistakes:

• Thinking it throws ReferenceError (confuses with direct access)
• Confusing var and let scope
• Expecting "number"

4. Find the error in this code snippet:

if (true) {
  var y = 10;
}
console.log(y);

medium

A. SyntaxError: Missing semicolon

B. No error, outputs 10

C. TypeError: y is not a function

D. ReferenceError: y is not defined

Solution

1. Step 1: Understand var scope

   var is function-scoped or global-scoped, not block-scoped, so y is accessible outside the if block.

2. Step 2: Check console output

   Since y is defined, console.log(y) outputs 10 without error.

3. Final Answer:

   No error, outputs 10 -> Option B

4. Quick Check:

   var ignores block scope [OK]

Hint: var ignores block scope, accessible outside blocks [OK]

Common Mistakes:

• Expecting ReferenceError for var
• Confusing block scope with function scope
• Thinking semicolon missing causes error

5. Consider this code:

function test() {
  if (true) {
    let a = 1;
    var b = 2;
  }
  console.log(b);
  console.log(a);
}
test();

What will happen when this code runs?

hard

A. Logs 2, then ReferenceError for a

B. Logs 1 and 2

C. ReferenceError for b, then logs 1

D. SyntaxError due to mixed declarations

Solution

1. Step 1: Analyze let a scope

   a is declared with let inside the if block, so it is not accessible outside that block.

2. Step 2: Analyze var b scope

   b is declared with var, which is function-scoped, so it is accessible anywhere inside test().

3. Step 3: Predict console output

   Logging b outputs 2 because it is function-scoped. Logging a causes a ReferenceError because it is out of scope.

4. Final Answer:

   Logs 2, then ReferenceError for a -> Option A

5. Quick Check:

   let block scope hides a, var function scope shows b [OK]

Hint: let is block scoped; var is function scoped [OK]

Common Mistakes:

• Expecting both variables accessible
• Confusing let and var scopes
• Thinking mixed declarations cause syntax error