In JavaScript, variables are loosely typed placeholders used to hold data. It can store any type of data, and it can change the type of data it stores at any point in time. ECMAScript has three keywords to declare variables: var, let, and const. Var was the only variable declaration keyword before ECMAScript6. Let and const are the two new variable declaration keywords after ECMAScript6

The var keyword

Declare a variable, which is a keyword var followed by a variable name (identifier)

// A keyword that declares a variable (e.g., var) is followed by an identifier (or variable name)
var a = 10
Copy the code

In the example above, we define a variable a and then initialize it with a value of type 10 of Number. If we do not initialize it, JavaScript will store the variable as undefined

Since variables in js are loosely typed, the data and data type of variables can be changed later.

// A keyword that declares a variable (e.g., var) is followed by an identifier (or variable name)
var a = 10
a = 'h1'
Copy the code

But it’s not recommended, when we define a variable in a project, it’s best to define the variable and then what data type does it use, and that’s kind of a development specification, right

The declaration scope of var

The variables declared by var become local variables of a function. It is not accessible outside the function. An error will be reported if the user accesses it

function fun () {
  var a = 10
}

fun()
console.log(a) / / an error
Copy the code

Declare a function that creates a variable, a. But when we finish executing this function, we also destroy the variable A. If a variable is not declared with a keyword in a function, it becomes a global variable

function fun () {
  a = 10
}

fun()
console.log(a) / / 10
Copy the code

Var declaration enhancement

Using a variable declared by var, JS pulls it to the top of the scope.

console.log(a) // undefined
var a = 10
Copy the code

The above will not return an error, JS parsing will be the above section of code for transformation, equivalent to the following example

var a
console.log(a) // undefined
a = 10
Copy the code

No matter where you declare a var variable in the scope, js will pull the variable to the top of the scope

Let the keyword

Let is similar to var in that it declares a variable. But let is different from VAR in many ways

Scope of let

Yes, let has its own unique scope. The scope of the LET declaration is called the block-level scope

{
  let a = 10
}
console.log(a) / / an error
{
  var b = 10
}
console.log(b) / / 10
Copy the code

Let simply declares that where {} is added, a blocky scope is formed. This variable cannot be accessed externally. But var has no such scope, only function scope. The block-level scope is also a subset of the function scope, so this scope also applies to let declared variables

Let cannot duplicate declarations

You cannot declare two let variables with the same name in a scope. An error is reported if it is declared, but var does not

let a = 10
let a = 'hq' / / an error

// If you use a mixed declaration, var + let will return an error
var a = 10
let a = 'hi' / / an error

// The JavaScript engine determines whether a variable is a duplicate declaration based on the scope of the declared variable
if (true) {
  let a = 10
  console.log(a) / / 10
}

let a = 'h1'
console.log(a) // h1
Copy the code

Temporary dead zone

Variables declared using let, which do not proceed as var, are promoted

// The let declaration cannot be used before it
console.log(a) / / an error
let a = 10
// var declaration can be used without error
console.log(b) / / 10
var b = 10
Copy the code

This is called a “temporary dead zone”. References to any variable declared later in this phase will raise a ReferenceError

Global declarations

Let variables are declared globally in a different way than var variables. Variables declared using var become window properties, but let does not

let a = 10
var b = 20

console.log(window.b) / / 20
console.log(window.a) // undefined
Copy the code

The const keyword

The const keyword is basically the same as the let keyword, but it must be initialized at the same time and cannot be modified after that

// The data to save must be initialized
const a / / an error
// It cannot be modified after initialization
const b = 10
b = 20 / / an error
Copy the code

But one thing is, if const declares an object, then you can modify the data inside that object. Because a variable holds a pointer, not the data itself. So as long as you don’t reassign this variable to another object, you won’t get an error

// This operation will not report an error
const obj = { a: 10 }
obj.a = 20 // No error will be reported
console.log(obj) // { a: 20 }
// This is not the case
const obj = { a: 10 }
obj = { a: 20 } // An error was reported, and the pointer was changed
Copy the code

Way to declare

Do not use var declarations

In terms of the way we declare variables, ES6 provides us with lets and const to help us provide quality code. These two variable declarations give variables more explicit scope, location, and unchanging values. Let and const improve the quality of our code compared to some of the quirks of var declaring variables. Instead of using var declarations, use let and const declarations

Use COSNT first and then LET

For more code, we should give priority to declaring variables using const. Use let only when you know that the variable will change later. This avoids unexpected behavior due to unexpected assignments. This gives developers more confidence that the values of certain variables will never change, improving the quality of our code

Data retention differences

We all know that JavaScript data types are divided into seven types, six primitive types and one reference type

Primitive type (simple type)

• String
• Number
• Boolean
• Undefined
• Null
• Symbol

Reference types (complex types)

• Object

Variables are used to store these data types for developers to use. Each variable is simply a placeholder to hold an arbitrary data type

Variables differ in saving and copying primitive and reference types

Save the value

• A variable holds data of a primitive type, but a value of that type. So we can manipulate this value directly through variables

• A variable holds data of a reference type, a reference to that type, not a value of that type. Because JavaScript objects are stored in memory, JavaScript does not allow developers to access the memory location directly. So the reference to this type is saved

Duplicate values

• Holds a variable of the original type. When assigning an original value from a variable to another variable, the original value is copied to the location of the new variable. There will be an extra copy of data in memory

// STR and str2 are independent and do not interfere with each other
const num1 = 1
let num2 = num1
num2 += 1
console.log(num2) / / 2
console.log(num1) / / 1
Copy the code

• A variable that holds a reference type and assigns to another variable will also assign the value of that variable to the new variable. Because a variable of a reference type holds a pointer, the two variables in this process are actually pointing to one data. No more data is created in memory

Obj2 is assigned a pointer because obj1 is nothing more than a saved reference (pointer). This pointer points to an object
// So the two modifiers affect each other
const obj1 = { a: 1 }
const obj2 = obj1
console.log(obj1 === obj2) // true
obj2.a = 2
console.log(obj2) // { a: 2 }
console.log(obj1) // { a: 2 }
Copy the code