This is my first article on getting started

Why use let and const

There are three problems with using var to declare variables:

  • Variable declaration promotion
  • Repeatable definition
  • Global variables are mounted to the window

Var — Variable declarations are promoted

What is a variable declaration promotion: it can be used before it is defined, the value is undefined, and it is promoted to the top of the function after it is defined

Such as:

console.log(a);	//undefined ===> (var a) Undefined by default
var a=10;
Copy the code

Var — repeatable declaration

Var can be defined repeatedly when declaring a variable. The value defined later overwrites the previous value

var a=10;
var a=15;
console.log(a); / / 15
Copy the code

Var — The global variable is mounted to the window

When we declare a global variable using var, it is mounted to the window

var a=10;
console.log(window.a); / / 10
Copy the code

The window has many methods and properties. If we declare a global variable with the same name as the properties or methods on the window, the properties or methods on the window may become unusable

Use of let and const

Let and const are both used to declare variables. The use of let/const is similar to var, but avoids the pitfalls of var

Let’s use

Let is used to declare variables, and all variables declared are valid only in the block of code in which the let command resides

{
    let a=10;
    var b=20;
}
console.log(b);	/ / 20
console.log(a);	// ReferenceError: a is not defined

Copy the code
{
    let a=10;
    var b=20;
    console.log(a); / / 10
}
console.log(b); / / 20
Copy the code

There is no variable promotion

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a=10;
Copy the code

Non-repeatable declaration

let a=10
let a=20;	//SyntaxError: Identifier 'a' has already been declared
Copy the code

Block-level scope

In ES6, let added block-level scope to JavaScript

In simple terms, let and {} form block-level scopes, and variables declared by let are available only in their scope

{
    let a=10;
    {
        let b=20;
    }
    console.log(a); / / 10
    console.log(b); // ReferenceError: b is not defined
}
Copy the code
function test(){
    let a=10;
    if(true) {let a=20;
    }
    console.log(a);/ / 10
}
Copy the code
{
    let a=10;
    {
        let b=20;
    }
    console.log(b);//ReferenceError: b is not defined
}
Copy the code

Temporary dead zone (temporary dead zone)

   let a=10;
   {
       console.log(a); //ReferenceError: Cannot access 'a' before initialization
       let a=20;
   }

Copy the code

As you can see, when we define a global a, in the block-level scope also defines a a, first of all, it will seek a block-level scope in, do not allow the area outside to look for (let the declared variable bindings in this region, no longer subject to external influence), have been found, but we use before it does not declare a, which creates a temporary dead zone.

Here’s another example:

let a=10;
    {
        console.log(a); //ReferenceError: Cannot access 'a' before initialization
        let a=20;
        {
            console.log(a); / / 20}}Copy the code

You can see that the first one causes a temporary dead zone in the first block-level scope

The use of the const

Const is used to declare a read-only constant. Once declared, the value of a constant cannot be changed.

const PI=3.14159;
console.log(PI); / / 3.14159
PI=3;	//Assignment to constant variable.

Copy the code

When we declare a variable using const, we must assign a value to the declared variable or an error will be reported

const a;	// SyntaxError: Missing initializer in const declaration
Copy the code

Const has the same scope as let and is only valid in the block-level scope in which the declaration is made

const a=10;
{
    const a=20;
    console.log(a)	/ / 20
}
Copy the code
{
    const a=10;
}
console.log(a)	// a is not defined
Copy the code

Const also has temporary dead zones

const a=10;
{
    console.log(a)	//ReferenceError: Cannot access 'a' before initialization
    const a=20;
}
Copy the code

Likewise, const, like let, does not allow repeated declarations

let a=10;
const b=20;

let a=30;	//SyntaxError: Identifier 'a' has already been declared
const b=30;	//SyntaxError: Identifier 'b' has already been declared
Copy the code

How do I change the value of a const declared variable

A const variable cannot be changed once it is given a constant. Can we change the value of the declared variable?

The essence of const is not that the value of a variable cannot be changed, but that the memory address to which the variable refers cannot be changed. For simple data (values, strings, booleans), the value is stored at the memory address the variable points to. In the case of a compound type, a pointer to a memory address holds only a pointer. Const guarantees that the pointer is fixed, but does not control whether the structure it points to is mutable. So we can use object and array methods to change the value declared by const.

Use an object to change the value declared by const

const foo={};
foo.a=12;
console.log(foo.a);	/ / 12
foo.a=13;
console.log(foo.a)	/ / 13

Copy the code

If foo points to another memory address, an error is reported

const foo={}
foo={} TypeError: Assignment to constant variable
Copy the code

Use an array to change the value declared by const

const a=[];
a.push(123);
console.log(a[0]);	/ / 123
a.length=10;
console.log(a.length)	/ / 10
Copy the code

Similarly, as with objects, changing the memory address of A will cause an error

const a=[];
a=123	//Assignment to constant variable
Copy the code