In depth understanding of JS variables and their scope undefined and null

  • 2020-03-30 02:13:33
  • OfStack

1. Javascript variable scope

In javascript, variables are mainly divided into local variables and global variables, and the corresponding scope is also local scope and global scope.

1 local variables and scope
Local variables are generally declared inside the function body using:


function func(){
  var i=12;//A local variable
  ......
}

The scope of a local variable is used within the body of the function declaring the variable.
The declaration period of a local variable is initialized from the time the function is called and destroyed after the function call is completed.

2. Global variables and scope

Global variables are generally declared outside the function body:


var i=12;//The global variable
function func(){
  ......
}

There is another type of variable that is used directly without declaration, which defaults to a global variable:


function func(){
  i=12;//Not declared (using the var keyword), defaults to a global variable
}

Global variables are used in all scripts and methods on the current page and are scoped to the current page script.
The declaration period for a global variable is created when the variable is initialized and destroyed when the current page closes.

2. Typeof keyword

The typeof keyword is mainly used to detect the data typeof the variable. The main data types in JavaScript are string, number, Boolean, object, etc


console.log(typeof 'str');//string
console.log(typeof 23);//number
console.log(typeof false);//boolean
console.log(typeof [1,3,12]);//object
console.log(typeof {name:'jack',age:12});//object
console.log(typeof new Date());//object

Note: the array and json objects in js are of type object

Null and undefined

Null and undefined are commonly used in JavaScript to indicate that a variable has an empty value or is undefined. Both values can be represented as null values, but are different in terms of data type.


console.log(typeof null);//object
var persion = null;
console.log(persion);//null

console.log(typeof undefined);//undefined
var persion2;
console.log(persion2);//undefined

The null data type is object, and the undefined data type is undefined.
Variable declaration, value is null, variable value is null; Variables are declared, not assigned, undefined.
Here's another comparison:


console.log(null==undefined);//True values are equal
console.log(null===undefined);//false   Type inequality 

So you can see that null and undefined are both null; The null data type is object, and the undefined data type is undefined. Values that are declared but not initialized are undefined.

Here is the supplement

Situation One,


<script>
  var i; //The global variable
  //The method name is camel naming
  //The variables in the method are local variables

  function sayHello(){
  var x=100;
  alert(x);
  x++;
  }
  sayHello(); //The output of 100
  alert(x); //Error reporting, because x is a local variable and cannot be accessed
</script>

Situation Two


<script>
function sayHello(){
  var x=100;
  if(x==100){
    var y=x+1;
    alert(y); //The output of 101
  }
  alert(y); // also The output of 101 , inside the method, there is no block-level scope, in C# Not in!! 

  for(var i=0;i<2;i++){
    alert(i)
  } //The variables defined in the for loop are block-level scopes
  alert(i); //Because I is a local variable, output 2

}
sayHello();
</script>

Note: variables can be declared without var before they are used. Such variables are considered "global variables", but this is rarely the case

Undefined versus null

There are several cases where the value of the variable is undefined
1. If the variable is defined but no value is assigned, the value of the variable is undefined
2. The method called does not return a value, and the value returned is undefined
3. If the property value of the object does not exist, the return value is undefined, such as document.ddd

Example1:


var xx;
var yy=null;

if(xx==yy){

  alert(' equal ');

}

else{

  alert(' Ranging from ');
}

The output result is equal, because the browser will judge the value of xx and yy when making if judgment, because there is no specific value for them, they are considered false.
If ===[all equal sign] is replaced in the judgment, the output is not equal! Because === indicates that the data type and value of xx and yy should be the same!
 
Example2:


var xx=10
var yy='10';

if(xx==yy){

  alert(' equal ');
}

else{

  alert(' Ranging from ');
}

The output is equal, if replaced by ===, the output is not equal

Example3:


var n='10';
switch(n){
  case 10:

    alert(' digital ');
  break;

  case '10':

    alert(' string ');
  break;
}

Output string
The judgment in switch takes type into account

Conclusion: the judgment in if is the judgment value, regardless of the type


Related articles: