What’s the next thing in ECMAScript— {Object.values(), async-await,}
Learning Javascript can be tricky, not because the language is difficult, but because it is so dynamic in adding new features to it’s bucket list.
With increasing list of functionalities it is always lot of work to check if a given feature is right for your project? If it provides any optimisation over the previous version of your code? If it’s browser compatible?
I have dedicated this writing to explain all the new features ECMAScript 2017 (commonly known as ES8) has to offer, it’s advantages, and browser compatibility.
Async functions (async and await)
In order to handle asynchronous API calls, JavaScript developers had to rely on either callbacks or Promises. Now we have Async/Await which makes handling asynchronous calls even better and easier.
const asynchronousFunction = () => (
new Promise(resolve => {
setTimeout(() => {
resolve("I am an asynchronous function");
}, 5000);
})
);const callAsynchronousFunction = async() => {
const data = await asynchronousFunction();
return data;
}callAsynchronousFunction().then((data) => console.log(data));
The above code would call the “callAsynchronousFunction” function. This is in turn making an async call, which would return a promise after 5 seconds. The function would await until the promise is resolved, and then return the data back to the caller.
You can use babel and configure using .babelrc such that it supports ES6, ES7 and ES8. Install babel-preset-env which supports all of these versions. You can also configure it to include plugins only to support specific versions. Please check official documentation of babel for more information on the same.
Object.entries(), Object.values() and Object.getOwnPropertyDescriptors()
Javascript has provided various functions out of the box to work with Objects. ES8 has added few more to the same.
Object.entries() :
This method return an array of a given object’s own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop.
const foo = { bar1: 'a', bar2: 'b', bar3: 'c' };
console.log(Object.entries(foo)[1]);// expected output: Array ["bar2", "b"]
Object.values() :
This method returns an array of a given object’s own enumerable property values, in the same order as that provided by a for...in loop
const foo = { bar1: 'a', bar2: 'b', bar3: 'c' };
console.log(Object.values(foo));// expected output: Array ["a", "b", "c"]
Object.getOwnPropertyDescriptors() :
This method returns a property descriptor for an own property (that is, one directly present on an object and not in the object’s prototype chain) of a given object.
const foo = { bar1: 'a', bar2: 'b', bar3: 'c' };
const descriptors = Object.getOwnPropertyDescriptors(foo);console.log(descriptors.bar1.configurable);
// expected output: trueconsole.log(descriptors.bar1.value);
// expected output: "a"
These functions are out of the box supported in all major browsers. I’ve supplied links below for more detailed view on browser support.
* Object.entries() browser support
* Object.values() browser support
* Object.getOwnPropertyDescriptors() browser supportString padding (padStart and padEnd)
These methods pads current string with given string repeatedly (or space, if nothing is provided) until the specified length is reached.
padStart()
Adds the padding to the beginning (left) of the string until specified length is reached.
'abc'.padStart(10);
// expected output: " abc"'abc'.padStart(10, "yo");
// expected output: "yoyoyoyabc"
padEnd()
Adds the padding to the ending (right) of the string until specified length is reached.
'abc'.padEnd(10);
// expected output: "abc "'abc'.padEnd(10, "yo");
// expected output: "abcyoyoyoy"
Trailing commas in function parameter lists and calls
Trailing commas are useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.
JavaScript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ECMAScript 5) and most recently (ECMAScript 2017) to function parameters.
As of now JSON, however, disallows trailing commas.
Shared memory and atomics
We know that JavaScript is a single-threaded environment and therefore every single line of code we normally write is blocking. Due to this fact, programmers always have introduced new techniques to deal with concurrency in a better way.
Shared memory : Allows multiple threads to read and write same data. ES8 has provided new SharedArrayBuffer constructor for the same. This can be effectively used with web workers , which earlier required handler functions and postMessage method to achieve parallelism.
The below example illustrates how to create shared buffer and provide it to web worker.
const worker = new Worker('worker.js')
const length = 1024;
// Creating a shared buffer
const sharedBuffer = new SharedArrayBuffer(length);
// Creating an Array on top of that shared memory area
const sharedArray = new Array(sharedBuffer)
for (let i = 0; i < length; i++) {
sharedArray[i] = i;
}
// Send memory area to our worker
worker.postMessage(sharedBuffer);Atomics Object : The Atomics object provides certain operations as static methods. They can be used with SharedArrayBuffer objects. When memory is shared, multiple threads can read and write the same data in memory. This causes inconsistency. Atomic operations make sure that every operation is finished before the next operation starts and that operations are not interrupted.
Both these methods have browser support only in advanced browsers. And can be used as long as your project is configured with babel-env .
Hope this article was informative and helped you take advantage of these new features provided by ES8, be sure to like it give me a lot of claps. And follow me if you want to read more articles on Front end technologies.
