How Scope Works & Why You Should Care

Scope is one of those nasty components of programming which makes all the difference between a lifetime of misery as a programmer and a lifetime of misery but about things other than scope as a programmer. But in laymen's terms, scope boils down to defining where you can access data in your codebase.

I'll say that again.

Scope comes down to where data can be accessed in your codebase.

Why does that matter? Well, imagine a real world-scenario. Let's say that the codebase is your house, the data are things in your house, and the scope is where those things are stored in your house.

If everything in your house could be stored and accessed anywhere else in your house, you'd soon have an incredibly messy, disorganized house where it would take forever to find and use anything. Imagine a house where you have toothbrushes in your silverware drawer, underwear in your couch cushions, and artwork in your dresser. What a mess, right? Living there would soon become untenable.

🤫 Side note

If your house is actually like this,

• I feels it
• Marie Kondo can save you.

ANYWAY.

The same principle of an organized, accessible house, goes for scope.

If all my data was accessible everywhere in my program, I'd quickly have a mess of exposed variables that I'd have to spend hours searching for to use, and a completely overwhelmed garbage collector which wouldn't be able to keep track of what matters and what doesn't. It's not that it's impossible to have everything in the global scope, it's just that its a really bad idea.

There are three common types of scope in JS:

• Local
• Global
• Block Scope.

Global Scope

Global scope allows data (stored in a variable) to be accessed anywhere in your program. It can also be changed anywhere in your program so honestly its a pretty terrible idea to use global variables unless you're by default, declaring them with CONST so they can't be changed. You can make data global by setting it to a variable outside of a function. You can only use var and const to declare global variables.

const someStuff = "things"

console.log(someStuff)
>> "things"

function sayStuff(){
  console.log(someStuff);
};

sayStuff()
>> "things"

As you can see, this globally scoped variable, someStuff, is accessible inside and outside of any function in my program.

Local Scope

Local scope allows data to be accessed anywhere INSIDE the function in which it was declared. The variable is still mutable, but since the variable is tied to it's function, it won't affect your entire program in unforeseen, horrific ways. Once the function finishes firing, the variable and the data contained within it are garbage collected and are no more; until you call said function again.

function sayHello(){
  var greeting = "Hello!"
  console.log(greeting);
}

sayHello()
>>"Hello!"

console.log(greeting)
>> ReferenceError: greeting is not defined

So, we can see here that the variable greeting exists only inside the function sayHello() as that is where I define it; once I tried to call the variable outside of the function; it no longer existed. So we can say var greeting is LOCALLY scoped to the function sayHello()

Block Scope

Last but not least is block scope. Data created inside a block scope are only available inside the block of the function in which they were created. This is great when you have short-term data you want to use in only very specific cases; like if an if statement returns true.

function rememberMe(name){
  if(name.includes("Akira")){
    let recognition = `Omg, hi, ${name}! I remember you!`
    console.log(recognition);
  } else {
    let recognition = `I'm sorry, I don't remember you, ${name}...`
    console.log(recognition)
  };
}

As you can see here, the let keyword let me use the variable name recognition only within its block. After the first block ended, I could set a new block variable with let and the same variable name of recognition, because JavaScript's garbage collector wiped out that block variable after the block finished firing. So, here the variables let recognition were BLOCK scoped to their particular block.

side note: a block is a fancy way to say anything between a pair of curly braces.

So, there you have it! Scopes demystified.

Drop a comment or a correction below, I'm happy to hear constructive feedback!