1. What is variable promotion?

  1. JS code files are divided into compilation phase and execution phase, and variable promotion occurs in compilation phase
  2. In the current context (global, local, block-level), JS code is implemented from the top down (previously, the browser takes care of things in advance, which can be interpreted as a part of lexical parsing), and all the current context keywords with var and function are declared or defined in advance.
  3. The var keyword is only declared in advance
  4. Function is declared and defined in advance
  5. Variables declared in the global context based on var and function (global variables) are mapped to GO (global object: window) as properties of window

1.1 Improved var variable and function declaration

console.log(num) // Print undefined: the num variable is declared in advance and initialized to undefined
var num = 12

// Print out 123
Function (fn= function); function (fn= function);
fn() 
function fn() {
    console.log(123)}Copy the code

Note that only function declarations are promoted directly; functions declared using function expressions are not promoted.

TypeError: fn2 is not a function
// Since the var keyword is only declared in advance, fn2 should be undefined
fn2() 
var fn2 = function() {
    console.log(999)}Copy the code

1.2 Differences between let, const and VAR

  1. Var and function do variable promotion; let and const in ES6 do not
  2. Variables declared using var are initialized to undefined in the lexical environment, so no exceptions are thrown when accessing these variables
  3. Let and const in ES6 do not promote variables, and ReferenceError is thrown if these variables are accessed before declaration. Temporal dead zone
console.log(num)
var num = 12

console.log(n) // ReferenceError: n is not defined
let n = 99
Copy the code

1.3 Variable promotion in conditional statements

(function in conditional statements is only declared in advance in browsers of newer versions, so fn is undefined)

  • Older browsers: var boosts variables, function declares boosts and assigns values
  • New browser version: var will be promoted, function will be declared promoted, but will not assign a value, also undefined
console.log(num, fn) // undefined, undefined
if(! ('num' in window)) {
    var num = 12
    function fn() {
        console.log(123)}}Copy the code

2. Variable promotion exercises

Function fn => 1 * 2; function fn => 1 * 2; Function fn => 2 * 3; function fn => 2 * 3; If var fn is encountered, then fn has already been declared and will not continue to be declared, so no task processing is performed at this time * 4. Function fn => 4 * 5; function fn => 4 * 5; Function fn => 5 *; function fn => 5 *; Function () {console.log(3)} * Function () {console.log(3)} * function () {console.log(3)} * function () {console.log(3)} *

fn()
function fn() { console.log(1) } 
fn()
function fn() { console.log(2) }
fn()
var fn = function () { console.log(3) }
fn()
function fn() { console.log(4) }
fn()
function fn() { console.log(5) }
fn()

// prints 5,5,5,3,3,3
Copy the code