On var, let and const

This article is a reprinted article
Original link: https://blog.csdn.net/unionz/article/details/80032048

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

      ECMAScript is an internationally adopted 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

         ECMAScript 6 was officially adopted as an international standard in June 2015.

 

1. Block level scope {}

        Scope in ES5 includes global scope and function scope. There is no concept of block scope.

         Block level scope is added in ES6. The block scope consists of {}, and {} in the if statement and for statement also belongs to the block scope.

    
  1. <script type= "text/javascript">
  2. {
  3. var a = 1;
  4. console.log(a); // 1
  5. }
  6. console.log(a); // 1
  7. // Variables defined by var can be accessed across block scopes.
  8. ( function A() {
  9. var b = 2;
  10. console.log(b); // 2
  11. })();
  12. // console.log(b); // report errors,
  13. // It can be seen that variables defined through var cannot be accessed across function scopes
  14. if( true) {
  15. var c = 3;
  16. }
  17. console.log(c); // 3
  18. for( var i = 0; i < 4; i ++) {
  19. var d = 5;
  20. };
  21. console.log(i); // 4 (at the end of the cycle, i is already 4, so i here is 4)
  22. console.log(d); // 5
  23. // Variables defined by var in if statement and for statement can be accessed from outside,
  24. // It can be seen that if statements and for statements belong to block scope, not function scope.
  25. </script>

 

 

2. Differences among VaR, let and const

 

 

  1. Variables defined by var have no block concept and can be accessed across blocks, not functions.
  2. let defined variables can only be accessed within the block scope, not across blocks or functions.
  3. const is used to define constants. It must be initialized (that is, it must be assigned) when used. It can only be accessed in the block scope and cannot be modified.
    
  1. <script type= "text/javascript">
  2. // Block scope
  3. {
  4. var a = 1;
  5. let b = 2;
  6. const c = 3;
  7. // c = 4; // report errors
  8. var aa;
  9. let bb;
  10. // const cc; // report errors
  11. console.log(a); // 1
  12. console.log(b); // 2
  13. console.log(c); // 3
  14. console.log(aa); // undefined
  15. console.log(bb); // undefined
  16. }
  17. console.log(a); // 1
  18. // console.log(b); // report errors
  19. // console.log(c); // report errors
  20. // Function scope
  21. ( function A() {
  22. var d = 5;
  23. let e = 6;
  24. const f = 7;
  25. console.log(d); // 5
  26. console.log(e); // 6
  27. console.log(f); // 7
  28. })();
  29. // console.log(d); // report errors
  30. // console.log(e); // report errors
  31. // console.log(f); // report errors
  32. </script>

 

3. Can object attributes defined by const be changed

This is a question I met during the interview today. It said const can't be modified, so I happily said no, but I found it wrong after the actual test. Record it here.

    
  1. const person = {
  2. name : 'jiuke',
  3. sex : 'male'
  4. }
  5. person.name = 'test'
  6. console.log(person.name)

Run the above code and 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 of the object is saved in person, which means that const only ensures that the pointer does not change, and modifying the object's properties will not change the pointer of the object, so it is allowed. In other words, as long as the pointer of the reference type defined by const does not change, other changes are allowed no matter how.

Then we try to modify the pointer and let person point to a new object. Sure enough, an error is reported

    
  1. const person = {
  2. name : 'jiuke',
  3. sex : 'male'
  4. }
  5. person = {
  6. name : 'test',
  7. sex : 'male'
  8. }

Tags: Javascript html5 html

Posted on Wed, 24 Nov 2021 02:51:16 -0500 by imperium2335