Function Scope vs Block Scope in JavaScript

Function Scope vs Block Scope in JavaScript: Explained with Examples

What is Variable Scope?

The scope of a variable refers to its lifetime, visibility, or availability within code.

If a variable is declared inside a function, it is available only within that function (local scope).
If declared outside any function, it becomes a global variable and can be accessed by all functions.

Example: Function Scope

function A() {
var x = 10;
console.log(x); // Accessible here
}

function B() {
console.log(x); // Error: x is not defined
}

Here, variable x exists only inside function A. Trying to access it in function B throws an error.

Function Scope in JavaScript

Before ES6, JavaScript only had function scope. This means that variables declared with var are accessible throughout the function, regardless of where they are defined.

This happens because of a concept called hoisting.

Example: Hoisting with var

console.log(x); // undefined (not error)
var x = 10;
console.log(x); // 10

👉 Behind the scenes, JavaScript hoists declarations (not assignments) to the top of the function:

var x; // declaration moved on top
console.log(x); // undefined
x = 10;
console.log(x); // 10

This is why variables declared with var are function-scoped.

text

Block Scope in JavaScript

Introduced in ES6 (ECMAScript 2015), block scope allows variables to exist only within a block (anything inside {}). Variables declared with let or const follow block scope.

Example: Block Scope with let

{
let x = 10;
console.log(x); // 10
}
console.log(x); // Error: x is not defined

Here, x is only available inside the block. Unlike var, variables declared with let and const are not hoisted in the same way.

text

Example: Temporal Dead Zone (TDZ)

console.log(y); // Error: Cannot access 'y' before initialization
let y = 5;

This happens because let and const do not allow access before declaration.

Function Scope vs Block Scope: Comparison Table

Feature	Function Scope	Block Scope
Keyword	Declared with `var`	Declared with `let` or `const`
Visibility	Accessible throughout the function	Accessible only inside the block `{}`
Hoisting	Yes (declarations are hoisted, initialized as `undefined`)	No (exists in Temporal Dead Zone until declared)
Re-declaration	Can be re-declared within the same function	Cannot be re-declared in the same block
Use Case	Legacy code (ES5 and earlier)	Modern JavaScript (preferred)

Common Interview Questions

What is hoisting in JavaScript?
Hoisting is the behavior where variable and function declarations are moved to the top of their scope before code execution.
How does block scope work?
Variables declared with let or const inside a block are only accessible within that block.
What is the scope of a variable in JavaScript?
The lifetime and visibility of a variable, i.e., where it can be accessed in code.

FAQs on Function Scope vs Block Scope

Q1. What is the difference between function scope and block scope in JavaScript?

Function scope applies to variables declared with var, making them accessible throughout the function. Block scope applies to variables declared with let and const, making them available only inside a block.

Q2. Is var function-scoped or block-scoped?

var is function-scoped. It ignores block boundaries (like if-statements or loops).

Q3. Why should we avoid using var?

Because of hoisting and lack of block scope, var can lead to bugs. Use let or const instead.

Q4. What is the Temporal Dead Zone (TDZ)?

It’s the time between entering a block and the variable’s declaration. During TDZ, accessing the variable throws an error.

Q5. Which should I use: var, let, or const?

Always prefer const for values that don’t change, and let for variables that may change. Avoid var in modern JavaScript.

Final Thoughts

Understanding variable scope is essential for writing predictable JavaScript code:

Function Scope (var): Variables are hoisted and accessible throughout the function.
Block Scope (let, const): Variables are limited to the block and safer to use.

👉 Best Practice: Always use let and const in modern JavaScript for better readability and fewer bugs.

Mastering scope and hoisting is crucial for both writing clean code and succeeding in JavaScript interviews.

Function Scope vs Block Scope in JavaScript: Explained with Examples