Tiếng Việt

Some concepts in ES6

Bronie.png

Author

Huybu

08/14/2022

Share

ES6.png

JavaScript (JS) is an interpreted programming language developed from the concept of prototypes. It is the most commonly used programming language today. This language is widely used for web pages (client side) and also server side (with Node.JS).

Since its launch, JS has undergone 2 major revisions. ECMAScript 2009 also known as ES5 is the first major revision to JS and ECMAScript 2015 also known as ES6 is the second major revision to JS. After these 2 major revisions JS continues to be modified many other revisions like: ECMAScript 2016 and 2017 but they are not called ES7 and ES8. As of 2016, new versions are named by year (ECMAScript 2016/2017/2018).

Of the above revisions, ES6 is the most important, adding important new syntax for writing complex applications, including classes and modules. And in this blog I will talk about a few important features updated in ES6.

1. Arrow functions

Basically, the arrow function is exactly the same as a normal function, but of course there will be a little difference, namely:

  • The syntax of arrow function is more compact than using "=>" with only 2 characters instead of using the keyword "function" with 8 characters like a normal function, so it helps to keep your code clean. will be more. some-concepts-in-ES6-1.png

The arrow function does not create a new scope for the this keyword when assigned to a property inside an object. This means that the this keyword inside a function will be different depending on the type of function (arrow or normal) when the function is assigned a property inside the object.

some-concepts-in-ES6-2.png

2. Block scope

Block scope is scoped within a block (within {} ), which means that variables declared in a block only exist within that block.

For example, when you declare a variable a in block scope 1 and then call it in both block scope 1 and 2 like the following code:

some-concepts-in-ES6-3.png

After running the above code you get the result: in block 1, variable a will be logged out normally and in block 2, you will get an error "a is not defined" because variable a is not declared in block scope 2.

some-concepts-in-ES6-4.png

3 . keyword let, const

The keyword to declare a variable in JS before ES6 revision was only var keyword and in ES6 revision we have two new keywords for variable declaration let and const.

And of course it is not natural that it is born. Let , const , var are all used to declare a variable but they will have a few differences.

The var keyword is a concept before ES6 and before ES6 there is no concept of block scope and it is a variable that complies with the global scope, so the ones declared with the var keyword will not comply block scope. This means that even if they are declared inside one block scope, you can still call them inside another block scope.

Go back to the example from the block scope section if you change the let keyword to the var keyword. some-concepts-in-ES6-5.png

Then the result will be different this time, in both blocks, the variable a can be logged.

some-concepts-in-ES6-6.png

What about the const keyword, if we use the const keyword to declare the variable in the above example, we will get the same result as when we use the let keyword to declare the variable a.

From there we see the variables declared with the keyword:

  • var will follow the global scope (it will persist throughout the program).

  • const , let conform to block scope (it only exists in the block scope in which it is declared).

Reading this far, you are probably wondering what const and let are? How are they different?

Let's see an example:

some-concepts-in-ES6-7.png

And the result will certainly be the line "a: 10" will be logged. But if you replace the let keyword with the const keyword you will get an "Assignment to constant variable" error.

some-concepts-in-ES6-8.png

From the above example, you can certainly see how let and const are different. Variables declared with the let keyword will be mutable, but if the variable is declared with the const keyword, they cannot be changed.

And a not very important problem you will be prompted by the IDE if you encounter this problem but you should be aware. If it is a variable that has been declared with the let or const keyword, you will not be able to use the let or const keyword to declare them again.

some-concepts-in-ES6-9.png

And there is one more thing that you should know about const. keyword As mentioned above variables declared with const keyword will not be able to change their value. However, if their value is an object, you can still change their property value. For example:

some-concepts-in-ES6-10.png

In this blog post I covered 4 new concepts added in the ES6 update. still many more concepts you can read more athttps://www.w3schools.com/js/js_es6.asp

Share

Contact Us