Variables in JS

So far we have declared variables in three different ways: var, let, and const. Here’s a list of the differences.

Variable ascension

When parsing a function, the JS engine will first promote all variables declared by the var keyword to the top of the function scope, but not variables declared by the let and const keyword.

function person() {
    console.log(age); Age can be accessed because it is promoted to the top of the scope, just undefined.
    console.log(height); // ReferenceError: "height" cannot be accessed before initialization
    console.log(sex) // ReferenceError: Failed to access "sex" before initialization
    var age = 10;
    let height = 155;
    const sex = 1;
}
Copy the code

Variable scope

There are three types of scope in JS: global scope, function scope and block level scope

There is also a special prototype chain scope

Global scope means that the variable is declared globally, meaning that it can be accessed anywhere.

A function scope is a variable declared inside a function that can only be accessed inside the function and is destroyed when the function exits.

Block-level scopes represent variables declared within a code block that can only be accessed within the current code block, such as if, for, and try catch blocks.

Block-level scope

Variables declared with the ES6 keyword, such as let and const, are block-scoped, while variables declared with the var keyword are promoted to the parent scope.

if(true) {
    // where block level is scope
    var age = 10;
    let height = 155;
    const sex = 1;
}
console.log(age); / / 10
console.log(height); // The reference error height is not declared
console.log(sex); // Reference error sex not declared
Copy the code

Age is accessible outside of if because the var keyword is used to declare the variable, and its scope is raised to the parent, which is global.

Repeat statement

The var keyword can repeatedly declare the same variable name, but let and const do not.

var age = 10;
var age = 20; // Finally equals 20

let height = 155;
let height = 160; // The engine will report a syntax error where height is already declared.

// In fact, the following code will not be parsed, because the engine will stop parsing if parsing error.
const weight = 90;
const weight = 100; // The engine will report a declared error at this point.
Copy the code

Global declarations

Variables declared with var, let, and const in the global scope can then be accessed anywhere. The difference is that variables only declared with var become properties of the window object, while let and const do not.

Const and let

The properties of const and LET are almost identical, except that const is forcibly initialized and cannot be modified.

Forced initialization

When we declare a variable but are not sure of its value, var and let allow us to declare the variable first without initializing its value, and const is the value that must be initialized when we declare it.

var age;
let height;
const weight; // Syntax error: const declaration lacks initialization value.

// So when we declare a const variable, we must also initialize its value
const weight = 100;
Copy the code

Do not modify the

Variables declared by const cannot be modified later.

const sex = 1; sex = 2; Const obj = {height: 155} obj. Height = 160; // You can modify the values of attributes that reference data typesCopy the code

In summary, primitive data types declared with const cannot be modified, but the values of attributes that reference the data type can be modified. This has to do with the way data is stored in memory, the base data type is stored in the stack, the reference data type is stored in the heap, but the reference address value of the reference data type is stored in the stack.

The ascension of the var

• varVariables declared by the keyword are promoted to the top of the function.
• Used in block-level scopesvarVariables declared by the keyword are promoted to the parent scope.

Only the var keyword is subject to enhancement, so we recommend using either the let or const keyword when declaring variables. Only those declared by either of them really match our expectations, unless you’re trying to use var as a trick.

extension

The global scope is not necessarily equal to Window. Since you declare a variable in the global scope with the var keyword, that variable is indeed mounted into the Window object, but variables declared with the let, const keyword are not.

var a = 1;
let b = 2;
const c = 3;

console.log(window.a == a); // true
console.log(window.b == b); // false
console.log(window.c == c); // false
Copy the code