JavaScript Scope

In the previous lesson, we learned how a function can remember the variables it was created with. Now let’s look at the rule that makes that possible: scope, which decides where each variable is accessible.

🔭 What is Scope?

Scope is the part of your code where a variable can be used. A variable created in one place is not always visible everywhere else. Where you declare a variable decides who gets to see it.

JavaScript has three kinds of scope.

🌍 Global Scope

A variable declared outside every function and block lives in the global scope. Any code in the file can read it.

const appName = "Notes"; // global

function showName() {
  console.log(appName); // ✅ can see the global variable
}

showName(); // Notes
console.log(appName); // Notes

Let’s walk through what this code does:

• const appName = "Notes" sits outside every function, so it lives in the global scope.
• Inside showName, the line console.log(appName) reaches up and reads the global variable without any trouble.
• The call showName() prints Notes, and the final console.log(appName) at the top level prints Notes too, because global variables are visible everywhere.

📦 Function Scope

A variable declared inside a function belongs to that function. Code outside the function cannot see it.

function greet() {
  const message = "Hello"; // function-scoped
  console.log(message); // ✅ Hello
}

greet();
console.log(message); // ❌ ReferenceError: message is not defined

Let’s walk through what this code does:

• const message = "Hello" is declared inside greet, so it is function-scoped and exists only while greet runs.
• console.log(message) inside the function prints Hello, because the variable is visible right where it was created.
• console.log(message) after the call throws a ReferenceError, since outside the function the variable does not exist at all.

🧱 Block Scope

A block is any pair of curly braces, such as the body of an if statement or a loop. When you declare a variable with let or const inside a block, it stays inside that block.

if (true) {
  let count = 1; // block-scoped
  console.log(count); // ✅ 1
}

console.log(count); // ❌ ReferenceError: count is not defined

Let’s walk through what this code does:

• let count = 1 is declared inside the if block, so it is block-scoped to those curly braces.
• console.log(count) inside the block prints 1, because the variable is alive within the block.
• console.log(count) after the block throws a ReferenceError, since the variable disappears the moment the block ends.

The same applies inside a loop. Each variable declared with let or const stays where it was created.

for (let i = 0; i < 3; i++) {
  const doubled = i * 2;
  console.log(doubled); // ✅ 0, 2, 4
}

console.log(i); // ❌ ReferenceError: i is not defined

Let’s walk through what this code does:

• let i is declared in the loop header, so it is scoped to the loop and its body.
• const doubled = i * 2 is created fresh on each pass and lives only inside the loop body, printing 0, 2, then 4.
• console.log(i) after the loop throws a ReferenceError, because i and doubled both vanish once the loop finishes.

🔗 The Scope Chain

Inner scopes can read variables from the scopes around them, but outer scopes cannot read variables from inside. JavaScript looks outward, never inward. This outward search is called the scope chain.

const outer = "I am outside";

function inner() {
  const local = "I am inside";
  console.log(outer); // ✅ inner can read the outer variable
}

inner();
console.log(local); // ❌ outside cannot read the inner variable

Let’s walk through what this code does:

• const outer lives in the global scope, while const local lives only inside inner.
• console.log(outer) works inside inner, because the inner scope can look outward along the scope chain to find outer.
• console.log(local) at the top level throws a ReferenceError, since the outer scope cannot look inward into the function.

When code uses a variable, JavaScript first looks in the current scope. If it is not found there, it moves one level out, then keeps moving outward until it reaches the global scope.

🧠 How Scope Powers Closures

The closures from the previous lesson work because of scope. When a function is created inside another function, the inner function keeps access to the outer function’s variables through the scope chain, even after the outer function has finished.

function makeCounter() {
  let count = 0; // function-scoped

  return function () {
    count++; // ✅ still reaches the outer variable
    return count;
  };
}

const next = makeCounter();
console.log(next()); // 1
console.log(next()); // 2

Let’s walk through what this code does:

• let count = 0 is function-scoped to makeCounter, and the returned inner function reaches it through the scope chain.
• const next = makeCounter() runs the outer function once and stores the returned inner function, which still holds its link to count.
• Each next() call runs count++ and returns the new value, printing 1 then 2, because that one count survives between calls.

The returned function still sees count because scope decides what a function can reach, and that link survives after makeCounter returns.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ Scope is the part of your code where a variable is accessible
• ✅ Global scope is visible everywhere; function scope stays inside the function
• ✅ Block scope keeps let and const variables inside their { }
• ✅ let and const are block-scoped, while var is only function-scoped
• ✅ Inner scopes can read outer variables through the scope chain, but not the reverse
• ✅ Closures work because scope keeps the link to outer variables alive

🚀 What’s Next?

Now that you know where variables live, let’s see how JavaScript moves declarations to the top before your code runs. Let’s continue to Hoisting.