var

In JS, everything can be var

You can declare numbers, strings, booleans, or even arrays or objects

// Use var to declare numbers, strings, booleans, arrays, and objects
var num = 1;

var str = 'Hello World';

var bool = true;

var arr = [];

var obj = { name: 'hulh'.age: 23.gender: 'male' };

Copy the code

Basically, you can declare all data types using VAR

When you use var to declare a variable, you don’t have to initialize the value, you just declare it. The value of the declared variable is undefined.

var name;
console.log(name); // undefined
Copy the code

However, it is advisable to specify an initial value when declaring a variable to avoid unpredictable errors.

Using var to declare variables, you can also declare the same variable repeatedly, because Javascript is compiled line by line, so subsequent declarations of variables with the same name override the former.

var name = 'hlh';
console.log(name); // hulh

var name = 'HLH';
console.log(name); // HLH (no error)
Copy the code

In addition, var declaration variables, will occur “variable promotion” phenomenon, what is variable promotion? In layman’s terms, you can use the value before you define it.

console.log(name); // Undefined (in non-strict mode, of course)
var name = 'hulh';
Copy the code

Why does this happen? Because the Javascript compiler pushes all declarations to the top of the scope at compile time, the code above looks like this:

var name;
console.log(name); // Undefined (in non-strict mode, of course)
name = 'hulh';
Copy the code

Javascript has global variables and local variables. Variables declared with var are mounted to the Window object by default in the browser environment and become an attribute of the Window object. When a variable is not declared using var, it will be automatically mounted to the Window object in the browser environment (equivalent to declaring a global variable, easy to pollute the global variable).

let

Let is similar to var, but with some differences:

The scope of let declaration is block-level scope (ES6 has a new block-level scope). The block-level scope is defined by the nearest pair of curly braces {}, while the scope of var declaration is function scope.

// var
if (1) {
	var name = 'hlh';
}
console.log(name); // hlh

// let
if (1) {
	let name = 'hlh';
}
console.log(name); // Error name is not defined
Copy the code

Variables declared by lets form a temporary dead zone. Variables declared by lets in this block scope may not be declared again or used before the declaration. Strictly speaking, variables declared by let can also have “variable promotion”, but the “variable promotion” can be avoided due to the temporary dead zone. In some ways, var and let “variable boost” is different.

// Cannot be used before declaration
console.log(name); / / an error
let name = 'hlh';
// The declaration cannot be repeated
let name = 'HLH'; // Uncaught SyntaxError: Identifier 'name' has already been declared
Copy the code

In the browser environment, variables declared using let will not be mounted to the window as properties of the window, avoiding contamination of global variables.

const

Var and let are used to define variables, which are mutable. Const is used to define constants, which are immutable. Constants defined with const are read-only and cannot be modified

A classic example:

/* * * we know that the area of a circle is calculated by the formula S = π * r * r * π, and that the value can be changed accidentally if we use var or let * const */
let PI = 3.1415926;
PI = 3.1233333; / / not

const PI = 3.1415926;
PI = 3.1233333; // Uncaught TypeError: Assignment to constant variable.
Copy the code

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

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

Constants declared by const have the same temporary deadband as variables declared by let. The declared scope is block-level and cannot be repeated

// Temporary dead zone
console.log(PI); // ReferenceError: Cannot access 'PI' before initialization
const PI = 3.1415926;

// Block level scope scope
if (1) {
	const PI = 3.1415926;
	console.log(PI); / / 3.1415926
}
console.log(PI); // ReferenceError: PI is not defined

// The declaration cannot be repeated
const PI = 3.1415926;
const PI = 3.14; // SyntaxError: Identifier 'PI' has already been declared
Copy the code

Some people may ask, why can the properties of an object be changed when I declare it as const?

As you all know, when we declare an object, the javascript compiler creates an address in the heap to hold that object, and const is just a pointer to the address of that object, so as long as the address pointer doesn’t change, we’re not violating the immutable principle that when we modify an object’s properties, We operate on objects in the heap, not on the constant itself defined by const. If we change the value of this constant, we will get an error

For a more detailed explanation, see: ECMAScript6 Introduction to let and const commands const nature

const obj = {
	name: 'hlh'.age: 23};console.log('before', obj);
obj.name = 'HLH'; // No error will be reported
console.log('after', obj);

/** * if we change the constant obj, * we actually modify the address of the obj. */
obj = {
	name: 'HuLiehao'.age: 23.gender: 'male'};// Uncaught TypeError: Assignment to constant variable.
Copy the code

From what has been discussed above

We should use let in preference for declaring variables and const for defining constants

The above

Please feel free to comment on any mistakes or omissions