JavaScript Scope

In JavaScript, objects and functions, are also variables.
In JavaScript, scope is the set of variables, objects, and functions you have access to.
Local JavaScript Variables
Variables declared within a JavaScript function, become LOCAL to the function. Local variables have local scopeg. They can only be accessed within the function.

Example:



<script>

myFunction();

document.getElementById("demo").innerHTML =
"I can display " + typeof carName;

function myFunction() {
    var carName = "Volvo";
}

</script>
Since local variables are only recognized inside their functions, variables with the same name can be used in different functions. Local variables are created when a function starts, and deleted when the function is completed.


Global JavaScript Variables


A variable declared outside a function, becomes GLOBAL. A global variable has global scope. All scripts and functions on a web page can access it.


Example:



<script>

var carName = "Volvo";

myFunction();

function myFunction() {
    document.getElementById("demo").innerHTML =
    "I can display " +
 carName;

}

</script>
Automatically Global


If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable. This code example will declare car Name as a global variable, even if it is executed inside a function.


Example:

<script>

myFunction();

document.getElementById("demo").innerHTML =
"I can display " +
 carName;

function myFunction() {
carName = "Volvo";

}

</script>
The Lifetime of JavaScript Variables


The lifetime of a JavaScript variable starts when it is declared.
Local variables are deleted when the function is completed.
Global variables are deleted when you close the page.
Function Arguments


Function arguments "parameters" work as local variables inside functions.


Global Variables in HTML


With JavaScript, the global scope is the complete JavaScript environment.



In HTML, the global scope is the window object: All global variables belong to the window object.
Example:

<script>

myFunction();

document.getElementById("demo").innerHTML =
"I can display " +
 window.carName;

function myFunction() {
    carName = "Volvo";

}

</script>
Did You Know?
Your global variables, or functions, can overwrite window variables or functions.
Anyone, inclusive the window object, can overwrite your global variables or functions.