Understand var, let and const in JS

This article will introduce you to JavaScript's var, let and const. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone. The

var

var statement is used to declare a variable in JavaScript, which follows the following rules:

• The scope is a function scope or global scope.
• Not limited by the temporary dead zone (TDZ).
• It will create a global property with the same name on window.
• is allocatable .
• is declarable.

Function scope and global scope

When appearing in the global scope, var creates a global variable. Additionally it creates a global property with the same name on window:

var city = "Florence";

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

When declared inside a function, the variable is scoped to that function:

var city = "Florence";

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

bubble(); // "Siena"

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

var Declaration will be promoted:

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

bubble(); // "Siena"

Unexpected global variable

A variable assigned without any declaration (either var, let or const) will become global variables by default:

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

bubble(); // "Siena"

In order to eliminate this behavior, requires the use of strict mode:

"use strict";

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

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

Reassignable and redeclared

Any variable declared with var can be made laterReassign or Redeclare. Example of redeclaration:

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

bubble(); // "Siena"

Example of reassignment:

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

bubble(); // "Florence"

let

let statement declares a variable in JavaScript that obeys the following Rules:

• belongs to block scope.
• is subject to the temporary dead zone.
• It does not create any global properties on window.
• is allocatable .
• Cannot be redeclared.

Block scope

Variables declared with let do not create any global properties on window:

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 declared within the block, the scope of the variable is the block. Here is an example of use in a block:

let city = "Florence";

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

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

An example with a if block:

let city = "Florence";

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

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

Conversely, var is not affected by the block Limitations of:

var city = "Florence";

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

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

Temporary Dead Zone

let The statement may be promoted, but will generate a temporary dead zone:

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

bubble();

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

The staging dead zone prevents access to the let statement before initialization. Another example:

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

bubble();

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

It can be seen that the exceptions generated in the two examples are the same: proving the emergence of "temporary dead zone".

Reassignable, not redeclared

Any variable declared with let cannot be redeclared. Example of a redeclaration that throws an exception:

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

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

This is an example of a valid redeclaration:

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

bubble(); // "Florence"

const

const statement is used in JavaScript Declare a variable in, which follows the following rules:

• belongs to the block scope.
• is subject to the "temporary dead zone".
• It does not create any global properties on window.
• Not reassignable.
• Cannot be redeclared.

Block scope

Variables declared with const will not create any global properties on window:

const city = "Florence";

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

When inside a function When declared, 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 declared in the block, the scope of the variable is the block. Example of block statement {}:

const city = "Florence";

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

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

Example in if block:

const city = "Florence";

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

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

Temporary dead zone

const The declaration may be promoted, but will enter the temporary dead zone:

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

bubble();

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

cannot be reallocated, cannot be redeclared

Use const Any variable declared cannot be redeclared nor reassigned . An example of an exception being thrown on redeclaration:

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

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

Example of reallocation Example:

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

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

Summary

letconst✅❌ ❌❌English original address: https://www.valentinog.com/blog/var/

	Block scope	Temporary dead zone	Create global properties	Reassignable	Redeclarable
##var##❌	❌	✅	✅	✅
✅	✅	❌	✅	❌
##✅

Author: Valentino

Related free learning recommendations:

js video tutorial

The above is the detailed content of Understand var, let and const in JS. For more information, please follow other related articles on the PHP Chinese website!