So, in JavaScript, do you have a function or block level scope? It's a function level. This brings the concept of global and local scopes.
By default when you start declaring variables (except in function()) in JavaScript, they are in global scope. For example:
<script>
var a = 10;
console.log(a);
</script>
Output: 10
Here, a is a global variable. If you want to create a local scope then you need to put the variable in function(). For example:
<script>
function abc()
{
var a = 10;
console.log(a);
}
abc(); // calling abc function
</script>
Output: 10
Here, a has a local variable because it can be accessed only in abc() function and not anywhere else.
Now, let's look at another scenario:
<script>
var a = 20;
console.log("Outside function " + a);
function abc()
function abc()
{
console.log("Inside function " + a);
}
abc(); // calling abc function
</script>
Output:
Outside function 20
Inside function 20
In the above code, function abc() inherits the global scope variable a and thus prints the same value.
But, if we have same variable in function abc() then it will override the global variable. Look in the below example:
Output:
Output:
But, if we have same variable in function abc() then it will override the global variable. Look in the below example:
<script>
var a = 20;
console.log("Outside function " + a);
function abc()
function abc()
{
var a = 10;
var a = 10;
console.log("Inside function " + a);
}
abc(); // calling abc function
</script>
Output:
Outside function 20
Inside function 10
However, if we try to use the variable outside function, then it will give an error:
Output:
Uncaught ReferenceError: a is not defined
Take note that it gave an error because it could not find variable a in the current scope and also it didn't move ahead with next execution and it stopped when error occurred.
But I still want to access the variable declared inside abc() function. So the only way to do so is to make the variable present in function abc() global. How to do it? Just remove var keyword and immediately it becomes global.
However, if we try to use the variable outside function, then it will give an error:
<script>
console.log("Outside function " + a);
function abc()
function abc()
{
var a = 10;
var a = 10;
console.log("Inside function " + a);
}
abc(); // calling abc function
</script>
Output:
Uncaught ReferenceError: a is not defined
Take note that it gave an error because it could not find variable a in the current scope and also it didn't move ahead with next execution and it stopped when error occurred.
But I still want to access the variable declared inside abc() function. So the only way to do so is to make the variable present in function abc() global. How to do it? Just remove var keyword and immediately it becomes global.
<script>
function abc()
{
a = 10; // Now the variable is global
a = 10; // Now the variable is global
console.log("Inside function " + a);
}
abc(); // calling abc function
console.log("Outside function " + a);
console.log("Outside function " + a);
</script>
Output:
Inside function 10
Outside function 10
But this is a bad practice. Don't declare variables without the keyword var.
As I said before, there is no block level scope in JavaScript. This implies that if the variable is declared in if ... else , for loops, switch statements, etc, JavaScript treats it a global variable. Look at the below example:
Outside function 10
But this is a bad practice. Don't declare variables without the keyword var.
As I said before, there is no block level scope in JavaScript. This implies that if the variable is declared in if ... else , for loops, switch statements, etc, JavaScript treats it a global variable. Look at the below example:
<script>
if (true)
{
var a = 10;
}
{
var a = 10;
}
console.log("Outside function " + a);
</script>
Output:
Outside function 10
Comments
Post a Comment