ECMAScript variables are loosely typed, meaning that variables can be used to hold any type of data. Each variable is just a placeholder for a command to hold an arbitrary value. Before ECMAScript 6, the var keyword was used to declare variables. ECMAScript 6 added const and let keywords to declare variables.

var

Declare variables using the var keyword:

var msg;    // When not initialized, the variable holds a special value undefined
var msg = "Hello";    // initialization
msg = 3.14;    // You can change the saved value and the type of value, but it is not recommended

Scope

The scope of the variable declared by var is the scope of the function. When the function exits, destroy the variable:

function test() {
    var msg = "Hello";
}
test();
console.log(msg); // ReferenceError: msg is not defined

However, omitting var creates a global variable:

function test() {
    msg = "Hello";
}
test();
console.log(msg); // Hello

However, this operation will make it difficult to maintain global variables, which is not recommended.

var declaration promotion

Variables are not called before var declare variables, because the variables declared by VaR are automatically raised to the top of the function scope.

function test() {
    console.log(name);
    var name = "Xiao Ming";
}
test(); // undefined

let

Let is similar to var, but there are also very important differences. The main difference is that let declares that the scope of variables is block scope, and var declares that the scope of variables is function scope.

function varScope() {
    if (true) {
        var name = "var name";
        console.log(name);    // var name
    }
    console.log(name);    // var name
}
function letScope() {
    if (true) {
        let name = "let name";
        console.log(name);    // let name 
    }
    console.log(name);    // ReferenceError: name is not defined
}

As you can see from the above example, the scope of variables declared by the let keyword is limited to the inside of the block. Block scope is a subset of function scope, and the scope limit applicable to var also applies to let.

Repeat declaration

let does not allow duplicate declarations in the same block scope. Errors will be reported when:

function varScope() {
    var name = "var name";
    var name = "var name";
}
function letScope() {
    let name = "let name";
    let name = "let name";    // SyntaxError: Identifier 'name' has already been declared
}

However, nesting using the same identifier is equivalent to creating a new block scope. Therefore, the same identifier will not report an error because there are no duplicate declarations in the same block:

function letScope() {
    let name = "let name 1";
    if (true) {
        let name = "let name 2";
        console.log(name);    // let name 2
    }
    console.log(name);    // let name 1
}

Temporary dead zone

The initial value of the variable declared by var is undefined. However, unlike var, variables declared through let are not promoted in the scope. It is not initialized until the declaration is executed. Accessing the variable before initialization will lead to ReferenceError. The execution moment before the variable is declared is called "temporary dead zone"

Another important difference between let and var is that the variables declared by let are not promoted in the scope.

function deadZone() {
    console.log(varname);    // undefined
    console.log(letname);    // ReferenceError
    let letname = "let name";
    var varname = "var name";
}

Global declaration

The variables declared by var in the global scope will become the attributes of window objects; The variables declared by let will not be called the properties of window object.

var varname = 'var name';
console.log(window.name); // 'var name'
let letname = "let name";
console.log(window.letname); // undefined

However, the let declaration still occurs in the global scope, and the corresponding variables will continue in the declaration cycle of the page. Therefore, in order to avoid SyntaxError, you must ensure that the page does not declare the same variable repeatedly.

const

The variable declared by const is also a block scope, which is basically the same as that of let, except that when const declares a variable, the variable must be initialized at the same time. The value of the declared variable is read-only. Modifying the variable declared by const will cause a runtime error.

// A declared constant must have an initial value
const name;    // SyntaxError: Missing initializer in const declaration

// Block scope
const name = "const name 1";
if (true) {
    const name = "const name 2";
    console.log(name);    // const name 2
}
console.log(name);    // const name 1

name = "const name 2";    // TypeError: Assignment to constant variable.

// Attempt to redeclare
const name = "const name 3";    // SyntaxError: Identifier 'name' has already been declared

Const can also declare objects and arrays. When the declared variable is an object, the object reference is not modified, but the internal properties of the object are modified, which does not violate the const restriction.

const student = {};
student.name = "Xiao Ming";

const essentially saves not that the value of the variable cannot be changed, but that the memory address pointed to by the variable cannot be changed.

You cannot use const to declare variables in a for loop, because the variables will increase automatically during iteration, and a TypeError error will be thrown:

for (const i = 0; i < 10; i++) {}
// TypeError: Assignment to constant variable.

However, there is no error when used in a for in or for of loop.

for (const key in {name: "Xiao Ming", age: 24}) {
    console.log(key);    // name, age
}
for (const value of ["name", "age", "id", "sex"]) {
    console.log(value);    // name, age, id, sex
}

summary

var declaration of variables brings many problems. The let and const added in ECMAScript 6 provide better support for the language to declare the scope and semantics more accurately, and improve the code quality. After adding two keywords, the variable is declared with var, which makes the variable have a clear scope, declaration position and invariant value. However, it is better to use const when declaring variables, so that variables are forced to remain unchanged when the browser runs. Use let only when you know in advance that there will be changes in the future.

More content, please pay attention to the official account of the sea.