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

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

First, a common question is, what is the relationship between ECMAScript and JavaScript?

ECMAScript is an internationally standardized scripting language. JavaScript consists of ECMAScript, DOM and BOM. It can be simply understood as: ECMAScript is the language specification of JavaScript, and JavaScript is the implementation and extension of ECMAScript.

In 2011, ECMAScript version 5.1 was released. Most of us used ES5 before.

In June 2015, ECMAScript 6 was officially passed and became an international standard.

1. Block scope {}

The scopes in ES5 are: global scope and function scope. There is no concept of block scope.

Block scope was added in ES6. The block scope is included by { }, and the { } in if statements and for statements also belong to the block scope.

<script type="text/javascript">
	
    {
        var a = 1;
        console.log(a); // 1
    }
    console.log(a); // 1
    // Variables defined by var can be accessed across block scopes.
 
    (function A() {
        var b = 2;
        console.log(b); // 2
    })();
    // console.log(b); // error,
    // It can be seen that variables defined by var cannot be accessed across function scopes if(true) {
        var c = 3;
    }
    console.log(c); // 3
    for(var i = 0; i < 4; i ++) {
        var d = 5;
    };
    console.log(i); // 4 (i is already 4 at the end of the loop, so i is 4 here)
    console.log(d); // 5
    // Variables defined with var in if statements and for statements can be accessed from outside.
    // It can be seen that if statements and for statements belong to block scope, not function scope.
 
</script>

2. The difference between var, let, and const

  1. Variables defined by var have no concept of blocks and can be accessed across blocks but not across functions.
  2. Variables defined by let can only be accessed in block scope, not across blocks or functions.
  3. const is used to define constants, which must be initialized (that is, must be assigned a value) when used, can only be accessed in block scope, and cannot be modified.
<script type="text/javascript">
    // Block scope {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // error var aa;
        let bb;
        // const cc; // error console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // error // console.log(c); // error // function scope (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
 
    })();
    // console.log(d); // error // console.log(e); // error // console.log(f); // error</script>

3. Can the object properties defined by const be changed?

This is a question I encountered during an interview today. It said that const cannot be modified, so I readily said no. However, after actually testing it, I found that it was wrong, so I recorded it here.

 const person = {
     name : 'jiuke',
     sex : 'male'
 }
 
 person.name = 'test'
 
 console.log(person.name)

Running the above code, we find that the name attribute of the person object has indeed been modified. What's going on?

Because the object is of reference type, only the pointer to the object is stored in person, which means that const only guarantees that the pointer does not change. Modifying the properties of the object will not change the pointer of the object, so it is allowed. That is to say, as long as the pointer of the reference type defined by const does not change, any other changes are allowed.

Then we try to modify the pointer to let person point to a new object, and it returns an error.

const person = {
   name : 'jiuke',
   sex : 'male'
}
 
person = {
   name : 'test',
   sex : 'male'
}

This is the end of this article about the detailed case analysis of the differences between var, let and const in JavaScript es6. For more information about the differences between var, let and const in JavaScript es6, please search for 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
  • What are the differences between var let const in JavaScript
  • 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

<<:  A brief discussion on simulating multi-threaded and multi-process crashes in Linux

>>:  MySQL full backup and quick recovery methods

Recommend

When the interviewer asked the difference between char and varchar in mysql

Table of contents Difference between char and var...

An IE crash bug

Copy code The code is as follows: <style type=...

Example code for implementing dotted border scrolling effect with CSS

We often see a cool effect where the mouse hovers...

Sample code for implementing 3D rotation effect using pure CSS

Mainly use the preserve-3d and perspective proper...

Use CSS3 to implement button hover flash dynamic special effects code

We have introduced how to create a waterfall layo...

Tutorial for installing MySQL 8.0.18 under Windows (Community Edition)

This article briefly introduces how to install My...

Let's talk about the LIMIT statement in MySQL in detail

Table of contents question Server layer and stora...

What is BFC? How to clear floats using CSS pseudo elements

BFC Concept: The block formatting context is an i...

How to use selenium+testng to realize web automation in docker

Preface After a long time of reading various mate...

CSS3 uses scale() and rotate() to achieve zooming and rotation

1. scale() method Zoom refers to "reducing&q...

Detailed steps for quick installation of openshift

The fastest way to experience the latest version ...

ftp remotely connect to Linux via SSH

First install ssh in Linux, taking centos as an e...