JavaScript Guide, Part 9: ES? ES? and ES9 Features Overview

 
3r3-31. Today, in the ninth part of the translation of the jаvascript manual, we will review the features that have emerged in the language thanks to the standards ES? ES8 and ES9.
 
 
→ Part 1: first program, language features, standards 3—3-3055.
 
→
Part 2: The style of the code and the structure of the programs 3r31055.
 
→
Part 3: variables, data types, expressions, objects 3r31055.
 
→
Part 4: features
 
→ Part 5: Arrays and Cycles
 
→ Part 6: exceptions, semicolons, pattern literals
 
→ Part 7: strict mode, this keyword, events, modules, mathematical calculations 3r31055.
 
→
Part 8: an overview of the features of the standard ES6 3r31055.
 
 
3r340.
 

 
3r31036. ES7 Standard 3r31037. 3r31038.
 
The ES7 standard, which, in accordance with the official terminology, is called ES201? was released in the summer of 2016. In comparison with ES? it brought not so much new to the language. In particular, we are talking about the following:
 
 
3r3666.  
Method Array.prototype.includes () . 3r38080.  
Exponentiation operator. 3r38080.  
3r38282.
 
3r3802. 3r31036. ArArray.prototype.includes ()
 
Method Array.prototype.includes () designed to check for the presence of an element in the array. Finding the required in the array, it returns true , not finding - false . Prior to ES? the method served to perform the same operation. indexOf () which returns, in the case of finding an element, the first index by which it can be found in the array. If same 3r31022. indexOf () Does not find an element - it returns the number -1 .
 
 
According to the jаvascript type conversion rules, the number is -1 converted to true . As a result, to check the results of the work 3r31022. indexOf () should not use a particularly convenient design of the following form.
 
 
3r3-1028. 3r31029. if ([1,2].indexOf (3) === -1) {
console.log ('Not found')
}
 
If in a similar situation, believing that indexOf () , not finding the item, returns false , take advantage of something like the one below, the code will not work correctly.
 
 
3r3-1028. 3r31029. if (![1,2].indexOf (3)) {//Wrong
console.log ('Not found')
}
 
In this case, it turns out that the design ![1,2].indexOf (3) gives false .
 
 
Using the method includes () similar comparisons look much more logical.
 
 
3r3-1028. 3r31029. if (![1,2].includes (3)) {3r31067. console.log ('Not found')
}
 
In this case, the design [1,2].includes (3) returns false , this value operator ! 3r3-1031. turns into true and the console receives a message stating that the desired element in the array was not found.
 
 
3r3802. 3r31036. ▍ The exponentiation operator
 
The exponentiation operator performs the same function as the method. Math.pow () , but it is more convenient to use it than a library function, since it is part of the language.
 
 
3r3-1028. 3r31029. Math.pow (? 2) == 4 ** 2 //true
 
This operator can be considered a nice addition JS, which is useful in applications that perform certain calculations. A similar operator exists in other programming languages.
 
 

3r31036. ES8 Standard 3r31037. 3r31038.
 
Standard ES8 (ES2017) was released in 2017. He, like ES? introduced not so much new to the language. Namely, we are talking about the following features: 3r31051.  
 
3r3666.  

Supplement lines to a given length. 3r38080.  
Method Object.values ​​() . 3r38080.  
Method Object.entries () . 3r38080.  
Method Object.getOwnPropertyDescriptors () . 3r38080.  
Trailing commas in function parameters. 3r38080.  
Asynchronous functions. 3r38080.  
Shared memory and atomic operations. 3r38080.  
3r38282.
 
3r3802. 3r31036. ▍Add lines up to a given length
 
In ES? there are two new object methods 3r31022. String - 3r31022. padStart () and 3r31022. padEnd () .
 
 
Method padStart () fills the current line with another line until the final line reaches the desired length. Filling occurs at the beginning of the line (left). Here is how to use this method.
 
 
3r3-1028. 3r31029. str.padStart (targetLength[, padString])
 
