ES6 new syntax (1) – the difference between let, const and var

Time:2022-11-24

Introduction to ES6

ES6 is the abbreviation of ECMAScript 6.0, which is the next generation standard of javascript language, which was officially released in June 2015. The purpose is to unify the grammatical standards of javascript, which can be used to develop large-scale applications, and is called an enterprise-level development language.

The relationship between ES6 and JavaScript:
ES6 is the specification standard of JavaScript, and JavaScript is an implementation of ES6.

variable/assignment

block scope {}
The scopes in ES5 are: global scope, function scope, there is no concept of block scope. ES6 has added block-level scope, which is included by {}, and {} in the if statement also belongs to block-level scope.

// Variables defined can be accessed across block scopes
{
  var a = 12;
  console.log("a",a)
}
console.log("a",a)
//Variables defined by var cannot be accessed across function scopes
(function(){
  var b = 5;
})()
console.log("b",b) // not defined

The difference between var and let and const:

type definition variable type scope
var Can be defined repeatedly It is a variable and cannot be restricted from modification no block scope
let Cannot be defined repeatedly is a variable Block-level scope, cannot be accessed across blocks
const Cannot be defined repeatedly It is a constant and must be assigned a value when initializing Block-level scope, cannot be accessed across blocks

Can the object properties defined by const be changed?

Example 1: Modify the attribute value of the object.

const per = {
  name:'Qianqian'
}
per.name = "I am hip-hop"
console.log("per.name",per.name) //print out that I am hip-hop

Through the previous example, we found that the properties of the object can be modified. What is the reason?

The object is a reference type, and only the pointer of the object is saved in per, which means that the pointer will not change. Modifying the properties of the object will not change the pointer of the object, so it is allowed to modify.

assignment:The newly added deconstruction assignment is to disassemble and assign values ​​to data. Two rules for destructuring assignments:

  • The left and right patterns must be the same
  • The definition and assignment must be done synchronously.

Example 2: Correct structure assignment

let [a,b,c] = [1,2,3]
console.log("a",a)//1
console.log("b",b)//2
console.log("c",c)//3

Example 3: When the patterns on the left and right sides are the same, but the length of the data is different

let [bar, foo] = [1];
console.log("bar",bar)//1
console.log("foo",foo) // undefined

The above deconstruction is unsuccessful and the variable value is equal to undefined.

Note: Objects can also be deconstructed, but it should be noted that there is a big difference between the deconstruction of objects and arrays. The properties of objects have no order, and variables must have the same name as properties to get the correct value.

Example 4: Object destructuring assignment

let { bar,foo } = {
  foo:'aaa',
  bar:'bbb'
}
console.log('bar',bar)
console.log('foo',foo)
console.log('baz',baz) // not defined

Recommended Today

4EVERLAND Ar Hosting: Host your website on Arweave with one click

We are happy to announce that 4EVERLAND Hosting has added support for Arweave. As we all know, 4EVERLAND Hosting has been one of the most important products on our platform. After Bucket supports the Arweave ecosystem, the realization of Ar hosting service also greatly improves the functions of 4EVERLAND hosting products, which makes 4EVERLAND hosting […]