JavaScript Scope
About JavaScript Scope
In JavaScript, the scope is the context or environment or area of code in which variables, functions and expressions are visible or can be accessed.
The scope determines the accessibility of variables, functions and objects in different parts of a JavaScript program.
There are several types of scope in JavaScript:
Global Scope
Variables declared outside any function or block belong to the global scope.
The global scoped variables can be accessed from anywhere in the script.
Example
Explanation of the Code
-
var globalVar = "I am global";: The variableglobalVaris declared in global scope as it is not declared within any function or block scope {}. This variable is accessible from anywhere in the script. -
console.log(globalVar);( within function line 4 ): Here the variableglobalVaris accessible within thetestFunc()function. This will print the value of 'globalVar' in the console though it is accessed from within the function block. -
console.log(globalVar);(outside the function line 8): This will print the value ofglobalVarin the console.
Function Scope
Function scope refers to the visibility and accessibility of variables within a function.
Variables declared inside a function belong to function scope and they are visible and accessible within the function.
Function scoped variables are not accessible outside the function.
Example
Explanation of the Code
-
let functionVar = "I am function scoped variable";: The variablefunctionVaris declared withinmyFunction. This variable is accessible from within the function but cannot be accessed from outside the function. -
console.log(functionVar);(within function line 3 ): This will print the value offunctionVarin the console as it is accessed from within the function block. -
console.log(functionVar);(outside function line 7 ): This will throw an error 'functionVar is not defined' as it is not accessible from outside the function.
Block Scope
Variables declared with let or const keyword inside {} (curly braces) are block-scoped variables.
Block-scoped variables are not accessible from outside the block.
Example
Explanation of the Code
-
let blockVar = "I am block-scoped variable";: The variable 'blockVar' is declared with let keyword within the block of curly braces {}. This variable is accessible from within the block but cannot be accessed from outside the block. -
console.log(blockVar);(within block): This will print the value ofblockVarin the console as it is accessed from inside the block. -
console.log(blockVar);(outside block): This will throw an error 'blockVar is not defined' as it is not accessible from outside the block.
Variables declared with var keyword does not have block scope. It is function-scoped.
Example
Explanation of the Code
-
var blockWithVar = "I am not block scope with var.";: The variableblockWithVaris declared withvarkeyword within the block of curly braces {}. This variable is accessible from outside the block. -
console.log(blockWithVar);: This will print the value ofblockWithVarvariable in the console though it is called from outside the block.
JavaScript Compiler For Live Practice
Practice the above JavaScript code in the following JavaScript Editor. Create more variables in different scopes in the following editor and click Execute button to check the output. The output will be displayed in JavaScript Code Output section.
JavaScript Editor