Summary of VaR, let and const of JavaScript

Author: Valentino

Crazy technology house

https://www.valentinog.com/bl…

No reprint without permission

var

varStatement is used to declare a variable in JavaScript that follows the following rules:

• Scope scope is function scope or global scope.
• It is not limited by the temporary dead zone (TDZ).
• It will be inwindowCreate a global property with the same name on.
• yesDistributable。
• yesDeclarable。

Function scope and global scope

When it appears in the global scope,varCreate a global variable. In addition, it will be inwindowCreate anGlobal properties：

var city = "Florence";

console.log(window.city); // "Florence"

When declared inside a function, the scope of the variable is the function:

var city = "Florence";

function bubble() {
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

varThe statement will be promoted:

function bubble() {
  city = "Siena";
  console.log(city);
  var city; // hoists
}

bubble(); // "Siena"

Unexpected global variable

Variables assigned without any declaration (eithervar，letstillconst）By default, it becomesglobal variable：

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // "Siena"

To eliminate this behavior, you need to useStrict model：

"use strict";

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // ReferenceError: assignment to undeclared variable city

Redistributable and redeclared

Any usevarAll declared variables can be made laterRedistributionorRestatement。 Examples of Restatement:

function bubble() {
  var city = "Florence";
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

Examples of Reallocation:

function bubble() {
  var city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"

let

letStatement to declare a variable in JavaScript that follows the following rules:

• Belongs to block scope.
• sufferTemporary dead zoneThe constraints of.
• It won’t be therewindowCreate any global properties on.
• yesDistributable。
• No restatement。

Block scope

useletThe declared variable will not be in thewindowCreate any global properties on:

let city = "Florence";

console.log(window.city); // undefined

When declared inside a function, the scope of the variable is the function:

let city = "Florence";

function bubble() {
  let city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

When inblockWhen declared in, the scope of the variable is the block. The following is an example of use in a block:

let city = "Florence";

{
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

One withifExample of a block:

let city = "Florence";

if (true) {
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

contrary,varNot limited by blocks:

var city = "Florence";

{
  var city = "Siena";
  console.log(city); // "Siena";
}

console.log(window.city); // "Siena"

Temporary dead zone

letThe statement may be promoted, butA temporary dead zone will be generated：

function bubble() {
  city = "Siena";
  console.log(city); // TDZ
  let city;
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

Staging a dead zone prevents access before initializationletStatement. Another example:

function bubble() {
  console.log(city); // TDZ
  let city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

You can see that the exception generated in both examples is the same: it proves the occurrence of “temporary dead zone”.

Redistributable, not redeclared

Any useletDeclared variablesCan’t be restated。 Example of a redeclared exception thrown:

function bubble() {
  let city = "Siena";
  let city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of let city

This is an example of effective Reallocation:

function bubble() {
  let city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"

const

constStatement is used to declare a variable in JavaScript that follows the following rules:

• Is block scoped.
• Is constrained by a temporary deadlock.
• It won’t be therewindowCreate any global properties on.
• Non redistributable。
• No restatement。

Block scope

Variables declared with const will not be in thewindowCreate any global properties on:

const city = "Florence";

console.log(window.city); // undefined

When declared inside a function, the scope of the variable is the function:

const city = "Florence";

function bubble() {
  const city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

When inblockWhen declared in, the scope of the variable is the block. Block statement{}For example:

const city = "Florence";

{
  const city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

stayifExample in block:

const city = "Florence";

if (true) {
  const city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

Temporary dead zone

constThe statement may be promoted, butIt will enter the temporary dead zone：

function bubble() {
  console.log(city);
  const city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

No reallocation, no redeclaration

useconstAny variable declaredCan’t be redeclared or redistributed。 An example of throwing an exception when redefining:

function bubble() {
  const city = "Siena";
  const city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of const city

Example of Reallocation:

function bubble() {
  const city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // TypeError: invalid assignment to const 'city'

summary

	Block scope	Temporary dead zone	Create global properties	Redistributable	Can be restated
var	❌	❌	✅	✅	✅
let	✅	✅	❌	✅	❌
const	✅	✅	❌	❌	❌

---

This article starts with WeChat official account: front-end pioneer.

Welcome to scan the two-dimensional code to pay attention to the official account, and push you every day to send fresh front-end technical articles.

Welcome to read the other great articles in this column:

• Deep understanding of shadow DOM v1
• Step by step teaching you to use webvr to realize virtual reality games
• 13 modern CSS frameworks to improve your development efficiency
• Fast start bootstrap Vue
• How does the JavaScript engine work? Everything you need to know from call stack to promise
• Websocket: real time communication between node and react
• 20 interview questions about Git
• In depth analysis Node.js Of console.log
• Node.js What is it?
• 30 minutes Node.js Build an API server
• Object copy of JavaScript
• Programmer 30 years old before the monthly salary is less than 30K, where to go
• 14 best JavaScript data visualization Libraries
• 8 top-level vs code extensions for the front end
• Node.js A complete guide to multithreading
• Four schemes and implementation of transforming HTML into PDF

---

• More articles