JavaScript Scope — Part I

Pedro Köhler
3 min readMar 29, 2020

While learning JavaScript, one may find the term scope being used all around.

If you’re not an experienced programmer, it’s likely you already have an idea of what that means, but you’re probably not sure.

This is actually a very deep subject, so we’re only gonna brush over it.

What is Scope?

Simply put, when we talk about scope in JavaScript, we mean the set of rules for storing and later finding variables.

A second meaning for scope is where we store and find a given variable.

So, basically we’re dealing with three questions:

  • what are the rules for storing a variable?
  • what are the rules for looking for a given variable?
  • how exactly do we organize these scopes?

Storing a variable

When we declare a variable in JavaScript we’re telling JavaScript to store its name and value to use it later.

So, by writing

let myVar;

we’re telling JavaScript something like:

“Hey, can you please prepare me a variable labeled myVar?”

Now, based on author-time code and on the declaration keyword, JavaScript knows where he’s gonna keep this variable to find it in the future.

In other words, JavaScript knows the scope where to store the variable.

Let’s call it the current scope.

JavaScript will first look to see if it can already find a variable labeled myVar in the current scope.

With let or const declarations, if it finds one, it’s gonna throw a SyntaxError, with var it’ll simply stop there.

On the other hand, if JavaScript looks and finds no other variable with that same label at the current scope, it proceeds doing as asked and creates a new variable labeled myVar inside the current scope.

Finding a variable

What is it good for storing something and not knowing where you stored it?

In order to find a variable you declared previously, JavaScript must know where to look.

This happens whenever you access the variable’s value or when you change it.

So, by writing

myVar = 4;
//or
console.log(myVar);

we’re telling JavaScript something like:

“Hey, do you remember that myVar variable I told you about? Go and change its value to 4.”

in the first case, or, in the second case:

“Hey, remeber myVar? Tell me its value so that I can pass it to console.log

Even though behind the scenes these two statements behave differently, in both cases, the rules to find the variable myVar are the same:

First, JavaScript will look in the current scope.

If it can’t find it there, it’ll look in the outer scope, and then its outer scope, and so on, until it reaches the global scope.

The global scope is simply the outermost scope. It has no further reference for any other scope.

Defining a Scope

So far you’ve probably been confused about the fact that some scopes are inside, others are outside. Such a mess…

How are these scopes defined? What do we mean when we say a scope is inside another? What’s going on here?!

Think of these scopes as closed boxes.

You can always fit another box inside a box you have, as long as the inner box is smaller than the outer box.

In the case of scopes, though, size doesn’t matter.

But just like closed boxes inside one another, a given box can only be directly inside a single different box.

There’s no way a box can be directly inside two other boxes simultaneously.

It could be inside a box that is inside another box, but it could never be inside a box and inside another box that is not completely inside the first one.

Another thing about boxes is that a closed box can’t just be partially inside another closed box. It’s either all-in or nothing. The same goes for scopes.

Nerdy Drake disapproves the impossible box-inside-box Scenario #1 while Scenario #2 pleases him, as it’s physically possible

But you might be saying

“Ok I, get this box analogy. But how the heck are these scopes formed in JavaScript? What constitutes a box in this analogy?”

And that’s a great question that deserves a post on its own. So check out part II for the answer!

Meanwhile you can checkout my other content on JavaScript and Node.js!

--

--

Pedro Köhler

Full stack web developer specializing in JavaScript