Function scope in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is function scope in JavaScript?

Function scope means variables declared inside a function can only be used within that function. They are hidden from the outside world.

beginner

What happens if you try to access a variable declared inside a function from outside that function?

You get a ReferenceError because the variable only exists inside the function's scope.

beginner

Consider this code:<br><pre>function greet() {<br>  let message = 'Hi!';<br>  console.log(message);<br>}<br>greet();<br>console.log(message);</pre><br>What will happen when running it?

The function prints 'Hi!'. But the last line causes an error because message is not visible outside the function.

beginner

Can variables declared with var inside a function be accessed outside the function?

No. Variables declared with var inside a function are also limited to that function's scope.

intermediate

What is the difference between function scope and block scope?

Function scope limits variables to the whole function. Block scope limits variables to the block (like inside {}) where they are declared, usually with let or const.

Where can a variable declared inside a function be accessed?

A Only inside that function

B Anywhere in the program

C Only inside loops

D Only inside if statements

Variables declared inside a function are only accessible within that function's scope.

What will happen if you try to access a function-scoped variable outside its function?

A It will return the variable's value

B It will create a new variable

C It will print null

D It will cause a <code>ReferenceError</code>

Function-scoped variables are not visible outside their function, so accessing them outside causes a ReferenceError.

Which keyword creates a variable with function scope?

A var

B const

C let

D function

var declares variables with function scope.

What is the scope of a variable declared with let inside a function?

A Global scope

B Function scope

C Block scope inside the function

D No scope

let variables have block scope, so inside a function they are limited to the block they are declared in.

Which of these is true about function scope?

A Variables declared inside a function are accessible outside it

B Variables declared inside a function are hidden from outside

C Function scope only applies to global variables

D Function scope is the same as block scope

Function scope hides variables declared inside a function from outside access.

Explain function scope in JavaScript and how it controls variable visibility.

Think about where you can use variables declared inside a function.

Describe the difference between function scope and block scope with examples.

Consider how variables behave inside functions and inside blocks like if or loops.

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