The different levels of Scope with examples

During my time coding this past phase I had a little difficulty not only remembering the definitions of scope but understanding which Scope went with which part of the function. Sometimes with all the information they give you it is hard to remember the definitions of the different parts of coding. In this blog, I will help explain the Three Scope levels and give examples of what each level is as an example.

In JavaScript, there are three different levels. The first is Global Scope:

The technical meaning for Global Scope is the context where everything in a Javascript program executes by default. This includes all variables, objects, and references that are not contained within another scope.

In simple terms, this means that any variable that can be accessed throughout the entire code is considered a part of the Global Scope. You can define any variable on a global scope with: let, const, and var.

Warning: Though var is one of the Keywords
it is not suggested to use due to it being able to
be accidentally redefined which can and will lead to a
buggy program.

Now that we have the definition let's get into a few examples of a Global Scope from my code:

     `const mainDiv = document.getElementById("main")

     function chores(event){
      //code here can use mainDiv variable
      }

    function antherFunction(event){
     //and the code here can use mainDiv variable
      }`

Now in this example the Keyword being used is const. What is being set as a variable that can be reached through the entire code is mainDiv. The last is what the variable mainDiv is being assigned to document.getElementById(“main”).

If this is a little difficult to understand here is a little more simple:

    `let submitchore = 'theChores';

    function chores(event){
    //code here can use mainDiv variable
            }

           function newChores(event){
    //code here can use mainDiv variable
            }`

Again we have one of the Keywords let, const, or var we need to assign a Global variable. The variable being assigned is submitChore. The last part we need is what the variable is being assigned to, ‘theChores’. That same Variable is outside both functions making it accessible to both and not just one function.

The second level of Scope in JavaScript is called Functional Scope:

The technical term for the Functional Scope is a variable declared inside a function, it is only accessible within that function and cannot be used outside that function.

A simpler breakdown is each function creates a Functional Scope. For example:

 `function chores(event){
  let submitchore = 'theChores'; //This is a Functional scope
  }

 function chores(event){
 const submitchore = 'theChores'; //This is a Functional scope
 }

 function chores(event){
 var submitchore = 'theChores'; //This is a Functional scope
 }`

No matter how many functions you might have they all have their own Functional Scope.

There is a Local Scope that occurs when you create a variable inside a function. For an example of Local Scope let's take the function from above so you can see the difference:

    Global Scope Example:

       `let submitchore = 'theChores';

    function chores(event){
    //code here can use mainDiv variable
            }

            function newChores(event){
    //code here can use mainDiv variable
            }`

Local Scope Example:

    `function chores(event){
    let submitchore = 'theChores';
    //code here can use submitchore
            }

            function newChores(event){
    //code here cannot use submitchore
            }`

Now, if you look at each of the examples, you can see a distinct difference. The variable submitchore has moved from outside of both functions into the chores function. This makes the variable submitchore inaccessible to the newChores function. Even if you were to put the submitchore variable into the newChore function it again would be inaccessible to the chores function.
Example:

    `function chores(event){
    //code here cannot use submitchore
            }

            function newChores(event){
            let submitchore = 'theChores';
    //code here can use submitchore
            }`

Now the last of the three Scopes is Block Scope:

The technical definition for the Block Scope variable means that the variable defined within a block will not be accessible from outside the block.

A good breakdown of this is anything within the { } is a Block Scope. A few examples of this:

    `//Can’t be used here

           {let submitchore = 'theChores';
    //code here can use submitchore
            }

           //Can’t be used here`

A block can be inside a function and the variable will still not be available outside of the { }.

So what I hope you take from this blog is a better understanding of the three different Scopes: Global Scope, Functional Scope, and Block Scope. I also hope it helps you better understand each placement and how they apply to the code you create later. Have fun coding!