Day 11 — Scope and Closures (How JavaScript Remembers Things)

“Closures are one of those concepts that feel confusing until suddenly they feel obvious.”

If Day 10 was about understanding that functions are values, Day 11 is about understanding what happens around those functions. More specifically, how JavaScript handles variables, memory, and access to data.

This is the point where JavaScript starts feeling less like a scripting language and more like a system with rules happening behind the scenes.

Most beginners can write functions without understanding scope. And honestly, that works for a while. But eventually you run into situations where variables behave unexpectedly. Sometimes a variable is accessible. Sometimes it is not. Sometimes a function remembers values even after it has finished executing.

That behavior is not random.

It comes from two important concepts: scope and closures.

Understanding Scope

Scope determines where a variable can be accessed from. In simple terms, it answers this question:

“Which parts of the program are allowed to see this variable?”

Consider this example:

let message = "Hello";

function greet() {
  console.log(message);
}

greet();

The function can access message even though the variable was created outside the function.

Why?

Because the function exists inside the surrounding environment where message was already defined.

Now look at this:

function greet() {
  let name = "Alex";
  console.log(name);
}

greet();

console.log(name);

This throws an error.

The variable name only exists inside the function. Outside the function, JavaScript has no idea what name refers to.

That boundary is scope.

Global Scope vs Local Scope

Variables created outside functions belong to the global scope.

let appName = "My App";

Global variables can usually be accessed from almost anywhere in your program.

Variables created inside functions belong to local scope.

function test() {
  let secret = "Hidden";
}

That variable stays trapped inside the function.

This separation is important because it prevents different parts of your application from interfering with each other accidentally.

Imagine if every variable in a large application existed globally. Managing code would become chaos very quickly.

Block Scope

JavaScript also has block scope.

A block is anything inside curly braces.

if (true) {
  let age = 25;
  console.log(age);
}

console.log(age);

This throws an error because age only exists inside the block.

This is one of the reasons let and const are preferred over var.

var behaves differently:

if (true) {
  var city = "Delhi";
}

console.log(city);

This works, even though the variable was declared inside the block.

That behavior caused a lot of confusion in older JavaScript code, which is why modern JavaScript mostly avoids var.

Lexical Scope

Now things get more interesting.

JavaScript determines scope based on where functions are written, not where they are executed.

This concept is called lexical scope.

function outer() {
  let message = "Hello";
  function inner() {
    console.log(message);
  }
  inner();
}
outer();

The inner function can access message because it was created inside the outer function.

Even though message belongs to another scope, JavaScript allows access because of the surrounding structure of the code.

This idea becomes the foundation of closures.

What Is a Closure?

A closure happens when a function remembers variables from its outer scope even after that outer function has finished executing.

That sounds complicated at first, but the example makes it clearer.

function outer() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}
const counter = outer();
counter();
counter();
counter();

The output becomes:

1
2
3

This surprises many beginners.

The outer function already finished running. So why does the inner function still remember count?

Because the returned function forms a closure around the variables it needs.

JavaScript keeps those variables alive in memory.

That is the core idea of closures.

Why Closures Matter

At first, closures can feel like a strange language trick. But they solve real problems.

Closures allow functions to:

• remember state
• create private variables
• preserve data between executions
• build reusable abstractions

Modern JavaScript frameworks rely heavily on closures behind the scenes.

Even features like hooks in React are deeply connected to closure behavior.

A Better Way to Think About Closures

Beginners often try to memorize closure definitions, but that usually makes the topic feel harder.

A simpler way to think about it is this:

“A closure is when a function remembers the environment where it was created.”

That is really what is happening.

The function carries a reference to surrounding variables even after the outer function is gone.

Common Beginner Confusion

One of the most confusing parts about closures is that variables are not copied.

They are referenced.

Consider this:

function outer() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}
const counter1 = outer();
const counter2 = outer();
console.log(counter1());
console.log(counter1());
console.log(counter2());

The output becomes:

1
2
1

Each function gets its own separate closure and its own independent memory.

That distinction is extremely important.

Scope Chain

When JavaScript tries to find a variable, it searches outward step by step.

let globalVar = "Global";

function outer() {
  let outerVar = "Outer";

  function inner() {
    let innerVar = "Inner";

    console.log(innerVar);
    console.log(outerVar);
    console.log(globalVar);
  }

  inner();
}

outer();

The inner function checks:

• its own scope
• then the outer function’s scope
• then the global scope

This process is called the scope chain.

Why This Topic Feels Difficult

This is one of the first JavaScript topics that is not entirely visual.

You are now dealing with how the language behaves internally. Memory, environments, references, execution context. These are invisible systems happening underneath your code.

That is why closures feel confusing initially.

The important thing is not memorizing every edge case. It is slowly building intuition.

The more you experiment with nested functions and variable access, the more natural this becomes.

Try This Yourself

Experiment with closures directly.

function createGreeting(name) {
  return function () {
    console.log("Hello " + name);
  };
}

const greetAlex = createGreeting("Alex");

greetAlex();

Now try:

• changing the variable
• creating multiple closures
• storing returned functions in arrays or objects

The more you play with closures, the less mysterious they feel.

Why This Matters

Scope and closures are not “advanced topics you rarely use.”

They are foundational concepts in JavaScript.

Event listeners rely on closures. Callbacks rely on closures. Asynchronous code relies on closures. Frameworks rely on closures.

Without understanding closures, JavaScript eventually starts feeling unpredictable.

With understanding, the language suddenly becomes far more logical.

What’s Next?

In the next article, we’ll explore one of the most misunderstood concepts in JavaScript: the this keyword.

“Because in JavaScript, what this refers to depends entirely on how a function is called.”

See you in Day 12.