Scope In JavaScript
Tags: javascript, tutorial
Published: 2023-12-01 19:21:35

**_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.


![Diagram displaying each Scope](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w24m1lhqymvep15ygw7z.jpg)

**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