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

Author: Valentino

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!