First, scope

Before we get to the definition, let’s first talk about the problem of scope, which is divided into function scope and block level scope.

1. Function scope

A function scope is something that’s inside a function, something that’s inside a function is not accessible outside of the function, like this

function Test(){
    var temp = 'Variable in function';
}

// The temp variable cannot be accessed
console.log(temp);
Copy the code

Block level scope

Block-level scope, the area between curly braces {}, refers to the following cases

// Conditional statement
if () {}

/ / a switch statement
switch () {}

// for/while loop statement
for () {}
while () {}

// try... Catch statement
try(a)catch (err) {}

// single curly braces
{}
Copy the code

Var and let

Var’s scope is function’s scope and let’s scope is block’s scope.

1, the var

Variables defined with var inside a function are accessible only inside the function, not outside it. As shown in the following code

function Test() {
    var temp = 5;
    console.log('inside ' + temp);
}
Test();

console.log('outside ' + temp);    // An error is reported here
Copy the code

The last log statement will report an error indicating that the temp variable is not defined because you cannot access the var variable outside the function. But inside {}, the block-level scope, variables defined with var can be accessed across the scope, and the following code will print normally

if (true) {
    var temp = 5;
    console.log('inside ' + temp);
}

console.log('outside ' + temp);    // Print the result normally
Copy the code

2, let

{} block-level variables defined with let inside the scope are accessible only inside the scope, not outside the scope. As shown in the following code

if (true) {
    let temp = 5;
    console.log('inside ' + temp);
}

console.log('outside ' + temp);    // An error is reported that the temp variable is not defined
Copy the code

However, the variables defined by let inside the function scope are also inaccessible outside the function. Here we can roughly see that the relationship between the two should be

Variable promotion and temporary dead zones

Variables declared by var, regardless of where they are actually declared, are considered declared at the top of the function, or at the top of the global scope if they are not in the function. Let and const do not get this promotion. When a variable (or constant) declared by let or const is called ahead of time, an error “cannot be accessed before initialization” is reported. For example, the following code

console.log(temp);    // I pay therefore I am not mistaken
var temp = 5;
console.log(temp);    / / print 5

console.log(temp1);    // Error "cannot be accessed before initialization"
let temp1 = 5;
console.log(temp1);    // Will not be executed because there is a temporary dead zone ahead
Copy the code

Why is that? Because javascript engines work by pre-parsing, fetching all declared variables and functions, and executing them line by line, all variable declarations are promoted to the header, which is called variable promotion.

Third, const

Const is the definition of a constant, which must be declared before it is accessed. Like let, there is no variable promotion. Constants must be initialized when declared, such as const temp = 5. Otherwise, an error “missing initializer in const declaration” is reported.

1, const invariant

A constant, as its name implies, cannot be changed once it is initialized.

const temp = 5;
temp = 6;    // Error, "assignment to constant variable"
Copy the code

2. Change of const

The change here is not a violation of the previous article. Let’s start with this code

const person = {
    name: 'Han Meimei'.age: 14
}
console.log(person);

person.age = 15;
console.log(person);    // Here you can see that Han Meimei's age has changed to 15

person = {
    name: 'li lei'.age: 16
}
console.log(person);    // Error because person is a constant variable and cannot be reassigned
Copy the code

This shows that we are not actually changing the object to which the const constant variable is declared, but rather a property within the object. Reassignment of a constant variable itself is still not allowed, so it’s fine.

Four, write some words at the end

Here are some notes on the way to study, so it is inevitable that they are not accurate or even wrong. Everyone is welcome to pass by correction.