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

let const ✅ ❌ ❌ ❌ 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!