Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

In a project, we declare many variables to store data. We can think of variables as a box. The name of the box is the name of the variable, and the contents of the box are the values of the variable.

In JavaScript, we can declare a variable using the keywords var,let,const, etc., such as:

var a; // declare a box called a = 1; Var a = 1; var a = 1; let b = 2; const c = 3;Copy the code

Var, let, and const

In the previous example, we declared variables using var,let, and const, respectively. What is the difference between using these three keywords? Let’s take a look.

var

Using var to declare a variable is equivalent to declaring a global variable. We know that in the browser, window is a global object, so the global variable is an attribute of the Window object. Therefore, using var to declare a variable is equivalent to declaring an attribute of the Window object.

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

There is no block-level scope

Block-level scopes are only conceptualized in ES6, where there are only global and function scopes, so variables declared using var are global if they are not declared inside a function, and local variables inside a function if they are declared inside a function.

{ var a = 1; // let b = 2; } console.log(a);} console.log(a); // Output 1 console.log(b); B is not definedCopy the code

Variable ascension

console.log(a)
var a = 1;
Copy the code

In the example above, the final output value is 1. This is because variable promotion is used to declare variables. When the script is parsed, all statements that declare variables are executed line by line first.

var a = 1;
console.log(a)
Copy the code

Allow duplicate declarations

Variables can be repeatedly declared using var, so the following statements are allowed in JavaSciprt:

var a = 1;
var b = 2;
Copy the code

let

Let is a new variable in ES6 that replaces avAR keyword and uses let declaration. It has the following characteristics:

  1. Variables cannot be used before declaration
  2. Variables cannot be declared again after they have been declared
  3. There is no variable promotion
  4. Variables can have block-level scope
let a = 1; let a = 2; Console. log(b); // let b = 2; { let c = 3; } console.log(c);} console.log(c); // Read an undeclared variable, errorCopy the code

const

Const is used to declare a constant. A constant is a variable that must be assigned when declared and cannot be reassigned later using a procedure.

const a = 1; const a = 2; A = 2; Const b; // No initial value assigned, error reportedCopy the code

Like let, a variable declared by const has no variable promotion and only takes effect after the declaration. If there is a block-level scope, the value of the variable cannot be read outside the scope.

Const const const const const const const const const const const const const const const const const const const const const const const const

Const a = {x:1,y:2} a.name = 'test'// Add a property to the object const a = []; a.push('6666'); // To add an element to the array, execute a.length = 0; // Reset the array length, a = ['test']; // Reassign, error reportedCopy the code

summary

As we can see from the simple examples and comparisons above, var declarations have historically been a bit of an oddball. In ES6, variables declared by let and const can have their own block-level scope, which also helps modularity.