Scope of variables in Javascript

The scope of variables in Javascript: what are local variables and global variables. How to declare variables does or does not affect their scope in Javascript.

The scope of variables is one of the most important concepts to know when working with variables, not only in Javascript, but in most programming languages.

In the previous article we already began to explain . In this article we intend to explain in detail what this field of variables is and offer examples so that it can be understood well.

At the beginning of the article we will refer to the scope of variables declared with “var”. However there is a more recent way of declaring variables, with “let”, which directly affects their scope. At the end we will also offer some notes and references to understand it.

Variable scope concept

The scope of the variables is called the place where they are available. In general, when we declare a variable we make it available in the place where it has been declared, this happens in all programming languages ​​and since Javascript is defined within a web page, the variables that we declare in the page will be accessible within she.

In Javascript we will not be able to access variables that have been defined in another page. Therefore, the page itself where it is defined is the most common scope of a variable and we will call this type of global variables to the page. We will also see that variables can be made with scopes other than global, that is, variables that we will declare and will be valid in more limited places.

global variables

As we have said, global variables are those that are declared in the widest possible scope, which in Javascript is a web page. To declare a global variable to the page we will simply do it in a script, with the word var.

Global variables are accessible from anywhere on the page, that is, from the script where they are declared and all other scripts on the page, including event handlers such as onclick, which we already saw could be included within certain HTML tags.

local variables

We can also declare variables in more limited places, such as a function. We will call these variables local. When local variables are declared, we can only access them within the place where they have been declared, that is, if we had declared them in a function, we can only access them when we are in that function.

Variables can be local to a function, but they can also be local to other scopes, such as a loop. In general, local scopes are any places bounded by braces.

In the above script we have declared a variable inside a function, so that variable will only be valid inside the function. You can see how braces are used to delimit where that function or its scope is defined.

There is no problem in declaring a local variable with the same name as a global one, in this case the global variable will be visible from the whole page, except in the scope where the local variable is declared since in this site that variable name is occupied by the local and it is she who is valid. In short, the variable that will be valid anywhere on the page is the global one. Except in the scope where the local variable is declared, which will be the one that is valid.

A tip for beginners might be not to declare variables with the same names, so that there is never any confusion about which variable is valid at which time.

Differences between declaring variables with var, or not declaring them

As we have said, in Javascript we are free to declare or not the variables with the word var, but the effects that we will achieve in each case will be different. Specifically, when we use var we are making the variable that we are declaring local to the scope where it is declared. On the other hand, if we do not use the word var to declare a variable, it will be global to the entire page, regardless of the scope in which it has been declared.

In the case of a variable declared on the web page, outside of a function or any other smaller scope, it makes no difference to us whether or not it is declared with var, from a functional point of view. This is because any variable declared outside of a scope is global to the entire page. The difference can be seen in a function, for example, since if we use var the variable will be local to the function and if we don’t use it, the variable will be global to the page. This difference is essential when it comes to correctly controlling the use of variables on the page, since if we do not do so in a function we could overwrite the value of a variable, losing the data it might previously contain.

In this example, we have a global variable to the page called number, which contains a 2. We also have a function that uses the variable number without having declared it with var, so the variable number of the function will be the same global variable number declared out of function. In a situation like this, executing the function will overwrite the variable number and the data that was there before executing the function will be lost.

Declaration of variables with let

Since ECMAScript 2015 there is the let statement. The syntax is the same as var when declaring variables, but in the case of let the declaration affects the block.

Block means any space bounded by braces, such as the statements inside the braces of a for loop.

for(let i=0; i<3; i++) { // in this case, the variable i exists only inside the for loop alert(i); } // outside the for block there is no variable i

If that variable “i” had been declared in the head of the for loop using “var”, it would exist outside of the for code block.

To find more information about this new way of declaring variables, we recommend you read the article about . Also, if you wish you can find in this manual the explanations about the .

In the next article we will continue talking about variables and we will show that in them .