The area where a variable (or function) exists and is accessible is known as Scope. We can layer the scope in a system which means the child scope can access the parent scope but not vice-versa.
Javascript has three different scopes:
- Global Scope
- Block Scope
- Function Scope
Global Scope: Those variables which are declared outside the function or blocks or you can say curly braces({}) are having a global scope. Those variables which can be accessed from anywhere in the Javascript program are called global scope.
Global Javascript Variables is the variable that is declared outside a function. The scope of var, let, and const are quite equivalent when declared outside the function.
Example: In this example, we will declare all the variables outside the function and now we can access those variables from anywhere in the Javascript program.
Javascript
var global_variable1 = "Geeksforneveropen"; let global_variable2 = "Geeks"; const global_variable3 = "GFG"; function check_global_variables(){ console.log(global_variable1); console.log(global_variable2); console.log(global_variable3); } check_global_variables(); |
Geeksforneveropen Geeks GFG
Function Scope: Those variables that are declared inside a function have local or function scope which means variables that are declared inside the function are accessible within that function.
Variables which are declared within the function have function scope. When var declared in the function have a function scope. Function uses the curly braces to store the function body . Therefore, block scope and function scope is same for the function body.
Example: In this example, we will declare a variable inside the function and try to access it from outside the function.
Javascript
function check_function_scope(){ var variable1 = "Geeksforneveropen"; let variable2 = "Geeks"; const variable3 = "GFG"; console.log(variable1); console.log(variable2); } check_function_scope(); console.log(variable3); |
Output:
Geeksforneveropen Geeks ReferenceError: variable3 is not defined
In the above example, we tried to access the variable outside the function but it gives the reference error because of the function scope.
Block Scope: Before the ECMA6(2015) we have only global and functional scope but when the Let and Const keywords were introduced they provide the block scope. Variables that are declared inside the { } (curly braces) can only access inside that scope not from the outside of it.
Variables declared with var do not have block scope only let and const have block scope.
Example: In this example, we will declare the variable inside the block scope.
Javascript
{ var variable_1 = "GFG"; const variable_2 = "Geeksforneveropen"; let x=2; x*=2; console.log(x); console.log(variable_2); } console.log(variable_1); |
Output:
4 Geeksforneveropen GFG
In the above example, we have successfully accessed the variable with the var keyword because var does not have a block scope.
Lexical Scope: The variable is declared inside the function and can only be accessed inside that block or nested block is called lexical scope.
Example: In this example, we will declare the variable inside the function and going to access inside the nested function.
Javascript
function outerFunction() { const outerVariable = "Hello"; function innerFunction() { const innerVariable = "Geeks"; console.log(`${outerVariable} ${innerVariable}`); } innerFunction(); } outerFunction(); |
Output:
Hello Geeks
