The Scoop On Scope (In JavaScript) 
Tags: javascript, beginners, fundamentals, functional
Published: 2019-12-18 17:37:01

*By Carmen Salas*


Scoping in JavaScript refers to what variables your program has access to at any given moment in time. So let’s start scooping into this scope stuff...

### What are the different types of scopes?
- Global scope
- Function scope 
- Block scope 

By default, when coding in JavaScript, you start in the *window scope* or the *root scope*. This is the *global scope*. This means there is only one global scope in a JS document. 

### Global Variables
Declaring a variable outside of a function is creating a *global* variable. Global variables have a global scope. Variables in the global scope can be accessed anywhere else in your program, in any other scope.  

### Local Variables
Unlike global variables, *local variables* are only available inside an enclosed part of your program such as a function or block scope, like *if statements* or *loops*. A local variable has a local scope..

```javascript

let globalVar = "This is a global variable";

console.log(globalVar);  
// This will log  ‘This is a global variable’

function localScope () {
let localVar = "This is a local variable";

console.log(localVar); 
// This will log ‘This is a local variable’
console.log(globalVar); 
// This will log  ‘This is a global variable’
}

console.log(localVar); 
// This will throw an error: ReferenceError: LocalVar is not defined

```
If you run this code, the global variable `globalVar` can be accessed inside the function `localScope`. However, the local variable `localVar` can only be accessed in the scope of the function `localScope` and not in the global scope.

You can think of local scopes as a diary. Pretend you are a child keeping a diary (a local scope). You can write whatever you want inside of your diary (i.e. create as many variables as you want in a function), and name events that took place outside of your diary (accessing global variables outside of your function or calling other functions). However, no one else can look inside your diary, ESPECIALLY not your parents...cough...cough...**GLOBAL SCOPES**. Similar to how a parent is not able to look inside a child’s diary, you are not able to access local variables in the global scope. 

### Function Scope
If you declare a variable inside of a function, the variable can only be accessed within that function creating a function scope.

```javascript
function myMoney (){
    let me = "This is my money"
    console.log(me); 
//This logs "This is my money"
}

function yourMoney (){
    let you ="This is your money"
     console.log(me); 
//This will throw an error: ReferenceError: me is not defined
}

```
If you run this code, the variable `me` in the function `myMoney` is not accessible in the function `ourMoney`. When console logging `me` in `yourMoney`, an error is thrown.
Functions do not have access to each other’s scopes.

### Block Scope 
If you declare a variable inside curly brackets `{ }` like in an `if` statement or `for` loop, you are creating a block scope. 

### Variable Keywords 
Variables declared with the keywords `let` or `const` have a **block scope**.
Variables declared with the keyword `var` have a *function scope*. Variables declared with `var` can only be accessed within the function where they were declared (or globally, if they were declared in the global scope). `Var` only has a *local scope* when declared inside a function, meaning if a variable is declared within a block, it can be accessed outside of that block. 

```javascript
if(true){
let blockScope = "unavailable"   
var onlyFunctionScope = "available"
}

console.log(blockScope); 
//This will throw an error: ReferenceError: BlockScope is not defined
console.log(onlyFunctionScope); //This will log 'avaialable'

```
If you run this code, only the `var` keyword variable will log its value outside of the block scope of the `if` statement. This does not happen with the variable `blockScope` because it was declared with the keyword `let`. 

However, 

```javascript
function varScope(){
var onlyFunctionScope = "available"

console.log(onlyFunctionScope);
}
console.log(onlyFunctionScope); 
// This will throw an error: onlyFunctionScope is not defined 

```

If you run this code, the variable `onlyFunctionScope` is not available outside of the function `varScope` because it was declared with `var` and this is a function scope keyword. 

*In conclusion*, creating a new function or block statement (anything with curly brackets `{}`), you are creating a new scope. Overall, gaining an understanding of how scoping works in JavaScript, will help you track bugs and help you avoid creating collisions. Understanding variables and their scope will allow you to create more efficient programs that are properly named. You will be better at declaring variables and choosing what variables will go where. When creating the same *global variable* twice in a large program, you can easily run into bugs, but thanks to *local scopes*, you do not have to rely on global scopes to store data. Which can be confusing in the long run or when working on larger projects.