How to use local variables and global variables in JavaScript and what are their differences?

Javascript has two types of variables: local variables and global variables.

First of all, local variables can only be called within the function where this variable is declared. Global variables are variables that can be called throughout the code. Of course, it is definitely not clear to understand it literally. Let me 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, that is, they can be used directly without declaration. Moreover, be sure to note that JavaScript always uses implicitly declared variables as global variables.
For example:

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:

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

This When , the browser will not have any output results, because i is defined in the function myName, so it is only a local variable of myName and cannot be called externally.

Now look back at the following code:

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

Now, let’s make some changes and remove myName();. The code is as follows:

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

At this time, the browser will not react. Because although i is a global variable, the function myName() has not been called, so it is equivalent to declaring i but not assigning any value to i, so there is no output.
Similarly, if you change the above example to:

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

In this case, no results will be output. The JavaScript code is executed from top to bottom. In the sayName() function When called, the value of the variable i will be checked. At this time, the function myName has not yet been executed, which means that i has not been assigned a value, so no results will be output.

The standard for dividing JavaScript scope is function function block, not if, while, and for.

<script>
function f1(){
   alert("before for scope:"+i);   
 //i未赋值（并不是没有声明！使用未声明变量或函数会导致致命错误从而中断脚本执行）
 //此时i值为undefined
   for（var i=0; i<3;i++){
       alert("in for scope:"+i);}
 //i的值是0，1,2 
   alert（“after for scope：”+1);
  //i的值是3，此时已经在for scope之外，但i的值仍然保留为3
    while（true）{
       var j=1;
       break;}
    alert(j);
  //j的值是1，此时已经在while scope之外，但j的值仍然保留为1
    if（true）{
      var k=1;
    }
    alert(k);
  //k的值为1，此时已经在if scope之外，但k的值仍保留为1
}
f1();
//此时在函数块外调用函数，再次输出存在于f1这个function scope里的i j k变量
alert（i）;
//error!!!原因是这里的i未声明（不是未赋值，区别f1的第一行输出），脚本错误，程序结束！
alert（j);   
//未执行
alert（k）；
//未执行
</script>

JavaScript will precompile the entire script file before execution (the script file will be pre-compiled) The declaration part is analyzed, including the local variable part) to determine the scope of the real variable. For example, below:

<script>
   var x=1;
   function f2(){
    alert(x);
   //x的值为undefined！这个x并不是全局变量，因为在function scope已经又声明了一个重名的局部变量，所以全局变量的参数a被覆盖了。
    说明了JavaScript在执行前会进行预编译，函数体内的x就被指向局部变量，而不是全局变量。此时x只有声明，没有赋值，所以为undefined
    x=3;
    alert(x);
   //x值为3.但还是局部变量
    var x;
   //局部变量x在这里声明
    alert(x);
   //值为3
   }
   f2();
   alert(x);
   //x值为1，并不是在function scope内，x的值为全局变量的值。
</script>

When a global variable has the same name as a local variable, the scope of the local variable will overwrite the scope of the global variable. After leaving the scope of the local variable, it will return to the scope of the global variable. scope, and when a global variable encounters a local variable,

How to use the global variable? Use window.globalVariableName.

<script>
   var a=1;
    function f3(){
       alert(window.a);
  //a位1，这里的a是全局变量
       var a=2;
        alert(a);
      }
    f3();
    alert(a);
</script>

The above is the detailed content of How to use local variables and global variables in JavaScript and what are their differences?. For more information, please follow other related articles on the PHP Chinese website!