SoFunction
Updated on 2025-03-01

The difference between var, let and const in JavaScript variables

Preface

There are 3 keywords used to declare variables in JavaScript, namely var, let and const.

Among them, the var keyword is a product of the ES5 era. Since ES5 has loose constraints on variables, some unexpected problems often arise when using var to declare variables. In order to make the definition of variables more standardized, ES6 proposed the two keywords let and const.

Therefore, to explain the differences between these three, we must first start with the difference between the ES5 era and the ES6 era, mainly the difference between var and let.

The difference between ES5 and ES6

1. Scope

Using different keywords to declare variables mainly means that there are different restrictions on the scope of variables. Therefore, the main difference between var and let is the difference in the scope of variables.

  • The scope of the var declaration is the scope of the function, and the var variable declared in the function body cannot be accessed outside the function body.

When doing questions, there are often scenes where variables of the same name are declared globally and in the function body. You should know that variables of different scopes will not interfere with each other.

var a = 10;
function logA() {
    var a = 20;
    (a); // 20
}
(a); // 10
  • The scope of the let declaration is the block scope, Block scope is a subset of the function scope, and curly braces can be used{...}to define the block-level scope.

2. Global properties

Use var and let to declare variables in the global scope, and the variables will continue within the declaration cycle of the page.

butVariables declared with var will become properties of window objects, and if they are declared with let, they will not。

3. Variable enhancement and temporary dead zone

  • var declares that there is variable promotion behavior。

The declaration, initialization and assignment of variables are divided into three steps. For var variables, declaration and initialization will be promoted to the top of the scope.

That is, when the compiler encounters a var declaration, it will first declare a var variable at the top of the scope and initialize it to an undefined value.

Therefore, accessing the var variable before the code execution flow encounters the var declaration statement will not report an error, but will access the undefined value.

(function example() {
  (age); // undefined
  var age = 20;
})();

// equivalent to(function example() {
  var age;
  (age); // undefined
  age = 20;
})();
  • ES6 restricts the behavior of accessing and then declaring variables, soLet and const declarations will have TDZ temporary dead zones。

That is, if the JavaScript engine encounters let and const declarations during compilation, it will put them in a temporary dead zone to prevent access. It will only move the variable out of TDZ after executing the statement to the variable declaration.

Therefore, if accessing a variable before a variable declaration statement is equivalent to attempting to access a variable in TDZ, JavaScript will throw a runtime errorReferenceError。

Another "side effect" between the variable improvement of ES5 and the temporary dead zone of ES6 is that it changes.typeofThe accessibility of the operation to the variable.

The only safe operation known to be for undeclared variables in ES5 istypeof, will return undefined value.

The emergence of TDZ leads to even usetypeof, you cannot access let and const variables before the let and const declaration statements are executed, and will still reportReferenceError。

4. Repeat statement

  • The var declaration allows duplication. You can reuse the var keyword to declare variables with the same name. The value of the variable declared later will override the previous value.
  • In order to prevent the confusing behavior of repeatedly declaring variables, ES6 limitsThe variables declared by let and const are not repetitive., if repeated statements will be reportedSyntaxErrormistake.

This limitation is not only reflected in let declarations for let declarations, but also not allowed to repeatedly declare var variables using let.

The difference between let and const

1. Constant

Both of them are ES6 variable declaration keywords. The difference between let and const is thatUse const declaration to create a read-only reference of a value。

Read-only reference means that for the original value, the const declaration cannot be reassigned;

For reference values, the const declaration cannot modify the reference any more, but the object's attribute value or the value inside the array can be modified.

Best Practices

  • Try not to use var. Because let and const can already replace var's location to meet development needs, and by the way, it also avoids many unnecessary problems.
  • Use const declaration first, followed by let declaration. The const declaration is a bit like a mechanism for protecting variables, which prevents and prevents unexpected variable modifications. For variables that require modification, use let declaration.

This is the end of this article about the difference between var, let and const in JavaScript variables. For more related JS var, let, and const content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!