JavaScript Variable Scope

The scope of a variable is the area in which the program defines it.

JavaScript variables have only two scopes:

• Local scope

• Global scope

Scope determines the accessibility (visibility) of variables.

JavaScript local variables

Variables declared within a function haveLOCAL(Local) scope, which means they cannot be called or operated from outside the function.

//　The code here cannot use cityName
function myFunc() {
　　var cityName = "New Delhi";
　　
　　//　The code here can use cityName　　
}
//　The code here cannot use cityName

Local variables have function scope and can only be accessed from within the function.

Since local variables can only be recognized within their function, variables with the same name can be used in different functions.

Local variables are created when the function starts and are deleted when the function is completed.

JavaScript global variables

Variables declared outside the function haveGLOBALscope, which means that all scripts can use them, regardless of whether the script is inside or outside the function.

//　Initialize global variable
var cityName = "New Delhi";
//　The code here can use cityName
function myFunc() {　　
　　//　The code here can also use cityName
}
//　The code here can use cityName

Global variables can be accessed from any location in the JavaScript program.

In the following example, we will create a GLOBAL cityNameThe variable. Inside the function is a LOCAL variable with the same name.

//　Initialize global variable
var cityName = "New Delhi";
function myFunc() {
　　//Initialize local and function scope variables
　　var cityName = "Jaipur";
　　document.writeln(cityName);
}
//Output global and local variables
document.writeln(cityName);
myFunc();
document.writeln(cityName);

By outputting them to the document, we can see that the value of the variables differs according to the scope, and the original value has not changed.

Automatic global variable

If a value is assigned to an undeclared variable, it will automatically becomeGLOBAL (global)Variables.

This example will declare a global variablecityNameThis is also true even if values are assigned within the function.

myFunc();
//　The code here can use cityName　
function myFunc() {
　　cityName = "New Delhi";
}

Do not create global variables lightly unless necessary.

Global variables can override window variables.

Any function, including the window object, can override GLOBAL variables.

Differences between var, let and const

JavaScript has three different keywords to declare variables, which adds a layer of complexity to the language.

The differences between the two are based on scope, hoisting, and reassignment.

JavaScript Code Block Scope

WithvarVariables declared with keywords cannot have block scope.

Variables declared inside a block can be accessed from outside the block:

　　{　
　　var num =　50;　
　　}
　　//　num can be used here

WithletVariables declared with keywords can have 'block scope'.

Variables declared inside a block cannot be accessed from outside the block:

　　{　
　　let num =　50;　
　　}
　　//　num cannot be used here

Declare variables with constWithletSimilar to block scope.

　　{　
　　const num =　50;　
　　}
　　//　num cannot be used here

The value of a constant cannot be changed by reassignment and cannot be redeclared.

Lifecycle of JavaScript Variables

The lifecycle of JavaScript variables starts from declaration.

Variables will be deleted after the function is completed.LocalVariables.

When you close the browser window:GlobalVariables will be deleted, but still available for new pages loaded into the same window.