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

Write a simple calculator using JavaScript

The effect is as follows:Reference Program: <!...

Explore how an LED can get you started with the Linux kernel

Table of contents Preface LED Trigger Start explo...

Detailed installation process of nodejs management tool nvm

nvm nvm is responsible for managing multiple vers...

Detailed explanation of how to introduce custom fonts (font-face) in CSS

Why did I use this? It all started with the makin...

jQuery realizes the picture following effect

This article shares the specific code of jQuery t...

What we have to say about CSS absolute and relative

Written in the opening: Absolute said: "Rela...

Detailed explanation of the role of the new operator in Js

Preface Js is the most commonly used code manipul...

Tips to prevent others from saving as my web page and copying my site

Nowadays, copying websites is very common on the I...

mysql5.7.19 zip detailed installation process and configuration

MySQL v5.7.19 official version (32/64 bit install...

Web page image optimization tools and usage tips sharing

As a basic element of a web page, images are one ...

MySQL 8.0.19 installation and configuration method graphic tutorial

This article records the installation and configu...

Web design experience: Make the navigation system thin

<br />When discussing with my friends, I men...

Detailed tutorial on uploading and configuring jdk and tomcat on linux

Preparation 1. Start the virtual machine 2. git t...

How to install MySQL 8.0.13 in Alibaba Cloud CentOS 7

1. Download the MySQL installation package (there...