What is the difference between let, const, and var?

  • Whether it will be mounted to the window

    • Variables declared by var are mounted on the window, while variables declared by let and const are not mounted on the window, forming a block scope

  • Whether there is variable promotion

    • Var declares variables with variable promotion, let and const do not

  • Temporary dead zone

    • Variables defined by let and const are called before the definition and throw an error (creating a temporary dead zone). Var does not.

  • Whether assignment must be initialized immediately once declared

    • Var and let declarations do not initialize assignments. Const declarations must be assigned.

  • Whether a block scope is formed

    • Let and const declarations are block-scoped; var promotion is not scoped

  • Whether declarations can be repeated in the same scope

    • Let and const cannot be declared twice in the same scope, otherwise an error will be reported. Var does

  • Can I modify it?

    • Var and let can modify declared variables. Const cannot.
    • Const declares a read-only constant. Once declared,The value of a constant cannot be changedIf the declared constant is an object, thenWhat cannot be changed is the reference address of the object)

Where are the variables declared with const and let in the global scope

2.1 ES5

  • In ES5, global variables are mounted directly to the properties of the global object WindowSo you can see the global variables declared by var and function on the window
var a = 10;
function f(){};

console.log(window.a); // 10
console.log(window.f); // f(){}
Copy the code

2.2 ES6

  • In ES6, global variables are removed from the window object, but for compatibility purposes, the old ones remain, so global variables declared by var and function are still visible on the Window object

  • Global variables declared by lets and const are not in the window object, but in script form a block-level scope that is accessible globally and can be retrieved from the block-level scope in which the variable is defined

let a = 1; const B = 2; console.log(window.a); // undefined console.log(window.B); // undefined console.log(a); // 1, console.log(B) accessed through block scope; // 2, accessed through the block scopeCopy the code

By setting breakpoints, see what the browser doesYou can also see from the picture above,In the global scope, global variables declared with lets and const are not in the global object, just in a block-level scope (Script). \

3. The immutable declaration of a value declared by const

Const declared value:

  • If it is a basic types (string, number, Boolean, null, and undefined), the values of basic types of immutable statement.

  • If it is a reference type (Function,Array,Object), the pointer (address) of the reference type cannot be modified, but the value can be modified.

3.1 nature,

What const actually guarantees is not that the value of the variable cannot be changed, but that the data stored at the memory address to which the variable points cannot be changed.

For primitive types of data (numeric, string, Boolean), the value is stored at the memory address the variable points to, and is therefore equivalent to a constant.

(mainly for reference types of data objects and arrays), variable pointing to the memory address, and only save a pointer to the actual data, const can guarantee the pointer is fixed (i.e., always points to the other a fixed address), as far as it is pointing to the data structure of variable, is completely unable to control

3.2. Specific analysis

const a = []; a.push('Hello'); // execute a.length = 0; A = ['Dave']; / / an errorCopy the code

In the above code, the constant A is an array. The array itself is writable, but an error is reported if another array is assigned to A.

If you really want to freeze an Object, you should use the object. freeze method.

const foo = Object.freeze({}); // In normal mode, the following line does not work; // In strict mode, this line will report an error foo.prop = 123;Copy the code

In the code above, the constant foo refers to a frozen object, so adding new attributes does not work and will cause an error in strict mode.

In addition to freezing the object itself, properties of the object should also be frozen. Here is a function that freezes an object completely

var constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => { if ( typeof obj[key] === 'object' ) { constantize( obj[key] ); }}); };Copy the code

Reference links:

  • es6.ruanyifeng.com/#docs/let
  • www.jianshu.com/p/a55d3328f…
  • Blog.csdn.net/yiyueqinghu…