Summary of VaR, let and const of JavaScript

Time:2020-11-17

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 (eithervarletstillconst)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 laterRedistributionorRestatementExamples 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

Summary of VaR, let and const of JavaScript


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.

Summary of VaR, let and const of JavaScript

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

Recommended Today

Summary of recent use of gin

Recently, a new project is developed by using gin. Some problems are encountered in the process. To sum up, as a note, I hope it can help you. Cross domain problems Middleware: func Cors() gin.HandlerFunc { return func(c *gin.Context) { //Here you can use * or the domain name you specify c.Header(“Access-Control-Allow-Origin”, “*”) //Allow header […]