ECMAScript “ES6 What is it? Overview about ES6
- Tram Ho
Until now many people only listen to Javascript but never heard of ES6, they mistakenly think ES6 is a completely new language that is very vague and ambiguous ?Well come to your series of articles you will better understand ES6 and its implementation.
- First we will have to understand what ES6 is and its origin!
What is ES6? Why is ES6 needed?
+ ES6 stands for ECMAScript 6, which is considered a set of advanced techniques of Javascript and is the latest version of ECMAScript standard. History
- When there was no ES, there was a scripting language specification developed by Brendan Eich of Netscape and it was named Mocha. It was later renamed LiveScript and finally Javascript. In December 1995, Sun Microsystem and Netscape announced Javascript. March 1996 Netscape Navigator 2.0 browser was launched and supported Javascript. Later, Microsoft launched a similar language called JScript to compete and avoid copyright issues. JScript was added in Internet Explorer 3.0 and released in August 1996.
- Netscape moved Javascript to Ecma International to do standardization and specification writing, called ECMA-262, which began in November 1996. And the name ECMAScript was formed here by agreement between the companies. participate in the standard process
- ECMAScript 6 (aka ES6, ES2015) is the latest version of the ECMAScript standard. This standard was approved in June 2015. It is an important upgrade for the ES since ES5 has been standardized in 2009.
ECMAScript is not the first version now. Here are the ECMAScript timelines and changes to each version:
| Version | Date of publication | Changes compared to the previous update | Author |
|---|---|---|---|
| first | 6/1997 | First version | Guy L. Steele Jr. |
| 2 | 6/1998 | Changes to help the specification conform to international standards ISO / IEC 16262 | Mike Cowlishaw |
| 3 | December 1999 | Add regular expressions, better string processing, new control statements, exception handling / error catching, more stringent definition of errors, format for output numbers and other improvements | Mike Cowlishaw |
| 4 | The fourth version was dropped due to the complexity of the structure of the languages. Many features proposed for the 4th version have been completely removed. | ||
| 5 | 12/2009 | Add “strict mode”, which is a subset to provide more thorough error checking and avoid faulty structures. Clarify many ambiguities in the 3rd version specification and implement adaptations to real-world actions that are different from that specification. Add some new features, such as getters and setters, support libraries for JSON, and more fully reflect the properties of the object. | Pratap Lakshman, Allen Wirfs-Brock |
| 5.1 | 6/2011 | Like the second version, the 5.1-oriented version makes ECMAScript compliant with the new international standard ISO / IEC 16262: 2011. | Pratap Lakshman, Allen Wirfs-Brock |
| 6 | 6/2015 | The 6th version, originally called ECMAScript 6 (ES6) but later renamed to ECMAScript 2015 (ES2015), has been added with this new syntax important for writing complex applications, include classes and modules, but define them semantically according to the same terms as ECMAScript 5 strict mode. Other new features include loops and for / of loops, Python initialization and initialization expressions, arrow functions, binary data, array entry, promises, numbers and mathematical operations, reflection and meta programming for virtual objects. | Allen Wirfs-Brock |
| 7 | 6/2016 | The seventh version, also known as ECMAScript 2016, aims to continue the subject of language reform, source isolation, effect control and library / tool tools from ES2015, including two new features: the exponent operator and includes the entire array. | Brian Terlson |
It seems like a lot of words, don’t you guys (I tried to extract gon and synthesize the most important knowledge) ?) here everyone knows what ES6 is! and its history and version, right, but don’t know why it is necessary to use ES6, I will explain it here kiki ?)
Why Should I Use ES6
As you know ES6 is an advanced technical set of javascript and it is a standard to follow. For example, you can imagine when a team has many members doing a project that each person has 1 type of language. different language, style 1 code, what will your project look like? So is ES6 it is a standard for frameworks to develop from there or let developers code js one of the best and clearest.
Conditions To Study ES6
Learning ES6 is not difficult at all, conditions to learn it you just need to know a little basic knowledge about javascript and something that is indispensable is the browser version 2015 and above you! Why is it ??? Because ES6 was born in 2015, the new version of 2015 version supports ES6 (Anyone who can’t use the old version, don’t tell me to just say wrong ^^)
Features of ES6
Here is a list of 10 best features of ES6 for busy software engineers (random arrangement):
- Block – Scoped Constructs Let and Cont
- Arrow Function
- Rest Parameter
- Destructuring Assignment in ES6
- Default Parameters in ES6
- Template Literals in ES6
- Multi-line String in ES6
- Enhanced Object Literals in ES6
- Promises in ES6
- Classes in ES6 In today’s lesson, I will introduce you to the first 5 features !!
1: Block-Scoped Constructs Let
In this section we see the first Block – Scoped right! Now we have to know what is Block – scoped? + Block Scoped is the scope in a block, meaning that it only works within the scope declared by the {} => folder See the picture below to better understand
1 |  Như trong hình thì vị trí 1 là một block, vị trí 2 là một block và vị trí 3 cũng là một block. Nếu để ý kỹ hơn nữa thì bạn thấy vị trí 1 sẽ bao trùm cả vị trí 2 + 3 và vị trí 2 bao trùm cả vị trí 3. Vậy Block Scoped là phạm vi chứa tất cả những đoạn code nằm bên trong cặp thẻ {}. |
- 1Và trong phần này chúng ta sẽ biết cách dùng từ khóa let để khai báo biến trong ES6 nhé!
Normally when declaring or defining a variable in a function you often use var properly, declaring this type is not wrong, but it is not optimal, people who see the example will understand that it is not optimized anywhere yet
The result when running the code above it will come out like this
Many people say it’s still true! Well, it is still true, but it is not necessary, because if I just want the tmp variable to exist in the if statement, it is not necessary outside, then declaring with var does not handle the memory, not optimal. But do not worry about it until ES6, it has optimized by error when declaring the variable with ” let ” => how to define this variable only exists within its block (Block Scope) Syntax: let var_name = var_value ; With such a narrow scope of operation, let is often used to declare variables of a temporary nature, meaning that it only lives within a range of activities of that block, not used through another location.
Let’s repeat the above example and use let
Its results will be like this
Everyone sees the difference! tmp variables will not be defined outside of block – scoped if!
Through this section people have one more way to define a variable, right – that’s nice, but don’t abuse it, depending on the situation when you want to use it.
Conclusion
Obviously, the use of let keyword has different advantages and disadvantages, so it doesn’t have to be added to use ?. For example, if you use a variable for the entire application and the variable changes continuously, you must use var to declare it.
Maybe you want to see:
2: Arrow Function in ES6
In this section we learn a way to define a new function by using a minus name =>, which is added to the ES6 suite with a completely new syntax.
In Javascript to create a function we normally use the following two methods:
When it comes to ES6 we have a new definition!
Let’s go to the example to compare!
+ The usual way
+ ES6
Comparing the two above, it is clear that the usual way is much simpler, and both code will produce the following results:
Now you think it is really long, isn’t it, the new version is no longer a problem ? it’s not – it’s new, it will be much more convenient. You see the following examples and it will be clear!
The content is a single statement:
Where in the body of the function there is only one command, you can use the following example:
This means that you can omit the {} pair, which follows the principle “if the {} body is just a statement, you can remove the {}” pair.
Where one parameter:
If you pass only one parameter, you can remove the pair ()
Where there are no parameters:
In the absence of input parameters, you use empty () pairs
Is everyone here different now? It’s a lot different! When using but this technique your code will be cleaner, clearer and much more professional
Note When using Arrow Function, you must pay attention to Binding the arrow ?
If you want to get down the line without error:
3: Destructuring Assignments in ES6
This feature is quite similar to the list function in PHP! That is, it will divide the values in the array into the variables in order or in other words it will
Tách các phần tử của Array hoặc Object thành nhiều biến chỉ bằng một đoạn code duy nhất.
Do not understand, then you see the following examples!
An example of a list function in PHP:
ES6
Result
So obviously Javascript ES6 is catching up with other languages already right ^^
A few more ways to handle it!
- If you want to get an element, leave the elements you do not want to empty
- Array
- Object
-Get the value according to the Object key
Nhưng nếu bạn cố ý truy cập vào một key không tồn tại thì sẽ bị lỗi undefined.
good
When you encounter these errors, you only need to assign the value to the variable in the array as ok
4: Default Parameters in ES6
Default Parameter is the default value of the parameter when passed to the function. For Javascript, many of you do not know this function even though ES5 provided us with hunting, but people feel that the way to create default values in ES5 is still not good so they have added a new way. much more and simpler in ES6.
Go to the example to understand
In ES5 to create the default value, use the || pair to set right inside the body of the function.
Result:
In ES6, there is a much simpler way to declare default values, this is similar to the declaration in PHP that uses the assignment right at the parameter declaration location for the function.
Result:
Is everyone here different now? Any type of transmission is possible, but I recommend using ES6 because when a project has a function, there are dozens of lines of code when I am confused, I will not know where I have interrupted, finding new ones, the code is bug, the deadline will reach the butt, but it will be very frustrating. But with ES6 we assign it directly to the function declaration position, intuitive, when anyone joins the project and read your code, you can understand the part of your code right rồi
5: Rest Parameters in ES6
Rest Parameters translates into English specialized information technology means the remaining parameters, this means that you can declare a function with an unknown number of parameters, this is a new feature that makes Javascript day become stronger. To declare the remaining parameters of a function, you put 3 dots. before the representative variable.
In which the other parameter is a Rest Parameter because it has 3 punctuation points in advance. Note other parameter, I can name it as well (but it should be standard convention ^^)
Another example
Result:
Conclusion: So in Javascript ES6, you are comfortable in passing parameters to the function. However, every one has two sides of it, if you transmit with an unknown number of parameters it is difficult to upgrade and maintain, so depending on the case you use!
Conclude
The article is also long, I think this article should only introduce 5 features only, the next article I will do next! Through this article, everyone understands what ES6 is ?) know what its use is ? there are many good parts waiting for you later.
Refer
- https://docs.google.com/presentation/d/178uzumpfN4h_8Vw8fMnV99tAgY-3Vh8u25B2zy8H5hg/edit#slide=id.p7
- http://es6-features.org/#Constants
My Blog
The difference between deep copy and shallow copy in JavaScript