Table of contents
Scope in JavaScript determines the accessibility (visibility) of variables from different parts of the code.
Global Scope:
Variables declared at the top of a program or outside of any function or block are considered to be global variables:
var globalVariable = 'Hello, global scope!'; function foo() { console.log(globalVariable); } foo(); // Output: Hello, global scope!
Variables declared without
var
,let
andconst
keywords are considered to be automatically global. The following code example will declare a global variablecarName
, even if the value is assigned inside a function.myFunction(); // code here can use carName function myFunction() { carName = "Volvo"; }
NOTE: In "Strict Mode", undeclared variables are not automatically global.
Variables in the global scope can be accessed and changed from anywhere in the code, including inside the function or block:
function incrementGlobal() { globalCounter++; } var globalCounter = 0; incrementGlobal(); console.log(globalCounter); // Output: 1
Variables declared with
var
,let
andconst
are quite similar when declared outside a block. They all have Global Scope:const constVar = "const"; function global() { console.log(`Variables declared outside a block with ${varVar}, ${letVar} and ${constVar} have global scope!`); // } var varVar = "var"; let letVar = "let"; global(); // Variables declared outside a block with var, let and const have global scope!
Global variables exist during the whole program;
NOTE: It's generally recommended to avoid using global variables because the value of a global variable can change in different areas in the program. It can introduce unknown results in the program. Instead, encapsulate data within local scopes whenever possible.
Local Scope:
Variables declared inside a function or block have local scope;
Local variables are accessible only within the function or block in which they are defined;
Local variables have a limited lifetime that exists as long as the function or block is executing.
Function Scope:
Variables declared inside the function have function scope meaning that they can only be accessible inside the function and can not be accessed by other functions. Therefore, variables with the same name can be used in different functions.
Each function creates a new scope.
When a function starts, local variables will be created and deleted when the function ends;
Variables declared with
var
,let
andconst
are quite similar when declared inside a function. They all have Function Scope:function myFunction() { var carName = "Volvo"; // Function Scope } console.log(carName); //ReferenceError: carName is not defined
function myFunction() { let color = "red"; // Function Scope } console.log(color); //ReferenceError: color is not defined
function myFunction() { const name = "Alice"; // Function Scope } console.log(name); //ReferenceError: name is not defined
Block Scope:
Variables declared inside curly braces { } with
let
andconst
keywords have a block scope and cannot be accessed from outside the block. For example:{ let x = 2; } console.log(x); //ReferenceError: x is not defined
{ const y = 2; } console.log(y); //ReferenceError: y is not defined
Variables declared with the
var
keyword does NOT have a block scope and can be accessed from outside the block:{ var z = 2; } console.log(z); // 2
References
3. Scope MDN