Scope In JavaScript

Introduction 
To understand Scopes, we need to understand some fundamentals. You need to have an idea of what and how variables work. A variable is a tool that we use to store a value to be used later on in our code. Then we need to initialize our variables. We have to follow a two-step procedure.
Our first step is to declare our variable, and our second step is to assign it a value. We can do this by utilizing our reserve words let, const, and our black sheep var. let is not going to allow us to redeclare our variable, but will allow you to reassign its value. const is more strict, not allowing our variable to be redeclared or its value to be reassigned. var is outdated and is bad practice to use in current code. While it used to be the main way to declare variables, it causes issues in the Scope and leads to unpredictable bugs within our code. You will mainly see this used in legacy codes. This understanding is extremely important to achieving anything in JavaScript.
With our new knowledge of variables, we can move on to our Scopes. Scopes are the areas in our code where variables are located. This will affect how that variable can be accessed and used.

Types of Scopes

1. Global Scope
2. Function Scope
3. Block Scope

Scope Breakdown

1. Global Scope 
   This variable is declared outside of any function and is typically found at the top of our code. We can also access this variable from anywhere in our code. This is because of the Scope Chain (I'll explain this further in the blog).

2. Function Scope
   This is a variable declared within a function and is only accessible within that same function. This is also known as our Local Scope, which contains local variables (variables located inside a function). These two categories of scope go hand-in-hand.
   Knowledge Nugget: Since each function creates a new Scope, variables with the same name can be used in different functions.

3. Block Scope
   This is a variable declared inside of a block { } and cannot be accessed outside the block.
   Knowledge nugget: JavaScript had only Global Scope and Function Scope prior to ES6 (2015).ES6 created two new important JavaScript declarations: let and const. These two declarations enable us to use Block Scope in JavaScript.

Scope Chain 
Every Scope works in a chain. Meaning in a sequence, these Scopes are organized with the nested function's Scope inheriting from its surrounding Scope as its parent, and name searches progress up the Scope chain from the child to the parent.

Global Scope

• accessible in every Scope

Function Scope

• accessible within the function
• specific to a single function
• can't be accessed by anything in the outer Scopes

Block Scope

• accessible within the block
• specific to a single block
• can't be accessed by anything in the outer Scopes

Conclusion
Understanding the fundamentals of variable declaration, assignment, and the distinctions between let const, and var is crucial. The learning placement of these fundamentals paves the way for delving into the three essential Scopes: Global, Function, and Block.
The Global Scope, normally placed outside functions, allows accessibility throughout the entire code. While the Function Scope confines variables within specific functions, creating distinct Scopes for each function, the Block Scope follows in the same footprints as the Function Scope but for block variables only.
The Scope Chain provides a flow of how our Scopes should behave not only alone but with one another. Providing an order in how variables may interact with their surrounding Scopes and guiding name searches from child to parent.
Once we tackle and conquer our fundamentals, the rest comes with ease. Just remember the flow of code, and Scope will come naturally. Many coders are using each Scope without even realizing it!

Resources

General variable explanations

• https://github.com/learn-co-curriculum/phase-0-pac-1-js-variables
• https://github.com/learn-co-curriculum/phase-1-lecture-videos-scope

General scope explanations

• https://www.w3schools.com/js/js_scope.asp
• https://github.com/learn-co-curriculum/phase-1-scope-readme

Knowledge nugget in Block and Function Scope sections

• https://www.w3schools.com/js/js_scope.asp

Scope chain

• https://github.com/learn-co-curriculum/phase-1-scope-chain-readme
• https://github.com/learn-co-curriculum/phase-1-lecture-videos-scope