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

varstatement 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 onwindow.
• isallocatable.
• isdeclarable.

Function scope and global scope

When appearing in the global scope,varcreates a global variable. Additionally it creates aglobal propertywith the same name onwindow:

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"

varDeclaration will be promoted:

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

Unexpected global variable

A variable assigned without any declaration (eithervar,letorconst) will becomeglobal variablesby default:

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

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

"use strict"; function bubble() { city = "Siena"; console.log(window.city); } bubble(); // ReferenceError: assignment to undeclared variable city

Reassignable and redeclared

Any variable declared withvarcan be made laterReassignorRedeclare. 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

letstatement declares a variable in JavaScript that obeys the following Rules:

• belongs to block scope.
• is subject to thetemporary dead zone.
• It does not create any global properties onwindow.
• isallocatable.
• Cannot be redeclared.

Block scope

Variables declared withletdo not create any global properties onwindow:

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 theblock, 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 aifblock:

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

Conversely,varis 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

letThe statement may be promoted, butwill 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 theletstatement 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 variabledeclared withletcannot 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

conststatement 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 onwindow.
• Not reassignable.
• Cannot be redeclared.

Block scope

Variables declared with const will not create any global properties onwindow:

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 theblock, 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 inifblock:

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

Temporary dead zone

constThe declaration may be promoted, butwill 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

UseconstAny variable declaredcannot 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!