You may not really understand the Var statement improvement, if you don't believe it, come and take a look

Hello classmate, I am Dad Mu. Welcome to like, collect, comment and follow.

existJavaScriptmiddle,var KeywordsUsed to declare variables. andletandconstdifferent,varThe declared variable hasfunctionScope or global scope (if declared outside the function). aboutvarAn important feature of the declaration isStatement promotion (Hoisting)。

Statement promotion

Statement promotion means whatevervarWherever a variable is declared in a function, it will be considered declared at the top of the function. However, it should be noted thatOnly the declaration of the variable will be promoted, while the initialization of the variable (i.e. assignment) will not be promoted.. This means that the variable is actuallyinitializationBefore, forvarIt will be considered asundefined。

Code Example

function testVarHoisting() {
  console.log(a);
  var a = 2;
}

testVarHoisting(); // undefined

Things to note

Declaration promotion only affects the declaration itself and does not affect initialization.
usevarCan cause unexpected behavior, especially when in large or complex code bases. Therefore, it is recommended to useletandconstto declare variables because they provide block-level scopes, reducing the risk of variables leaking to global scopes or unexpected coverage.
In strict mode, undeclared variables can cause errors, which helps catch potential errors. However,varThe declared variables can still be promoted.

Exercise Question 1

function complexFunction() {
  console.log(a); // What is output?
  if (false) {
    var a = 10;
  }
  console.log(a); // What is output?
  var a = "Hello";
  console.log(a); // What is output?
}

complexFunction();

Answer: undefined, undefined, Hello [if statement does not affect the variable improvement of var, regardless of whether it is true or false]

Exercise Question 2

function complexFunction() {
  console.log(a); // What is output?
  if (true) {
    var a = 10;
  }
  console.log(a); // What is output?
  var a = "Hello";
  console.log(a); // What is output?
}

complexFunction();

Answer: undefined, 10, Hello

Exercise Questions 3

console.log(x); // What is output?

var x = 2;

function f() {
  console.log(x); // What is output?
  var x = 3;
  console.log(x); // What is output?
}

f();

console.log(x); // What is output?

Answer: undefined, undefined, 3, 2

Exercise Questions 4

"use strict"; // Strict mode

console.log(x); // What is output?

var x = 2;

function f() {
  console.log(x); // What is output?
  var x = 3;
  console.log(x); // What is output?
}

f();

console.log(x); // What is output?

Answer: undefined, undefined, 3, 2 [Strict mode does not affect the declaration improvement of var]

Exercise Questions 4

console.log(x); // What is output?

var x = 2;

function f() {
  x = 3;          // What is output?
  console.log(x); // What is output?
  var x = 4;
  console.log(x); // What is output?
}

f();

console.log(x); // What is output?

Answer: undefined, 3, 4, 2 [Variables with the same name in the function scope will not assign values to outer variables]

Exercise Questions 5

function test(x) {
  var x = "local";
  console.log(x); // What is output?
}

test(10);

Answer: "local"

function test(x) {
  console.log(x);  // What is output?
  var x = "local";
  console.log(x); // What is output?
}

test(10);

Answer: 10, "local" [the priority of function parameters is higher than that of variables]

Exercise Question 6

for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i); // What is output?
  }, 1000);
}

Answer: 3, 3, 3 [var is a global variable, and the timer callback is executed after the loop ends]

Exercise Questions 7

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

Answer: Goodbye Jack [Logistics is the same as Exercise 1. If statement does not affect the variable improvement of var, regardless of whether it is true or false]

Exercise Question 8

var msg = "hello";
for (var i = 0; i < 10; i++) {
  var msg = 'hello' + i * 2 + i;
}
console.log(msg);

Answer: "hello189" [Variables inside the for loop will overwrite the outer layer of the same name]

Summarize

If you have done all the above exercises correctly, then you are rightvarThe understanding of variable improvement problem is quite profound, I would like to give you a thumbs up!

From the above exercises, we can seevar Declare variablesThere are many "strange" situations, especially the ability to access variables and repeat assignments before assignment leads to many problems. Sometimes it takes a long time to figure out the execution order, which is extremely unfavorable to the maintenance of the code. This is also recommended to use it.letandconstreplacevarThe reason. During project development, students should also try to use itletandconstreplacevar 。

Okay, the sharing is over, thank you for your likes, see you next time.