TechCamp Pro
Confused about JavaScript Scope? Learn the differences between Global Scope, Function Scope, Block Scope, and Lexical Scope with simple examples, interview tips, and best practices.
Muhammad Ali
Full Stack Developer
Occasional notes on code, craft, and things I break along the way. No spam — unsubscribe anytime.
Written by
Muhammad Ali
Full Stack Developer
Scope defines where variables and functions can be accessed in your code.
Have you ever seen an error like this?
console.log(name);
// ❌ ReferenceError
Or wondered why a variable works inside one function but not another?
The answer lies in JavaScript Scope.
Scope determines where a variable or function can be accessed within your code. Understanding scope is essential for writing clean, predictable, and bug-free JavaScript applications.
In this guide, we'll explore the four main types of scope in JavaScript with practical examples.
Scope defines the accessibility or visibility of variables, functions, and objects in different parts of your program.
In simple words:
Scope answers the question: "Where can I use this variable?"
JavaScript has four main types of scope:
Let's understand each one.
A variable declared outside any function or block belongs to the Global Scope.
Example:
const website = "TechCampPro";
function showWebsite() {
console.log(website);
}
showWebsite();
console.log(website);
Output
TechCampPro
TechCampPro
Since website is globally scoped, it can be accessed anywhere in the program.
Using too many global variables can:
❌ Bad Example
let user = "Ali";
Imagine another file also creates:
let user = "Ahmed";
Now your application may behave unexpectedly.
Variables declared with var, let, or const inside a function are only accessible within that function.
Example:
function greet() {
const message = "Hello!";
console.log(message);
}
greet();
console.log(message); // ❌ ReferenceError
Output
Hello!
ReferenceError
The variable message exists only while the function is executing.
A block is any code enclosed in curly braces {}.
Variables declared with let and const are block-scoped.
Example:
if (true) {
let age = 25;
const city = "Lahore";
console.log(age);
console.log(city);
}
console.log(age); // ❌
console.log(city); // ❌
Output
25
Lahore
ReferenceError
ReferenceError
The variables only exist inside the block.
var?Unlike let and const, var ignores block scope.
Example:
if (true) {
var language = "JavaScript";
}
console.log(language);
Output
JavaScript
This is one reason modern JavaScript prefers let and const.
Lexical Scope means that a function can access variables from its outer scope.
Example:
const language = "JavaScript";
function outer() {
const framework = "React";
function inner() {
console.log(language);
console.log(framework);
}
inner();
}
outer();
Output
JavaScript
React
The inner() function can access variables from its own scope and all outer scopes.
This behavior is called Lexical Scope.
When JavaScript looks for a variable, it follows the Scope Chain.
Example:
const company = "TechCampPro";
function one() {
const course = "JavaScript";
function two() {
const lesson = "Scope";
console.log(company);
console.log(course);
console.log(lesson);
}
two();
}
one();
JavaScript searches in this order:
Current Scope
↓
Parent Scope
↓
Global Scope
If the variable isn't found anywhere, JavaScript throws a ReferenceError.
const apiUrl = "https://api.example.com";
function fetchUsers() {
const endpoint = "/users";
console.log(apiUrl + endpoint);
}
fetchUsers();
Here:
apiUrl is global.endpoint exists only inside fetchUsers().Closures work because of Lexical Scope.
Example:
function createCounter() {
let count = 0;
return function () {
return ++count;
};
}
const counter = createCounter();
console.log(counter());
console.log(counter());
console.log(counter());
Output
1
2
3
The returned function remembers the count variable even after createCounter() has finished executing.
if (true) {
let x = 10;
}
console.log(x);
Result:
ReferenceError
var Instead of letfor (var i = 0; i < 3; i++) {}
console.log(i);
Output
3
With let:
for (let i = 0; i < 3; i++) {}
console.log(i);
Output
ReferenceError
✅ Use const by default.
✅ Use let only when a variable needs to change.
✅ Avoid var in modern JavaScript.
✅ Keep variables in the smallest possible scope.
✅ Minimize global variables.
If an interviewer asks:
What is Scope in JavaScript?
You can answer:
Scope defines where variables and functions are accessible in a program. JavaScript provides Global Scope, Function Scope, Block Scope, and Lexical Scope. Variables declared with
letandconstare block-scoped, whilevaris function-scoped. Lexical Scope allows inner functions to access variables from their parent scopes.
let and const create block-scoped variables.var is function-scoped and ignores block boundaries.JavaScript Scope is one of the core concepts every developer should master. Whether you're building web applications, debugging issues, or preparing for interviews, understanding how variables are scoped will help you write safer and more maintainable code.
Once you understand Scope, concepts like Closures, Execution Context, and Hoisting become much easier to understand.