The execution process of JS code is divided into two stages: 1. The pre-parsing process finds all variables and function declarations, and raises them to the top of the scope 2. Implementation process

1. Scope

The scope of a variable is its scope. The only things that have scope in JavaScript are functions.

  • Global scope
  1. in<script>Variables defined in the tag – global variables
  2. Do not usevarDeclare directly used variables – global variables
  • Local scope
  1. Only used inside functionsvarDefined variables are local variables
  2. Local variables are destroyed when the function is out of scope
  • Block-level scope
  1. Scope qualified using code blocks. There is no block-level scope in JavaScript
  2. if,forThe use ofvarVariables defined are global variables

Rules of Use:

  • The function allows access to variables outside the function
  • Only functions in the entire code structure can be scoped
  • Scope rules are first analyzed using promotion rules
  • If the variable is in the current scope, external variables with the same name are not considered

2. Variable declarations

  • When you set a value, you also access a variable; Fetching a value is also accessing a variable

  • Instead of writing a variable inside the function, the variable is in the scope of the function; Instead, you must use var to declare a variable in order for it to belong to the scope

  • The code inside a function is not executed when it is declared, but only when it is called

  • The name of the declared function is actually a variable name that can be assigned to it

Var, let, const

  1. The scope of a variable declared with VAR is its current execution context, which can be a nested function or a variable declared outside of any function. Let and const, on the other hand, are block-level scopes, meaning they can only be accessed within the nearest set of braces (function, if-else code block, or for loop).
if(true) {var bar = "bar";
	let baz = "baz";
	const qux = "qux";
}
console.log(bar);//bar
console.log(baz);//baz is not defined
console.log(qux);//qux is not defined
Copy the code
  1. Var boosts variables, which means they can be used before they are declared. While let and const do not promote variables, early use will report an error.
console.log(foo);//undefined 
// The variable declared by var can be promoted, but the assignment cannot
var foo = "foo";

console.log(baz);//ReferenceError
let baz = "baz";

console.log(bar);//ReferenceError
const bar = "bar";
Copy the code
  1. Repeating variables with var is not an error, but let and const do.
var foo = "foo";
var foo = "bar";
console.log(foo); //bar
let baz = "baz";
let baz = "qux";//SyntaxError
Copy the code
  1. The difference between let and const is that let allows multiple assignments while const allows only one.
// No error will be reported
let foo = "foo";
foo = "bar";
/ / complains
const baz = "baz";
baz = "qux";
Copy the code

4. Variable promotion and function promotion

When analyzing the code, we should first promote the declared variable name with var and the function starting with function, and then execute the specific execution process of the code.

  1. The promotion of variables is scoped
function foo(){
	var num = 123;
	console.log(num);
}
foo();/ / 123
console.log(num);//num is not defined
Copy the code

Undefined is not defined is not defined

  1. Function namesake: During preprocessing, both functions are promoted, but the latter function overrides the previous one
var m = 1;
function add(n){
	return n = n + 1;
}
y = add(m);
function add(n){
	return n = n + 3;
}
z = add(m);
console.log(y);/ / 4
console.log(z);/ / 4
Copy the code

function add() { } Defined functions are parsed preferentially, not sequentially. So in the whole process, two Add functions are parsed first, but since they have the same name, the latter overrides the former; The rest of the code is then parsed sequentially. y = add(m); And z = add (m); The statement calls the second add function, so it returns a value of 4.

  1. Variable with function name: When promoting, if a variable has the same name as the function, the variable is ignored and only the function is promoted
console.log(foo); //foo(){ }
function foo(){}
var foo = 2;
console.log(foo); / / 2

// Improved code
function foo(){};
alert(foo);
foo=2;
alert(foo);
Copy the code
  1. Variable promotion only raises variables and functions to the top of the current scope; assignment does not
/ / 1
if(a in window) {var a = 10;
}
console.log(a);/ / 10

// The promoted code
var a;
if(a in window){
	a = 10;
}
console.log(a);/ / 10

/ / 2
function f1(){
if(a in window) {var a = 10;
}
console.log(a);
}
f1(); / / 10

// Improved code
function f1(){
	var a;
if(a in window){
	a = 10;
    }
console.log(a);
}
f1(); / / 10
Copy the code