Block scope in Javascript

Introduction

Block scope helps keep variables limited to a small area of code. This stops mistakes and keeps code neat.

When you want a variable to exist only inside an if statement or loop.

When you want to avoid changing a variable outside a small code block.

When you want to reuse the same variable name in different parts of your code safely.

When you want to keep temporary values hidden from the rest of your program.

Syntax

Javascript

if (condition) {
  let variable = value;
  // variable only works inside these braces
}

Variables declared with let or const are block scoped.

Variables declared with var are NOT block scoped; they are function scoped.

Examples

The variable message exists only inside the if block.

Javascript

if (true) {
  let message = 'Hello';
  console.log(message); // prints 'Hello'
}
// console.log(message); // Error: message is not defined

The loop variable i is only inside the for block.

Javascript

for (let i = 0; i < 3; i++) {
  console.log(i); // prints 0, then 1, then 2
}
// console.log(i); // Error: i is not defined

Using var makes x visible outside the block, which can cause bugs.

Javascript

if (true) {
  var x = 5;
}
console.log(x); // prints 5

Sample Program

This program shows that a variable declared with let inside a block cannot be used outside it. The error is caught and printed.

Javascript

function testBlockScope() {
  if (true) {
    let insideBlock = 'I am inside';
    console.log(insideBlock);
  }
  // Trying to use insideBlock here will cause an error
  try {
    console.log(insideBlock);
  } catch (error) {
    console.log('Error:', error.message);
  }
}
testBlockScope();

Important Notes

Always prefer let or const over var to avoid unexpected bugs.

Block scope helps keep your code safe and easier to understand.

Summary

Block scope limits variables to the area inside curly braces { }.

let and const create block-scoped variables.

var does not create block scope, so avoid it for block-level variables.

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