Function scope in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of variable inside function scope

What will be the output of the following code?

Javascript

function test() {
  let message = "Hello";
  console.log(message);
}
test();
console.log(message);

A Hello\nReferenceError

B Hello\nundefined

C undefined\nHello

D ReferenceError\nHello

💡 Hint

Variables declared inside a function are not accessible outside it.

The variable 'message' is declared inside the function 'test', so it is only accessible there. The first console.log prints 'Hello'. The second console.log tries to access 'message' outside its scope, causing a ReferenceError.

❓ Predict Output

intermediate

Output of nested function accessing outer variable

What will this code print to the console?

Javascript

function outer() {
  let count = 5;
  function inner() {
    console.log(count);
  }
  inner();
}
outer();

A undefined

B 5

C ReferenceError

D 0

💡 Hint

Inner functions can access variables from their outer functions.

The inner function can see the variable 'count' declared in the outer function, so it prints 5.

❓ Predict Output

advanced

Effect of var in function scope

What is the output of this code?

Javascript

function example() {
  if (true) {
    var x = 10;
  }
  console.log(x);
}
example();

A 10

B ReferenceError

C undefined

D TypeError

💡 Hint

Variables declared with var are function-scoped, not block-scoped.

The variable 'x' declared with var inside the if block is accessible throughout the function, so console.log prints 10.

❓ Predict Output

advanced

Output with let inside block scope

What will this code output?

Javascript

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

A 20

B TypeError

C ReferenceError

D undefined

💡 Hint

Variables declared with let are block-scoped.

The variable 'y' is declared inside the if block with let, so it is not accessible outside that block, causing a ReferenceError.

❓ Predict Output

expert

Output of closures with loop and var

What will be the output of this code when calling all functions in the array?

Javascript

function createFunctions() {
  var funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(function() {
      return i;
    });
  }
  return funcs;
}
const functions = createFunctions();
const results = functions.map(f => f());
console.log(results);

A [0, 1, 2]

B [0, 0, 0]

C [undefined, undefined, undefined]

D [3, 3, 3]

💡 Hint

var is function-scoped and the loop variable is shared across all closures.

All functions share the same 'i' variable, which after the loop ends is 3. So each function returns 3.

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