Welcome to the Javascript Scope Homepage, Guest!


Javascript | What you can use and where




Scope

Scope is the very definition of what you can use and where it can be used at. The scope is the set of all variables you currently have access to. Remember, Javascript treats objects and functions as if they are variables. So, Javascript's scope encompasses the set of all variables, objects, and functions you currently have access to. The variables, objects, and functions can be declared locally or globally.

Local variable declaration means the declaration will take place within a small block of code, and can only be accessed within the scope of the funtion, method, or loop. The variables declared within a function or method is created when the function or method is called, and deleted once the function has finished executing. This feature allows the programmer to possibly use the same name within a program more than once. I often use i and j for all loops I programm. I tend to write long descriptive names for variables when I program assignments. I want to be able to see the code and say, "Yes, the variable named copyOfNamesInDictionaryByLastNameBlahBlah is what I'm looking for.



<!DOCTYPE html>
<html>
    <body>
        <p id="tutorial"></p>

        <script>
            myFunction();
            document.getElementById("tutorial").innerHTML =
            "The type of vehicle is " + typeof vehicle;

            function myFunction() {
                var vehicle = "2008 Honda Shadow";
            }
        </script>
    </body>
</html>




Output: The type of vehicle is undefined


The vehicle will be undefined because the variable declared is within a function, and only accessibly from inside the function. The variable cannot be accessed outside of the localized function it belongs to, and that is the reason for the vehicle being undefined. We had used the typeof built in function to try and identify the variable vehicle, but we had no success. If the variable was a global variable, we would have the access we desire.


Global variables are often declared outside of the user created functions. A global variable will possess the global scope ability. Global scope means that all scripts, functions, methods, and web content can access the variable at any time it is necessary.


<!DOCTYPE html>
<html>
    <body>

        <p id="tutorial"></p>

        <script>
            var vehicle = "2008 Honda Shadow";
            myFunction();

            function myFunction() {
                document.getElementById("tutorial").innerHTML =
                "I ride a " + vehicle;
            }
        </script>

    </body>
</html>




Output: I drive a 2008 Honda Shadow


The variable is able to be accessed because it is declared outside a function. The variable can then be used to display the text that is defined. The built in typeof function is great for debugging purposes. It is also great as a learning tool to help you fundamentally see how data types are handled within Javascript.


Automatically Global variables come about whenever a programmer does not declare a variable before he/she uses the variable within a Javascript line. The variable will automatically become a global variable within Javascript. The code below illustrates this property. The variable vehicle will be given the value 2008 Honda Shadow, but the variable is not declared inside of the myFunction function. Javascript will automatically take the variable, and cast it as a global variable. The script function is read from top to bottom, and the function call to myFunction is the first line Javascript will interpret. This is why vehicle is able to be used in the first place, if the function call had came after the line to enter text in the tutorial element, the code would have failed horribly. Global variables should only be created when they are intended to be used. In 'Strict Mode' of Javascript, automatic global variables will fail every single time.


<!DOCTYPE html>
<html>
    <body>

        <p id="tutorial"></p>

        <script>
            myFunction();

            // code here can use carName as a global variable
            document.getElementById("tutorial").innerHTML = "I ride a " + vehicle;

            function myFunction() {
                vehicle = "2008 Honda Shadow";
            }
        </script>

    </body>
</html>




Output: I drive a 2008 Honda Shadow




Lifetime

The lifetime of a Javascript variable depends on the location of the variable's declaration. The lifetime of the Javascript variable starts when it is declared. Local variables are declared inside a function, and the variable is deleted once the function is completely executed. Global variables are deleted once the user closes the browser window or tab, but the variable remains available to new pages loaded into the same window.




Function Arguments

Function arguments act as local variables inside of functions. The arguments are the parameters being passed to the function.

myFunction(x,y,z);

The function above requires three parameters to be passed in order for the function to not fail. The arguments are processed as local variables inside of myFunction.




Next, we will take a look at how Events take place within Javascript.

Just follow the buttons to continue the tutorial, Guest