Here str - This is the current line, targetLength - the length of the final line (if it is less than the length of the current line - this line will be returned unchanged), 3r31022. padString - optional parameter - the string used to populate the current line. If parameter 3r31022. padString not specified - to add the current line to the specified length, use the space character.
 
 
Method padEnd () similar to r3r31022. padStart () but the line is filled to the right.
 
 
Consider examples of the use of these methods.
 
 
3r3-1028. 3r31029. const str = 'test'.padStart (10)
const str1 = 'test'.padEnd (1?' * ')
console.log (`'$ {str}'`) //'test'
console.log (`'$ {str1}'`) //'test ******'
 
Here when using 3r31022. padStart () indicating only the desired length of the result line, spaces were added to the beginning of the source line. When using 3r31022. padEnd () indicating the length of the final line and the line for adding it to the end of the original line, the symbols 3r310222 were added. * .
 
 
3r3802. 3r31036. Object Method Object.values ​​()
 
This method returns an array containing the values ​​of the object's own properties, that is, properties that the object itself contains, and not those that are accessible to it through a chain of prototypes.
 
 
Here's how to use it.
 
 
3r3-1028. 3r31029. const person = {name: 'Fred', age: 87}
const personValues ​​= Object.values ​​(person)
console.log (personValues) //['Fred', 87]3r3-1031.
 
This method also applies to arrays.
 
 
3r3802. 3r31036. Object Method Object.entries ()
 
This method returns an array, each element of which is also an array containing, in the format [key, value]3r3-1031. , keys and values ​​of the object's own properties.
 
 
3r3-1028. 3r31029. const person = {name: 'Fred', age: 87}
const personValues ​​= Object.entries (person)
console.log (personValues) //[['name', 'Fred'],['age', 87]]
 
When applying this method to arrays, indexes of elements are displayed as keys, and what is stored in the array at the corresponding indices is displayed as values.
 
 
3r3802. 3r31036. GetGetOwnPropertyDescriptors () method
 
This method returns information about all the object's own properties. Associated attribute sets (descriptors) are associated with properties of objects. In particular, we are talking about the following attributes:
 
 
3r3666.  
3r31022. value - the value of the object property. 3r38080.  
3r31022. writable - contains 3r31022. true if the property can be changed. 3r38080.  
3r31022. get - contains the getter function associated with the property, or, if there is no such function, undefined . 3r38080.  
3r31022. set - contains the setter function for the property or undefined . 3r38080.  
3r31022. configurable - if there will be false - the property cannot be deleted, its attributes cannot be changed except for the value. 3r38080.  
3r31022. enumerable - if this property contains true - property 3r31031. is enumerable. 3r38080.  
3r38282.
 
Here is how to use this method.
 
 
3r3-1028. 3r31029. Object.getOwnPropertyDescriptors (obj)
 
