Scope can be defined as the accessibility of a variable.
Say for example, in every office, there is a restricted area where only a few people have access.
Similarly, in JavaScript, the variables also have some access restrictions. The variables that are defined inside a Function, cannot be accessed outside of it.
<html>
<body>
<script>
function func() {
var x = 5
}
func()
document.write(x)
</script>
</body>
</html>
Now, the program execution starts from the third line.
And the Function func() is called.
func()
And the function execution begins.
function func() {
var x = 5
}And initialised the variable x with 5 inside the function func().
var x = 5
Then we come to the document.write statement,
document.write(x)
And end up with an error as output,
This is because the variable x is not accessable outside the Function. And that is called as Local Scope.
The variables that are declared inside a Function, can only be accessed inside the Function and is local to that Function. That is called the Local Scope of a variable.
Say for example, if there are two functions, firstFunc() and secondFunc().
<html>
<body>
<script>
function firstFunc() {
var x = 5
document.write("The variable x is not accesible outside the firstFunc() </br>")
}
function secondFunc() {
var y = 7
document.write("The variable y is not accesible outside the secondFunc() </br>")
}
firstFunc()
secondFunc()
</script>
</body>
</html>
So, we have declared two functions, firstFunc(),
function firstFunc() {
var x = 5
document.write("The variable x is not accesible outside the firstFunc() </br>")
}And secondFunc().
function secondFunc() {
var y = 7
document.write("The variable y is not accesible outside the secondFunc() </br>")
}And we have two variables, x and y.
While x is declared inside the Function firstFunc() and is local to the firstFunc() and cannot be accessed outside it.
Similarly, y is declared inside the Function secondFunc() and is local to the secondFunc() and cannot be accessed outside it.
Next, let us see the Local Scope in nested Function.
Nested Function is a Function inside an existing Function.
<html>
<body>
<script>
function outerFunc() {
var x = 5
document.write("The variable x is accesible from the outerFunc() and the value is ", x, "</br>")
function innerFunc() {
document.write("The variable x is accesible from the innerFunc() and the value is ", x, "</br>")
}
innerFunc()
}
outerFunc()
</script>
</body>
</html>
So, in the above example, there are two Functions, outerFunc() and innerFunc(). And the innerFunc() resides inside the outerFunc().
Now, we have declared a variable x inside the outerFunc().
function outerFunc() {
var x = 5
document.write("The variable x is accesible from the outerFunc() and the value is ", x, "</br>")
function innerFunc() {
document.write("The variable x is accesible from the innerFunc() and the value is ", x, "</br>")
}
innerFunc()
}Now, since the innerFunc() resides inside the outerFunc(). The variable x is also accessable inside the innerFunc().
Now, what if, the variable x was defined inside the innerFunc(). Can the variable x be accessed from the outerFunc()?
Well! The answer is no.
Let us see the above example.
<html>
<body>
<script>
function outerFunc(){
document.write("The variable x is not accesible from the outerFunc() </br>")
function innerFunc() {
var x = 5
document.write("The variable x is accesible from the innerFunc() and the value is ", x)
}
innerFunc()
}
outerFunc()
</script>
</body>
</html>
So, in the above code, we have declared the variable x inside the innerFunc().
function outerFunc(){
document.write("The variable x is not accesible from the outerFunc() </br>")
function innerFunc() {
var x = 5
document.write("The variable x is accesible from the innerFunc() and the value is ", x)
}
innerFunc()
}So, the variable x is not accesible from the outerFunc().
So, the moral of the story is, the variable that is declared at a higher scope could be accessed at a lower scope.
Say for example, your Boss will have access to your details. But you will not have access to any of your Boss's details.
And with this we come to the concept of Global Scope.
The variables that are declared outside the Function are accessable inside a Function. And they are said to be in Global Scope.
Let us see in the below example :
<html>
<body>
<script>
var x = 5
function func() {
document.write("Inside the function ",x, "</br>")
}
func()
document.write("Outside the function ",x)
</script>
</body>
</html>
So, in the above example, we have declared a variable x, outside the Function and initialised with 5.
var x = 5
Now since, the variable x is declared outside the Function, it is accessible both inside and outside the Function.
Now, we were able to access the variable x inside the Function. But what if, we wanted to change/modify the value of x.
<html>
<body>
<script>
var x = 5
function func(){
var x = 8
document.write("Inside the function ",x, "</br>")
}
func()
document.write("Outside the function ",x)
</script>
</body>
</html>
In the above code, we get a strange output. Let us see how?
The program execution starts by initialising the global variable x with the value 5.
var x = 5
Then we come to the next line where Function func() is called
func()
And the Function func() execution begins,
function func() {
var x = 8
document.write("Inside the function ",x, "</br>")
}In the first line of the Function func(). The value of x is initialised with 8.
var x = 8
Now, this is time to pause and note something very IMPORTANT. i.e. If a variable is declared inside a Function. Then it is treated as a different variable.
In this case, since the value of x is initialised with 8. It is treated as a redefinition.
And x is a new variable altogether.
That is the reason why, the document.write statement inside the Function func(),
document.write("Inside the function ",x)Prints the value 8. i.e. The value of the above variable in the local scope.
Inside the function 8
Then the control comes out of the Function func() and the next document.write statement,
document.write("Outside the function ",x)
Prints the value of the global variable i.e. 5.
Outside the function 5
So, the moral of the story is, there are two different variables with the same name x.