Pack Your Things

episode 01

#Introduction

Introduction illustration

A journey to understand closures without losing your mind.

Hey, it’s you again

Everyone has heard about Closures at least once, especially those who have been working with JavaScript for years.

If you are new, don’t panic!

You probably use Closures in your daily life without noticing it, even if you don’t know exactly what they are or how they work.

We are going to cover Closures in a very friendly and challenging way. We are going to start a tour that will naturally lead us to an understanding of Closures.

If the concept of Closure is not new to you, this tour might be helpful as well. We are going to clarify some vague concepts and understand how it works under the hood.

What will you learn

  • 01 - Introduction - Pack Your Things

    • We set the stage for the journey ahead.
  • 02 - How JavaScript Executes Code - Clear Blue Sky

    • A basic look at how JavaScript runs code through the Global Execution Context, Global Memory, and the Thread of Execution.
  • 03 - Execution Context - Multiverse

    • We explore how function calls create new execution contexts, using Local Memory and the Call Stack to manage them.
  • 04 - Lexical Scope - Hide and Seek

    • We learn how block, function, and global scope determine what data is accessible in different parts of the code.
  • 05 - Closures - The Last Piece

    • All the concepts come together as we discover how closures emerge from the lexical environment.

Grandma-Tested

Getting somewhere isn’t only about the destination — it’s also about the journey. Climbing a mountain in a straight line isn’t the same as reaching the summit through a longer, more comfortable path. This journey through JavaScript is meant to follow that gentler route, uncovering how things work step by step until closures feel natural.

My hope is that by the end of this journey, you’ll become a guide — someone who can show others the way and explain how to get there. That’s the reason why we are going to use mental models and diagrams to make it easier to explain deep technical concepts, as if we were talking to our grandma.

We are going to enjoy our way to Closures, but it won’t be a bed of roses 🌹.

  • During the journey, it’s possible that some concepts are not exactly how we learned or expected them to be—and that’s okay.
  • Also, some questions might arise. I promise that in 99.99% of cases, those questions will be gone by the end of our journey. Be patient—this is part of the process.

The mistery

We’re not going deep into this yet. This is just to show you the tip of the iceberg. The mistery that sorrounds Closures. Don't worry if you get lost, this example is meant to spark curiosity.

Read this code:

function createTreasure() {
  let coins = 1;
 
  function addCoin() {
    coins = coins + 1;
  }
 
  addCoin();
  console.log(coins); //??
}
 
createTreasure();

Let’s make a bet. What do you think is the output of the console.log after running the code above?

Answer
Don’t reveal until you have your answer.
Answer

The console output is 2.

  1. [...]
  2. The variable coins it's initialized with the numeric value 1.
  3. After calling addCoin function, the coins variable is increased by one, since coins + 1 equals to 1 + 1, which evaluates to 2.
  4. The variable coins now has the value 2.

Maybe you think the answer is pretty obvious. Or you might be surprised that JavaScript didn’t throw an error when trying to access the variable coins. But we have just seen that JavaScript can actually access the coins variable—now the question is: how?

How does the addCoin function acces the coins variable?

  • Is it because addCoin is running inside of createTreasure?

    Or

  • Is it because addCoin is defined inside of createTreasure?

Or maybe neither of the above options are right?

To answer correctly, we need a solid understanding of how JavaScript works. And to be able to explain it to someone else, the precision of the technical language we use is key.

That’s exactly what we are trying to achieve with this journey. We want to give you the tools to understand—and by extension, to explain—JavaScript code.

You can jump directly to the final Closures episode if you feel you already know these concepts well:

  • Call Stack
  • Thread of Execution
  • Lexical Environment
  • Global Execution Context
  • Function Execution Context
  • Block, Function and Global scope

But I highly recommend you to take the whole way to Closures specially if some of these concepts are new or not clear enough to you.

Let’s start our way. Pack your things, and I’ll see you in the next episode when you’re ready.