SoFunction
Updated on 2025-04-06

Detailed explanation of the difference between local variables and global variables in javascript

There are two types of variables in JavaScript: local variables and global variables. Of course, our article is to help you really distinguish these two variables.

First, local variables refer to functions that can only be called within a function declared by this variable. A variable that can be called in the entire code as a global variable. Of course, it is definitely not clear to understand literally. I will introduce it in detail below:
As we all know, variables need to be declared with the var keyword. However, variables can also be used implicitly in JavaScript, which means they are used directly without declaration. Moreover, be careful that JavaScript always uses implicitly declared variables as global variables.
For example:

Copy the codeThe code is as follows:

function myName() {
 i = 'yuanjianhang';
}
myName();
function sayName() {
 alert(i);
}
sayName();

The output result is: yuanjianhang

This shows that variable i is a global variable. If the above code is changed to the following:

Copy the codeThe code is as follows:

function myName() {
 var i='yuanjianhang';
}
myName();
function sayName() {
 alert(i);
}
sayName();

At this time, the browser will not have any output results, because i is defined in the function myName, so it is just a local variable of myName and cannot be called externally.
 
Now look back at the following code:

Copy the codeThe code is as follows:

function myName() {
 i = 'yuanjianhang';
}
myName();
function sayName() {
 alert(i);
}
sayName();

Now, let's make some changes and remove myName(); and the code is as follows:

Copy the codeThe code is as follows:

function myName() {
 i = 'yuanjianhang';
}
function sayName() {
 alert(i);
}
sayName();

At this time, the browser will not react much. Because although i is a global variable, the function myName() is not called, so it is equivalent to that although i is declared, it does not assign any value to i, so there is no output.
Similarly, if the above example is changed to:
 

Copy the codeThe code is as follows:

function myName() {
 
 i = 'yuanjianhang';
}
function sayName() {
 alert(i);
}
sayName();
myName();

In this case, no results will be output. When the JavaScript code is executed, the value of variable i will be checked when the sayName() function is called. At this time, the function myName has not been executed yet, which means that i has not been assigned yet, so no results will be output.
 
To facilitate everyone's better understanding, here is another example:

Copy the codeThe code is as follows:

var i = 'yuanjianhang';
function myloveName() {
 i = 'guanxi';
}
myloveName();
function myName() {
 alert(i);
}
myName();

What is the result this time?
The answer is guanxi
First of all, the original value of i is yuanjianhang, but after calling myloveName() function, the value of i is changed to guanxi, so the final output result is guanxi.

If you change the code to:

Copy the codeThe code is as follows:

var i = 'yuanjianhang';
function myloveName() {
 var i = 'guanxi';
}
myloveName();
function myName() {
 alert(i);
}
myName();

The result at this time is Yuanjianhang, because the two i in the code are different, one is global and the other is local. It can also be understood in this way. Although the names of the two i are the same, the essence of these two i is different, as if there are two people with the same name. Although the names are the same, they are not the same person.

If you transform the code into this:

Copy the codeThe code is as follows:

var i = 'yuanjianhang';
function myloveName() {
 i = 'guanxi';
}
function myName() {
 alert(i);
}
myName();
myloveName();

I believe everyone can figure out the result by themselves, and the result is Yuanjianhang.

Since global variables can be called inside the function, what about the following situation:

Copy the codeThe code is as follows:

var i = 'yuanjianhang';
function myloveName() {
  i = 'guanxi';
 alert(i);
}
myloveName();

Which value is the variable at this time?

Let's analyze:

First, the global variable i is assigned as: yuanjianhang.

Next myloveName() function is called, and the global variable i is reassigned to a new value: guanxi

So the result is definitely: guanxi.

What if we take alert in advance, like this:

Copy the codeThe code is as follows:

var i = 'yuanjianhang';
function myloveName() {
  alert(i);
 i = 'guanxi';
}
myloveName();

What is the result at this time?
Verified results are: undefined
What if the code is like this:

Copy the codeThe code is as follows:

var i = 'yuanjianhang';
function myloveName() {
  alert(i);
}
myloveName();

The result at this time is: Yuanjianhang

Why does the above undefined situation happen? Because the execution order of the code is from top to bottom, and there is no definition of i before outputting i. So from this we can see that when using the code, the declaration of variables must be placed in front of the code to avoid similar problems!

Similarly:

Copy the codeThe code is as follows:

var i = 'yuanjianhang';
function myloveName() {
 alert(i);
 var i = 'guanxi';
 
}
myloveName();

In this case, it will also output: undefined

Okay, I only have so many introductions about variables, and I believe anyone can understand these. No matter how the code is copied, its core will not change.

The above is all about this article. Have you had a deeper understanding of the difference between local variables and global variables in JavaScript? I wish you a happy new year and a happy study.