ES8 came out and here are its main new features.

New features of the eighth edition of EcmaScript.



EcmaScript 8 or EcmaScript 2017 was officially released by the TC39 committee at the end of June. It seems we talked a lot about EcmaScript last year and it was not just that. Currently, the standard is the release of a new specification once a year. ES6 was published in 2015, and ES7 in 2016, but does anyone remember when ES5 came out? That was in 2009, before the magic takeoff javascript.

So, we are following the changes in the development of a stable JavaScript language, and now we need to add ES8 to our lexicon.
')

Severe people can take a deep breath and read the web or PDF version of the specification. For the rest of this article, we will look at the main new features of ES8 with examples.

Padding strings

In this section, two functions are added to the String object: padStart and padEnd. As can be understood from their name, the purpose of these functions is to add a line from the beginning or the end so that as a result the line will reach the specified length . You can add a string with certain characters or spaces by default.

Here is the declaration of functions:

str.padStart(targetLength [, padString]) str.padEnd(targetLength [, padString]) 

As you can see, the first parameter of these targetLength functions is the total length of the targetLength string. The second optional parameter padString is a string to supplement the source string. The default is a space.

 'es8'.padStart(2); // 'es8' 'es8'.padStart(5); // ' es8' 'es8'.padStart(6, 'woof'); // 'wooes8' 'es8'.padStart(14, 'wow'); // 'wowwowwowwoes8' 'es8'.padStart(7, '0'); // '0000es8' 'es8'.padEnd(2); // 'es8' 'es8'.padEnd(5); // 'es8 ' 'es8'.padEnd(6, 'woof'); // 'es8woo' 'es8'.padEnd(14, 'wow'); // 'es8wowwowwowwo' 'es8'.padEnd(7, '6'); // 'es86666' 

Object.values ​​and Object.entries

The Object.values method returns an array of the enumerated properties of the passed object in the same order that the for in loop provides.
The function declaration is trivial:

 Object.values(obj) 

The obj parameter is the source object for the operation. This can be an object or an array (which is an object with such indices [10, 20, 30] -> {0: 10, 1: 20, 2: 30}).

 const obj = { x: 'xxx', y: 1 }; Object.values(obj); // ['xxx', 1] const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' }; Object.values(obj); // ['e', 's', '8'] //     ,   //      const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' }; Object.values(obj); // ['yyy', 'zzz', 'xxx'] Object.values('es8'); // ['e', 's', '8'] 

The Object.entries method returns an array of the enumerated properties of the passed object in pairs [, ] in the same order as Object.values .

The declaration is trivial:

 const obj = { x: 'xxx', y: 1 }; Object.entries(obj); // [['x', 'xxx'], ['y', 1]] const obj = ['e', 's', '8']; Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']] const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' }; Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']] Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']] 

Object.getOwnPropertyDescriptors

The getOwnPropertyDescriptors method returns descriptors of the own properties of the specified object. A property descriptor of its own is one that is defined directly on the object, and not inherited from its prototype.
The function declaration is as follows:

 Object.getOwnPropertyDescriptor(obj, prop) 

obj is the source object and prop is the name of the property whose handle you want to get. Possible keys as a result: configurable, enumerable, writable, get, set and value .

 const obj = { get es8() { return 888; } }; Object.getOwnPropertyDescriptor(obj, 'es8'); // { // configurable: true, // enumerable: true, // get: function es8(){}, //   // set: undefined // } 

Data descriptors are very important for such advanced features as decorators .

Extra commas in function parameter list and call

The ability to specify extra commas in the parameters of the function allows us not to receive an error ( SyntaxError ) when we added a comma at the end of the list:

 function es8(var1, var2, var3,) { // ... } 

As in the function declaration, this syntax can also be used when calling it:

 es8(10, 20, 30,); 

This feature was inspired by the extra commas in the object literals { x: 1, } and array literals [10, 20, 30,] .

Asynchronous functions

The async function declaration defines an asynchronous function that returns an AsyncFunction object. The internal structure of asynchronous functions works like generators, but they are not translated into generator functions.

 function fetchTextByPromise() { return new Promise(resolve => { setTimeout(() => { resolve("es8"); }, 2000); }); } async function sayHello() { const externalFetchedText = await fetchTextByPromise(); console.log(`Hello, ${externalFetchedText}`); // Hello, es8 } sayHello(); 

Calling sayHello will output Hello, es8 in 2 seconds.

 console.log(1); sayHello(); console.log(2); 

Prints:

1 //
2 //
Hello, es8 // 2

This is due to the fact that the function call does not block the thread of execution.

Note that the async function always returns a promise and the await keyword can only be used in functions with the async .

Shared memory and atomic operations

When memory is shared, multiple threads can read and write the same data in memory. Atomic operations make sure that the predicted values ​​are written and read, that the operations are completed before the next operations. This section introduces the new SharedArrayBuffer constructor and the Atomics object with static methods.

An Atomics object is a collection of static methods like Math , so we cannot call its constructor. Examples of static methods of this object:

• add / sub - add / subtract value from the value in the specified position
• and / or / xor - bitwise "AND" / bitwise "OR" / excluding "OR"
• load - getting the value at the specified position

And one moment for the next year in ES9 - removing restrictions for pattern literals

With tagged template strings (ES6), we can do things like declare functions for parsing templates and returning values ​​according to some logic.

 const esth = 8; helper`ES ${esth} is `; function helper(strs, ...keys) { const str1 = strs[0]; // ES const str2 = strs[1]; // is let additionalPart = ''; if (keys[0] == 8) { // 8 additionalPart = 'awesome'; } else { additionalPart = 'good'; } return `${str1} ${keys[0]} ${str2} ${additionalPart}.`; } 

Return value → ES 8 is awesome. And for esth equal to 7 will return → ES 7 is good.

But there are limitations to patterns that contain the substrings \ u or \ x. ES9 solves the shielding problem. Read more on the MDN website or in the document TC39 .

Conclusion

JavaScript is already in production, but always updated. The process of adopting new features in the specification is very organized and stable. At the last stage, this functionality is confirmed by the TC39 committee and implemented by the main developers. Most of them are already implemented in the Typescript language, browsers or various polyfills, so you can try them now.