JavaScript Scope Explained
Global, Local, and Block-Level Scope

Understanding Scope in JavaScript

Scope in JavaScript determines the visibility and accessibility of variables. Knowing where and how your variables are accessible is essential for writing clean, bug-free code.

JavaScript primarily deals with three types of scope:

• Global Scope
• Local (Function) Scope
• Block Scope

Global Scope

Variables declared outside of any function or block are in the global scope. They can be accessed from anywhere in the code.

let name = "JavaScript"; // global variable

function greet() {
  console.log("Hello, " + name);
}

greet(); // accessible
console.log(name); // also accessible

Hello, JavaScript
JavaScript

Local Scope (Function Scope)

When you declare a variable inside a function using var, let, or const, it's local to that function. You cannot access it outside the function.

function showAge() {
  let age = 30;
  console.log("Age is: " + age);
}

showAge();
console.log(age); // ReferenceError

Age is: 30
ReferenceError: age is not defined

Block Scope

Block scope is created using curly braces { }. Only let and const support block-level scope. var does not respect block boundaries.

{
  let blockLet = "Scoped with let";
  const blockConst = "Scoped with const";
  var blockVar = "Function or Global Scoped";
  console.log(blockLet);   // accessible
  console.log(blockConst); // accessible
  console.log(blockVar);   // accessible
}

console.log(blockVar);   // accessible
console.log(blockLet);   // ReferenceError
console.log(blockConst); // ReferenceError

Scoped with let
Scoped with const
Function or Global Scoped
Function or Global Scoped
ReferenceError: blockLet is not defined
ReferenceError: blockConst is not defined

How var, let, and const Differ in Scope

var is function-scoped, while let and const are block-scoped. This difference becomes crucial in loops and conditions.

Example: Using var in a for loop

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

3
3
3

Why? Because var is function-scoped — the same variable i is used in each iteration.

Example: Using let in a for loop

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

0
1
2

Why? Because let is block-scoped — a new i is created for each iteration.

Nested Scopes

Functions can access variables from their outer scope. This is called lexical scoping.

let language = "JavaScript";

function outer() {
  let framework = "React";

  function inner() {
    console.log("Language: " + language);
    console.log("Framework: " + framework);
  }

  inner();
}

outer();

Language: JavaScript
Framework: React

Shadowing in JavaScript

Shadowing occurs when a variable in a local scope has the same name as one in an outer scope. The local variable shadows the outer one.

let value = 100;

function test() {
  let value = 200; // shadows outer 'value'
  console.log(value);
}

test();
console.log(value);

200
100

Global Pollution and Best Practices

Declaring too many global variables can cause conflicts — especially when integrating multiple scripts. To avoid this:

• Use let and const instead of var
• Encapsulate code in functions or IIFEs
• Use modules (ES6+)

Immediately Invoked Function Expressions (IIFE)

An IIFE is a function that runs immediately, creating its own local scope:

(function () {
  let secret = "hidden";
  console.log("Inside IIFE");
})();
console.log(secret); // Error

Inside IIFE
ReferenceError: secret is not defined

Conclusion

Mastering scope in JavaScript isn’t just about avoiding errors — it’s about designing better logic, writing safer code, and being in full control of variable access. Whether you’re debugging a tricky bug or architecting a new feature, understanding how scope works will always give you the upper hand.

Explore scope. Control visibility. Write smarter code.