It takes an object whose property information you want to know, and returns an object containing this information.
 
 
3r3-1028. 3r31029. const person = {name: 'Fred', age: 87}
const propDescr = Object.getOwnPropertyDescriptors (person)
console.log (propDescr)
/* 3r31067. {name:
{value: 'Fred',
writable: true,
enumerable: true,
configurable: true},
age:
{value: 8?
writable: true,
enumerable: true,
configurable: true}}
* /
 
Why do you need this method? The fact is that it allows you to create small copies of objects, copying, among other properties, getters and setters. This could not be done using to copy objects. Object.assign () which appeared in the ES6 standard.
 
 
In the following example, there is an object with a setter that outputs, using 3r31022. console.log () what they are trying to write in its corresponding property.
 
 
3r3-1028. 3r31029. const person1 = {
set name (newName) {
console.log (newName)
}
}
person1.name = 'x' //x
 
Let's try to copy this object using the method assign () 3r31031. .
 
 
3r3-1028. 3r31029. const person2 = {}
Object.assign (person? person1)
person2.name = 'x' //nothing gets into the console, the setter is not copied
 
As you can see, this approach does not work. Property name which in the original object was a setter, is now represented as a regular property.
 
 
Now let's copy the object using methods Object.defineProperties () (he appeared in ES5.1) and 3r31022. Object.getOwnPropertyDescriptors () .
 
 
3r3-1028. 3r31029. const person3 = {}
Object.defineProperties (person?
Object.getOwnPropertyDescriptors (person1))
person3.name = 'x' //x
 
Here in the copy of the object the setter remained.
 
 
It should be noted that the limitations specific to Object.assign () ,characteristic of the method Object.create () when using it to clone objects.
 
 
3r3802. 3r31036. ▍Completed commas in function parameters
 
This feature allows you to leave a comma at the end of the list of parameters or arguments, respectively, when you declare and when you call functions.
 
 
3r3-1028. 3r31029. const doSomething = (
var?
var?
) => {
//3r31067.}
doSomething (
'test1',
'test2',
)
 
This improves the usability of version control systems. Namely, we are talking about the fact that, when adding new parameters to a function, it is not necessary to change the existing code just to insert a comma.
 
 
3r3802. 3r31036. ▍Asynchronous functions
 
In the ES2017 standard, the design 3r31022 appeared. async /await , which can be considered the most important innovation of this version of the language.
 
 
Asynchronous functions are a combination of promises and generators; they simplify constructions, which were previously described with a large amount of template code and inconvenient promis chains. In fact, we are talking about high-level abstraction over promises.
 
 
When promises appeared in the ES2015 standard, they were designed to solve existing problems with asynchronous code, which they did. But in the two years that have shared the ES2015 and ES2017 standards, it has become clear that promises cannot be considered the final solution to these problems.
 
 
In particular, promises were aimed at solving the problem of “hell callbacks”, but, having solved this problem, they themselves showed themselves not with the best hand due to the complication of the code in which they are used. In fact, the design async /await solves the problem of promises and improves the usability of asynchronous code.
 
 
Consider an example.
 
 
3r3-1028. 3r31029. function doSomethingAsync () {
return new Promise ((resolve) => {
setTimeout (() => resolve ('I did something'), 3000)
})
}
async function doSomething () {
console.log (await doSomethingAsync ())
}
console.log ('Before')
doSomething ()
console.log ('After')
 
This code will display the following in the console.
 
 
3r3-1028. 3r31029. Before
After
I did something
 
As you can see, after calling doSomething () the program continues to run after 3r3-31022. Before 3r3-31022 is immediately output to the console. After , and after three seconds have passed, is displayed. I did something .
 
 

Sequential call of asynchronous functions 3r3-31017.
 
If necessary, asynchronous functions can form something like call chains. Such constructions have better readability than something similar, based solely on promises. This can be seen in the following example.
 
 
3r3-1028. 3r31029. function promiseToDoSomething () {
return new Promise ((resolve) => {
setTimeout (() => resolve ('I did something'), 10000)
})
}
async function watchOverSomeoneDoingSomething () {
const something = await promiseToDoSomething ()
return something + 'and I watched'
}
async function watchOverSomeoneWatchingSomeoneDoingSomething () {
const something = await watchOverSomeoneDoingSomething ()
return something + 'and I watched as well'
}
watchOverSomeoneWatchingSomeoneDoingSomething (). then ((res) => {
console.log (res) //I used something and I watched and watched as well
})
 
3r3802. 3r31036. ▍Shared memory and atomic operations
 
Here we are talking about the object 3r3r6646. SharedArrayBuffer which allows describing shared memory areas, and about object 3r3648. Atomics which contains a set of atomic operations in the form of static methods. Details about the possibilities that these objects give to the programmer can be read 3r3-3650. here is .
 
 

3r31036. ES9 Standard 3r31037. 3r31038.
 
ES9 (ES2018) is the latest version of the standard at the time of publication of this material. Here are its main features:
 
 
3r3666.  

Application of spread and rest operators to objects. 3r38080.  
Asynchronous iterators. 3r38080.  
Method Promise.prototype.finally () . 3r38080.  
Regular Expression Improvements 3r38080.  
3r38282.
 
3r3802. 3r31036. ▍Application of the spread and rest operators to objects
 
We have already spoken about the rest and spread operators, which appeared in ES6 and can be used to work with arrays. Both of them look like three points. The rest statement, in the following example of destructuring an array, allows you to place its first and second elements in the constants first and 3r31022. second , and all the rest - in the constant others .
 
 
3r3-1028. 3r31029. const numbers =[1, 2, 3, 4, 5]
const[first, second, others]= numbers
console.log (first) //1
console.log (second) //2
console.log (others) //[3, 4, 5 ]3r3-1031.
 
Operator spread allows you to pass arrays to functions that expect normal parameter lists.
 
 
3r3-1028. 3r31029. const numbers =[1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const res = sum ( numbers)
console.log (res) //15
 
Now, using the same approach, you can work with objects. Here is an example of using the rest operator in a destructive assignment operation.
 
 
3r3-1028. 3r31029. const {first, second, others} =
{first: ? second: ? third: ? fourth: ? fifth: 5}
console.log (first) //1
console.log (second) //2
console.log (others) //{third: ? fourth: ? fifth: 5}
 
Here is the spread operator used when creating a new object based on an existing one. This example continues the previous one.
 
 
3r3-1028. 3r31029. const items = {first, second, others}
console.log (items) //{first: ? second: ? third: ? fourth: ? fifth: 5}
 
3r3802. 3r31036. ▍Asynchronous iterators
 
New design 3r31022. for-await-of allows you to call asynchronous functions that return promises in cycles. Such cycles are waiting for promise resolution before proceeding to the next step. Here's what it looks like.
 
 
3r3-1028. 3r31029. for await (const line of readLines (filePath)) {
console.log (line)
}
 
It should be noted that such cycles should be used in asynchronous functions - just as it is done when working with a 3r31022 design. async /await .
 
 
3r3802. 3r31036. Prom Method Promise.prototype.finally ()
 
If the promise is successfully resolved, the next method 3r31022 is called. then () 3r31031. . If something goes wrong, the method is called. catch () . Method finally () allows you to execute some code, regardless of what happened before.
 
 
3r3-1028. 3r31029. fetch ('file.json')
.then (data => data.json ())
.catch (error => console.error (error))
.finally (() => console.log ('finished')) 3r31031.
 
3r3802. 3r31036. Регуляр Improving regular expressions
 
In regular expressions, the ability to retrospectively check strings (3r31022.? 3r33847.). This allows you to search in the lines for some constructions, before which there are some other constructions.
 
 
The possibility of advanced checks using design 3r31022. ? = , was available in regular expressions implemented in jаvascript and up to the ES2018 standard. Such checks let you know if another fragment follows a fragment of a string.
 
 
3r3-1028. 3r31029. const r = /Roger (? = Waters) /
const res1 = r.test ('Roger is my dog')
const res2 = r.test ('Roger is my dog ​​and musician')
console.log (res1) //false
console.log (res2) //true
 
Construction ?! 3r3-1031. performs the inverse operation - a match will be found only if there is no other line following the specified string.
 
 
3r3-1028. 3r31029. const r = /Roger (?! Waters) /g
const res1 = r.test ('Roger is my dog')
const res2 = r.test ('Roger is my dog ​​and musician')
console.log (res1) //true
console.log (res2) //false
 
In retrospective verification, as already mentioned, the construction is used. ? 3r33847. .
 
 
3r3-1028. 3r31029. const r = /(? <=Roger) Waters/
const res1 = r.test ('Pink Waters is my dog')
const res2 = r.test ('Roger my dog ​​and Roger Waters is a famous musician')
console. log (res1) //false
console.log (res2) //true
 
The inverse operation can be performed using the construction. ? 3r33838. .
 
 
3r3-1028. 3r31029. const r = /(?
 


Regular Expression Control Unicode Sequences 3r3-31017.
 
In regular expressions, you can use the class d corresponding to any digit, class s corresponding to any whitespace character, class w that matches any alphanumeric character, and so on. The feature in question extends the set of classes that can be used in regular expressions, allowing you to work with Unicode sequences. This is a class p {} 3r31031. and about the opposite of his class P {} 3r31031. .
 
 
In Unicode, each character has a set of properties. These properties are indicated in curly brackets of the group p {} 3r31031. . For example, property Script 3r31031. defines the family of languages ​​to which the symbol belongs, property ASCII 3r31031. , logical, takes the value true for ASCII characters, and so on. For example, find out if certain strings contain exclusively ASCII characters.
 
 
3r3-1028. 3r31029. console.log (r.test ('abc')) //true
console.log (r.test ('ABC @')) //true
console.log (r.test ('ABCZH')) //false
31.
 
Property ASCII_Hex_Digit takes the value true only for characters that can be used to write hexadecimal numbers.
 
 
3r3-1028. 3r31029. const r = /^ p {ASCII_Hex_Digit} + $ /u
console.log (r.test ('0123456789ABCDEF')) //true
console.log (r.test ('H')) //false one.  
There are many other similar properties that are used the same way as described above. Among them - 3r31022. Uppercase , 3r31022. Lowercase , 3r31022. White_Space , 3r31022. Alphabetic 3r31031. , 3r31022. Emoji .
 
 
Here, for example, using the property Script 3r31031. determine which alphabet is used in the string. Here we check the string for the use of the Greek alphabet.
 
 
3r3-1028. 3r31029. const r = /^ p {Script = Greek} + $ /u
console.log (r.test ('ελληνικά')) //true
console.log (r.test ('hey')) //false
 
Details about these properties can be read here is .
 
 


Named groups 3r3-31017.
 
Captured character groups in ES2018 can be given names. Here's what it looks like.
 
 
3r3-1028. 3r31029. const re = /(? 3r37777. d {4}) - (? 3r33939. d {2}) - (? 3r33979. d {2}) /3r31067. const result = re.exec ('2015-01-02')
console.log (result)
/* 3r31067.['2015-01-02',
 '2015',
 '01',
 '02',
 index: 0,
 input: '2015-01-02',
 groups: { year: '2015', month: '01', day: '02' } ]
* /


 
Without the use of named groups, the same data would be available only as elements of an array.
 
 
3r3-1028. 3r31029. const re = /(d {4}) - (d {2}) - (d {2}) /
const result = re.exec ('2015-01-02')
console.log (result)
/* 3r31067.['2015-01-02',
 '2015',
 '01',
 '02',
 index: 0,
 input: '2015-01-02',
 groups: undefined ]
* /
 

Regular expression flag s

 
Use of the flag 3r31022. s leads to the fact that the symbol . 3r3-1031. (dot) will, among other things, correspond to the newline character. Without the use of this flag, a dot matches any character except a newline character.
 
 
3r3-1028. 3r31029. console.log (/hi.welcome/.test ('hinwelcome')) //false
console.log (/hi.welcome/s.test ('hinwelcome')) //true
 
3r31036. Results
3r31038.
 
With this material we complete the publication of translations 3-33-31041. given 3r31055. jаvascript tutorials. We hope these publications have helped those who have not worked with jаvascript before, to take their first steps in programming in this language.
 
 
3r31047. Dear readers! 3r31048. If you have not written in JS before and mastered this language in this manual, please share your impressions.
 
 
3r31053. 3r31054.
! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r31061.