What are the differences between var let const in JavaScript

What are the differences between var let const in JavaScript

1. Repeated declaration

var supports repeated declaration, but let and const do not support repeated declaration.

1.1 var

var a = 1;
var a = 2;
console.log(a);

Output:

2

1.2 let

let b = 3;
let b = 4;
console.log(b);

Output:

Uncaught SyntaxError: Identifier 'b' has already been declared

1.3 const

const c = 5;
const c = 6;
console.log(c);

Output:

Uncaught SyntaxError: Identifier 'c' has already been declared

2. Variable promotion

var supports variable promotion, but only promotes the declaration and not the value. let and const do not support variable promotion.

2.1 var

a=2;
console.log(a);
var a = 1;

Output:

2

2.2 let

a=2;
console.log(a);
let a = 1;

Output:

Uncaught ReferenceError: Cannot access 'a' before initialization at index.html:28

2.3 const

a=2;
console.log(a);
const a = 1;

Output:

Uncaught ReferenceError: Cannot access 'a' before initialization at index.html:28

3. Temporary dead zone

There is no temporary dead zone for var, but there is a temporary dead zone for let and const.
As long as let and const exist in the scope, the variables or constants they declare are automatically "bound" to this area and are no longer affected by the external scope.

3.1 var

var a = 1;
function fun() {
    console.log(a);
    var a = 2;
}
fun();

Output:

undefined

3.2 let

let a = 1;
function fun() {
    console.log(a);
    let a = 2;
}
fun();

Output:

Uncaught ReferenceError: Cannot access 'a' before initialization

3.3 conset

let a = 1;
function fun() {
    console.log(a);
    const a = 2;
}
fun();

Output:

Uncaught ReferenceError: Cannot access 'a' before initialization

4. Properties and methods of the window object

In the global scope, variables declared by var and functions declared by function will automatically become properties and methods of the window object.

var a = 1;
function add() { };
console.log(window.a === a);
console.log(window.add === add);

Output:

true
true

5. Block Scope

var does not have block-level scope, but let and const do.
Use var to define the variable i in the for loop:

for (var i = 0; i < 3; i++) {
    // console.log(i);
}
console.log(i);

Output:

3

Use let to define the variable i in the for loop:

for (let i = 0; i < 3; i++) {
    // console.log(i);
}
console.log(i);

Output:

Uncaught ReferenceError: i is not defined

This concludes this article about the differences between the usage of var, let, and const in JavaScript. For more information on the usage of JavaScript var, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of the difference between var, let and 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

<<:  Implementation of automatic completion of Docker commands

>>:  HTML table markup tutorial (14): table header

Recommend

How to Develop a Progressive Web App (PWA)

Table of contents Overview Require URL of the app...

How to choose the format when using binlog in MySQL

Table of contents 1. Three modes of binlog 1.Stat...

MySQL table auto-increment id overflow fault review solution

Problem: The overflow of the auto-increment ID in...

Using react-virtualized to implement a long list of images with dynamic height

Table of contents Problems encountered during dev...

Summary of Textarea line break issues in HTML

Recently, I encountered a problem of whether the d...

How to hide elements on the Web and their advantages and disadvantages

Example source code: https://codepen.io/shadeed/p...

jQuery combined with CSS to achieve the return to top function

CSS Operations CSS $("").css(name|pro|[...

Use nginx + secondary domain name + https support

Step 1: Add a secondary domain name to the Alibab...

CSS3 realizes the animation of shuttle starry sky

Result: html <canvas id="starfield"&...

Sharing of the fast recovery solution for Mysql large SQL files

Preface In the process of using MySQL database, i...

How to quickly insert 10 million records into MySQL

I heard that there is an interview question: How ...

js method to realize shopping cart calculation

This article example shares the specific code of ...

HTML basics - CSS style sheets, style attributes, format and layout details

1. position : fixed Locked position (relative to ...

Why is the scroll bar on the web page set on the right?

Why are the scroll bars of the browsers and word ...