Detailed explanation of the difference between var, let and const in JavaScript

Detailed explanation of the difference between var, let and const in JavaScript

When it comes to the methods of declaring variables in JavaScript , they are var , let , and const . let and const are new commands added in es6 . So what is the difference between them?

Let's first talk about the differences between the three as a whole. Before introducing them in detail, the differences between var, let, and const are mainly analyzed from the following points:

  • Differences when used as global variables
  • Variable Hoisting
  • Temporary dead zone
  • Block scope
  • Duplicate Statement
  • Modify declared variables

As a global variable

In ES5 , the properties of top-level objects are equivalent to global variables. Variables declared with var are both global variables and properties of top-level variables.

However, variables declared with let in ES6 are globally accessible, but not as properties of top-level variables, and constants declared with const are also not available on top-level variables.

Please add a description of the image

Variable Hoisting

Variables declared with var are promoted, and the variable can be called before being declared, and the value is undefined

There is no variable promotion let and const , that is, the variables they declare must be used after declaration, otherwise an error will be reported

 console.log(a) // undefinedvar a = 1console.log(b) // Cannot access 'b' before initializationlet b = 2console.log(c) // Cannot access 'c' before initializationconst c = 3console.log(a) // undefined
var a = 1

console.log(b) // Cannot access 'b' before initialization
let b = 2

console.log(c) // Cannot access 'c' before initialization
const c = 3

Temporary dead zone

There is no temporary dead zone var

There is a temporary dead zone let and const . The variable can only be obtained and used after the line of code that declares the variable is executed.

In fact, this is the difference that is extended from the previous variable improvement. Because variables declared with var are promoted, if the variable value is undefined before declaration, no error will be reported, so there is no temporary dead zone. let or const is used before or after the start of the scope and before the variable or constant is declared, an error will be reported. This area is also called a temporary dead zone.

Same as above:

 console.log(a) // undefined
var a = 1

console.log(b) // Cannot access 'b' before initialization
let b = 2

console.log(c) // Cannot access 'c' before initialization
const c = 3

Block scope

var does not exist in block scope

let and const have block scope

 { var a = 2}console.log(a) // 2{ let b = 2}console.log(b) // Uncaught ReferenceError: b is not defined{ const c = 2}console.log(c) // Uncaught ReferenceError: c is not defined

Duplicate Statement

var can be declared repeatedly in the same scope, and the variable declared later will overwrite the previous variable declaration

let and const cannot be declared repeatedly in the same scope

 var a = 10
var a = 20 // 20

let b = 10
let b = 20 // Identifier 'b' has already been declared

const c = 10
const c = 20 // Identifier 'c' has already been declared

Modify declared variables (constants and variable declarations)

var and let declare variables, and the declared variables can be modified

const declares a constant, read-only. Once declared, the value of a constant cannot be changed. However, it should be noted that for reference data types, variables or constants in JavaScript store the storage address of the data. As long as the reference of the constant is not directly modified, it is possible to modify the properties of the object it points to.

 var a = 10
a = 20
console.log(a) // 20

let b = 10
b = 20
console.log(b) // 20

const c = 10
c = 20 // Uncaught TypeError: Assignment to constant variable

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • What are the differences between var let const in JavaScript
  • Detailed explanation of the differences between var, let and const in JavaScript es6
  • Detailed explanation of the differences and usage of var in JavaScript and let and const in ES6 specifications
  • Understand the difference between let, var and const keywords in JavaScript
  • The difference between let, const and var in JavaScript ES6 syntax

<<:  Website front-end performance optimization: JavaScript and CSS

>>:  How to set MySQL foreign keys for beginners

Recommend

The iframe refresh method is more convenient

How to refresh iframe 1. To refresh, you can use j...

mysql 8.0.19 winx64.zip installation tutorial

This article records the installation tutorial of...

How to determine if the Linux system is installed on VMware

How to determine whether the current Linux system...

Detailed explanation of angular two-way binding

Table of contents Bidirectional binding principle...

React Native environment installation process

react-native installation process 1.npx react-nat...

Steps to build a Docker image using Dockerfile

Dockerfile is a text file that contains instructi...

XHTML introductory tutorial: Use of list tags

Lists are used to list a series of similar or rela...

JavaScript implements div mouse drag effect

This article shares the specific code for JavaScr...

MySQL database transaction example tutorial

Table of contents 1. What is a transaction? 2. Th...

wget downloads the entire website (whole subdirectory) or a specific directory

Use wget command to download the entire subdirect...

Introduction to common MySQL storage engines and parameter setting and tuning

MyISAM, a commonly used storage engine in MySQL c...

Detailed explanation and examples of database account password encryption

Detailed explanation and examples of database acc...