How Scope Works & Why You Should Care
Tags: javascript, beginners, computerscience
Published: 2020-09-22 22:07:46

---
title: How Scope Works & Why You Should Care
published: true
description: Scope is weird until it isn't. Let's discover.
tags: javascript, beginners, computerscience
cover_image: https://cdn.pixabay.com/photo/2016/11/29/12/23/binoculars-1869456_1280.jpg
---

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](https://shop.konmari.com/collections/books/products/the-life-changing-magic-of-tidying-up-1) 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. 

```javascript
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. 

```javascript
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. 

```javascript
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!