Block scope in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a block-scoped variable.

Javascript

function test() {
  [1] message = 'Hello';
  console.log(message);
}

Drag options to blanks, or click blank then click option'

Avar

Blet

Cconst

Dfunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'var' instead of 'let' causes the variable to be function-scoped.

Using 'function' keyword incorrectly to declare a variable.

The let keyword declares a block-scoped variable inside the function.

2fill in blank

medium

Complete the code to correctly access the block-scoped variable inside the block.

Javascript

if (true) {
  let [1] = 5;
  console.log(num);
}

Drag options to blanks, or click blank then click option'

Anum

Bnumber

Cvalue

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than declared causes a ReferenceError.

Trying to access the variable outside the block.

The variable declared with let is named num and accessible inside the block.

3fill in blank

hard

Fix the error by choosing the correct keyword to declare a block-scoped constant.

Javascript

if (true) {
  [1] PI = 3.14;
  console.log(PI);
}

Drag options to blanks, or click blank then click option'

Aconst

Blet

Cvar

Dfunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'var' or 'let' when the value should be constant.

Using 'function' keyword incorrectly.

const declares a block-scoped constant that cannot be reassigned.

4fill in blank

hard

Fill both blanks to create a block-scoped variable and check its scope.

Javascript

function checkScope() {
  [1] x = 10;
  if (true) {
    [2] x = 20;
    console.log(x);
  }
  console.log(x);
}

Drag options to blanks, or click blank then click option'

Alet

Bvar

Cconst

Dfunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using var for both variables causes the inner assignment to overwrite the outer.

Using const incorrectly when reassignment is needed.

The outer x is declared with var (function-scoped), and the inner x with let (block-scoped). The inner x shadows the outer inside the block.

5fill in blank

hard

Fill all three blanks to create a block-scoped variable, a constant, and print their values.

Javascript

function demo() {
  [1] name = 'Alice';
  if (true) {
    [2] greeting = 'Hello';
    [3](greeting + ', ' + name);
  }
}

Drag options to blanks, or click blank then click option'

Alet

Bconst

Cconsole.log

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Using const for variables that are reassigned.

Forgetting to use console.log to print.

name is declared with var (function-scoped), greeting with let (block-scoped), and console.log prints the combined message.

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