New ES8 Features
ECMAScript 2017 (ES8) was finalized in June 2017. This article will go over some of the main features that can make your code cleaner and easier to write. So let’s dive in!
Object.values()
This method will return an array of a given object’s own enumerable property values (in the same order as a for-in loop would). This is the counterpart of Object.keys(), which has been available since ES5 was released. Object.values() can also coerce a string into an object so that it will turn into an array. This is the same as using .spit(“”) on a string.
Since arrays are objects, this will also work with arrays. It will treat the indexes as keys and values as the elements in the array ([ ‘a’, ‘b’, ‘c’ ] →{ 0: ‘a’, 1: ‘b’, 2: ‘c’ }). I’m not sure why you would ever do this since it would just return the same thing, but it works.
Object.entries()
This method returns an array that contains the key-value pairs of a given object as an array (in the same order as Object.values()).
String.prototype.padEnd()
The padEnd() method lengthens the current string to reach a given length. If the length of the original string is not as long as you desire, padEnd() will add spaces to the end to make the string your desired length. You can also ‘pad’ the string with another string that you enter as the second parameter that will repeat until the desired length is reached.
Object.getOwnPropertyDescriptors
This method returns all of the property descriptors of a given object. An object’s own property descriptor is directly on the object, not from its prototype. The name of the method is pretty descriptive, but in case you aren’t sure of what the possible descriptors are, they are listed below.
value — The value associated with the property (data descriptors only).
writable — true if and only if the value associated with the property may be changed (data descriptors only).
get — A function which serves as a getter for the property, or undefined if there is no getter (accessor descriptors only).
set — A function which serves as a setter for the property, or undefined if there is no setter (accessor descriptors only).
configurable — true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.
enumerable — true if and only if this property shows up during enumeration of the properties on the corresponding object.
Trailing commas in function parameter lists
Trailing commas are commas at the end of the last element, parameter, or property of Javascript code. If you want to add something else, then that comma will already be there for you. Being able to plan ahead like this can help prevent errors. Trailing commas have always been allowed for arrays and has been allowed in object literals since ECMAScript 5. They will be allowed in function parameter lists in ES8!
Async Functions
Async/await is a new way to write asynchronous code. The async function declaration defines an asynchronous function, which returns an AsyncFunction object. You can also define async functions using an async function expression. Async functions return a Promise which will be resolved, or rejected with an uncaught exception thrown from within the async function.
Unlike async function statements, async function expressions can have the function name omitted to make it anonymous and can be used as an IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined.
The AsyncFunction constructor creates a new async function object. In JavaScript, every asynchronous function is actually an AsyncFunction object.
The await operator is used to wait for a Promise and can only be used inside of an async function. The await expression causes async function execution to pause until a Promise is resolved (fulfilled or rejected) and then resumes execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise. If the Promise is rejected, the await expression throws the rejected value. If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise. It is important to realize that await does not pause any functions outside of ‘async’.
Since delayedFunc3() and delayedFunc5() are asynchronous, they will not prevent the second console.log() from executing immediately. All 4 functions are executed in the order listed and returned when they are ready. This is what the output would be:
Great job! You made it through! Check out the docs to learn about each new feature in depth and try each of these out yourself.
Feel free to get in touch with me at linkedin.com/in/rashaun-warner/ or rashaunwarner@yahoo.com.
