A scope in a function

Console. log(a), why is the result different?

Each function generates its own scope.

function bar() {
    var a = 1;
    console.log(a) / / 1
}
function foo() {
    var a = 2;
    console.log(a) / / 2
}
foo()
bar()
Copy the code

Hide the internal implementation

A is not declared, why can print a?

Function declarations are automatically declared internally and assigned values. A cannot be used outside of a function

function bar(a) {
    console.log(a) / / 1
}
foo(1)
console.log(a) / / an error
Copy the code

To avoid conflict

Scope benefits: Conflicts between identifiers are avoided, even if identifiers have the same name in different scopes.

Parsing code for conflicts: loops indefinitely because var I = 1 declares I in the scope generated by foo. Bar executes I = 3, does not find I in its scope, and looks outward to Foo’s scope. I’m changing I in scope foo, which affects the loop.

function foo() {
    function bar() {
        i = 3
    }
    for(var i = 1; i < 10; i++) {
        bar()
    }
}
foo()
Copy the code

Application: There are many modules in the project. Avoid conflicts between modules. Each module has its own name and a global scope. Each module has its own scope, and there is no interaction between different module scopes.

Function scope

var a = 2
function foo() {
    var a = 3
    console.log(a) / / 3
}
foo()
console.log(a) / / 2
Copy the code

Change a in foo without affecting global A. But foo is declared globally, which also causes some “pollution”. We can use immediate execution functions.

Execute the function IIFE immediately

That is, there is no function that affects the global A identifier and declares foo globally. Because IIFE is a function expression, not a function declaration. Many third-party plug-ins are implemented by executing functions immediately.

var a = 2;
(function foo() {
    var a = 3;
    console.log(a) / / 3}) ()console.log(a) / / 2
foo()  // foo is not defined
Copy the code

The difference between a function declaration and a function expression: the position where the function keyword appears. If function is the first word in the declaration, it is a function declaration; otherwise, it is a function expression. The summary is where their name identifiers will be bound. Function foo() {function foo() {function foo() {… }), foo can only be used in… Is visited.

Block scope

Block scopes are generated by {}. Why do we need block scopes when we have common function scopes?

The careful division of scope is beneficial to the efficiency of code execution and avoids variable pollution. Look at the following code:

It just declares one I, and every time I ++ changes to the same container, I will print 10. How can we solve this problem?

for (var i = 1; i < 10; i++) {
    setTimeout(() = > {
        console.log(i) // Print out nine 10s
    }, 0)}console.log(i) / / 10
/ / with equal to zero
var i = 1;
for(; i <10;) { i++;setTimeout(() = > {
        console.log(i)
    }, 0)}Copy the code

let

Let’s try the code above:

Shock!! Why print 1,2,3… 9. And the console below will report an error.

for (let i = 1; i < 10; i++) {
    setTimeout(() = > {
            console.log(i); / / 1, 2, 3... 9
    }, 0)}console.log(i) / / an error

let a = 1;
let a = 2; / / an error
Copy the code

Because the variables declared by let are in block scope. Will declare I inside the {} for. There are also nine block scopes, each with an I variable. So print out 1,2,3… 9. And let cannot repeatedly declare the same variable in the same scope.

const

It has the same scope as let and is also block-scoped. But there is a difference: a variable declared by const cannot be duplicated. But if const declares an object obj, it can obj. A = 2; That’s how you modify the data. The reason is that value types and reference types are stored differently, and there will be a separate article on that.

const a = 1;
a = 2; / / an error
Copy the code

conclusion

  1. Var: function scope, variable promotion, repeatable declaration, reassignment.
  2. Let: block scope, non-variable promotion, non-repeatable declaration, reassignment.
  3. Const: block scope, non-variable promotion, non-repeatable declaration, non-reassignment.