Techie BabajiLearn to Code. Build Real Skills.
JavaScript · How JavaScript Works

Scope

Scope decides where a variable can be seen. Think of it as rooms in a house: you can see out into the hallway, but people in the hallway cannot see into your room.

Beginner 5 min Lesson 18 of 49 Runnable examples
Before you start:Functions
0/49 in JavaScript
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 27, 2026

Related tutorials

Interview questions

Learning objectives#

  • Distinguish global, function and block scope
  • Explain the scope chain
  • Recognise shadowing
  • Avoid polluting the global scope

Explanation#

Global scope: variables declared outside any function or block are visible everywhere.

Function scope: variables declared inside a function exist only inside it.

Block scope: let and const declared inside { } (an if, a loop, or a bare block) exist only inside those braces.

When code looks up a name, JavaScript searches the current scope, then the outer one, and so on — the scope chain. An inner variable with the same name “shadows” the outer one.

Code example: Rooms in a house#

JavaScriptRooms in a house Runnable
const site = 'Techie Babaji';           // global


function showScope() {
  const lesson = 'Scope';              // function scope
  if (true) {
    const tip = 'Blocks have scope too'; // block scope
    console.log(site, '|', lesson, '|', tip);
  }
  // console.log(tip);  // ReferenceError: tip is not defined
}
showScope();


let x = 'outer';
{
  let x = 'inner';                     // shadows the outer x
  console.log(x);
}
console.log(x);
console.log(typeof lesson);
Expected output
Techie Babaji | Scope | Blocks have scope too
inner
outer
undefined
Opens this example in the full playground

Step-by-step explanation#

  1. Inside the block, all three variables are visible because the scope chain looks outward.
  2. tip disappears when the if block ends.
  3. The inner x hides the outer x only inside its braces.
  4. lesson only exists inside showScope, so outside it is undefined.

Real-world use case#

Keeping helper variables inside functions prevents two scripts on the same page from accidentally overwriting each other’s data.

Common mistakes#

Accidental globals

Assigning to an undeclared name (count = 1) creates a global in non-strict code. Always declare with let or const.

Expecting block variables outside the block

A const declared inside an if is gone after the closing brace.

Best practices#

  • Declare variables in the smallest scope that needs them
  • Avoid global variables
  • Use ES modules — each module has its own scope
  • Avoid confusing shadowing by choosing distinct names

Remember this#

Inner rooms can see outward; outer rooms cannot see inward.

let/const live inside the nearest { }.

Same name inside? The inner one wins (shadowing).

Practice exercise#

Your task: Predict the output, then run it: let a = 1; function f() { let a = 2; return a; } console.log(f(), a);

Show solution
JavaScript Runnable
let a = 1;
function f() { let a = 2; return a; }
console.log(f(), a); // 2 1
Opens this example in the full playground

Mini quiz#

Scope quizMultiple choice Question 1 of 1

Where can a const declared inside a for loop’s body be used?

Score so far: 0/0

Want more? Practise all JavaScript MCQs · JavaScript interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.