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

Resolving MySQL implicit conversion issues

1. Problem Description root@mysqldb 22:12: [xucl]...

Why the disk space is not released after deleting data in MySQL

Table of contents Problem Description Solution Pr...

How to use lodop print control in Vue to achieve browser compatible printing

Preface This control will have a watermark at the...

How to install and configure the Apache Web server

Learn how to host your own website on Apache, a r...

Vue Basics Introduction: Vuex Installation and Use

Table of contents 1. What is vuex 2. Installation...

Analysis of the configuration process of installing mariadb based on docker

1. Installation Search the mariadb version to be ...

JavaScript Closures Explained

Table of contents 1. What is a closure? 2. The ro...

Share 101 MySQL debugging and optimization tips

MySQL is a powerful open source database. With th...

JavaScript Canvas draws dynamic wireframe effect

This article shares the specific code of JavaScri...

Detailed explanation of single-row function code of date type in MySQL

Date-type single-row functions in MySQL: CURDATE(...

Util module in node.js tutorial example detailed explanation

Table of contents Starting from type judgment Str...

Pagination Examples and Good Practices

<br />Structure and hierarchy reduce complex...