Summary of js variable promotion

Keywords: Javascript

In JavaScript, declarations of functions and variables are promoted to the top of functions.
In JavaScript, variables can be declared after they are used, that is, variables can be used before they are declared.

Example 1

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

Within the self-running function, there is var name ='jack', so the name is raised to the front of the current scope, so the name is undefined. When a program runs to a variable, it first looks for the variable in the current scope. If it cannot be found, it looks for the parent scope. If it still cannot be found, it will report an error.

Example 2

var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2;
//Amount to:
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y

Example 3

(function(){
    a = 4;
    console.log(a);
    console.log(window.a);
    var a = 3;
    console.log(a);
})()
//output
4
undefined
3

Variables are elevated to the current scope. There is no definition of a in the window scope, so undefined

Example 4 Variables and Function Lifting

console.log(foo);
function foo(){};
var foo = '12';
console.log(foo);

//Output twins foo(){} and 12;

console.log(foo);
var foo = function(){};
var foo = '12';
//Output undefined

The original function lifting can be divided into two cases:
One is function declaration. That's the form A, function foo(){} above.
Another kind: function expression. That's B, var foo=function() {} above.
The second form is actually the declarative definition of the var variable, so the output of B above is undefined, which should be understandable.
The first form of function declaration, when promoted, will be upgraded as a whole, including the part of function definition.

Example 5

var sayHello;
console.log(typeof (sayHey));//=>function    
  console.log(typeof (sayHo));//=>undefined
  if (true) {
      function sayHey() {
          console.log("sayHey");
      }
      sayHello = function sayHo() {
          console.log("sayHello");
  }
  } else {
      function sayHey() {
          console.log("sayHey2");
      }
      sayHello = function sayHo() {
          console.log("sayHello2");
      }
  }    
  sayHey();// => sayHey2    
  sayHello();// => sayHello

Function declarations are raised as a whole, js parsing is raised from top to bottom, sayHey is raised, and then sayHey is raised below to cover the first, so sayHey() is executed to output sayHey2.
Functional expressions are not raised as a whole, so output sayHello

Example 6

function aa(a,b,c) {
    console.log(a);
    console.log(aa);
    console.log(arguments);
    var a = function(){
        console.log(12);
    };
    var aa = '444';
    arguments = 6;
    console.log(a);
    console.log(aa);
    console.log(arguments);
    function a(){};
}
aa(1,2,3);

VM2311:3 ƒ a(){}
VM2311:4 undefined
VM2311:5 Arguments(3) [ƒ, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
VM2311:11 ƒ (){
        console.log(12);
    }
VM2311:12 444
VM2311:13 6
undefined


var num1 = 1;
function   fn(num3){
    var num4;
    console.log(num1);    //output    undefined
    console.log(num3);    //output  4
    console.log(num4);    //throw error  "num4 is not defined"
    console.log(num2);    //throw error  "num2 is not defined"
    var num1 = num4 = 2;
    num2 = 3;
    var num3= 5;
}
fn(4);

Example 7

window.val = 1;
var obj = {
    val: 2,
    dbl: function () {
        this.val *= 2;
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
};
// Say the following output
obj.dbl();
var func = obj.dbl;
func();

2\4\8\8

Posted by Beyond Reality on Fri, 16 Aug 2019 08:44:45 -0700