Function scope in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable inside the function scope.

Javascript

function greet() {
  let [1] = 'Hello';
  console.log(greeting);
}
greet();

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

AsayHello

Bmessage

Cgreet

Dgreeting

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name different from the one logged.

Declaring the variable outside the function.

The variable greeting is declared inside the function using let. This means it is only accessible within the function.

2fill in blank

medium

Complete the code to access a variable declared outside the function.

Javascript

let name = 'Alice';
function sayName() {
  console.log([1]);
}
sayName();

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

Aname

BName

Cuser

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name with wrong capitalization.

Trying to access a variable not declared in scope.

The function can access the variable name declared outside because of JavaScript's scope chain.

3fill in blank

hard

Fix the error in the code by completing the blank with the correct variable name.

Javascript

function test() {
  let score = 10;
  if (true) {
    let score = 20;
    console.log([1]);
  }
  console.log(score);
}
test();

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

Ascore

BScore

Cscor

Dscores

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect capitalization.

Trying to access a variable that does not exist.

Both score variables are valid but in different scopes. Inside the if-block, score refers to 20, outside it refers to 10.

4fill in blank

hard

Fill both blanks to create a function that returns the sum of two numbers.

Javascript

function add([1], [2]) {
  return a + b;
}
console.log(add(3, 4));

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

Aa

Bb

Cx

Dy

Attempts:

3 left

💡 Hint

Common Mistakes

Using parameter names different from those in the return statement.

Swapping the order of parameters.

The function parameters must be a and b to match the return statement a + b.

5fill in blank

hard

Fill all three blanks to create a function that updates a variable inside its scope and logs it.

Javascript

function update() {
  let count = 0;
  count [1] 5;
  console.log([2]);
  return [3];
}
update();

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

A+=

Bcount

D-=

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong operator like -=.

Logging or returning a variable not declared.

The operator += adds 5 to count. Then count is logged and returned.

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