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?

Confused what to use ? And when to use ?

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)

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.

Browser support for Async/Await

Object.entries(), Object.values() and Object.getOwnPropertyDescriptors()

Object.entries() :

const foo = { bar1: 'a', bar2: 'b', bar3: 'c' };
console.log(Object.entries(foo)[1]);
// expected output: Array ["bar2", "b"]

Object.values() :

const foo = { bar1: 'a', bar2: 'b', bar3: 'c' };
console.log(Object.values(foo));
// expected output: Array ["a", "b", "c"]

Object.getOwnPropertyDescriptors() :

const foo = { bar1: 'a', bar2: 'b', bar3: 'c' };
const descriptors = Object.getOwnPropertyDescriptors(foo);
console.log(descriptors.bar1.configurable);
// expected output: true
console.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 support

String padding (padStart and padEnd)

padStart()

'abc'.padStart(10);         
// expected output: " abc"
'abc'.padStart(10, "yo");
// expected output: "yoyoyoyabc"

padEnd()

'abc'.padEnd(10);         
// expected output: "abc "
'abc'.padEnd(10, "yo");
// expected output: "abcyoyoyoy"
Browser support for String padding

Trailing commas in function parameter lists and calls

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.

Browser support for trailing commas (Array literals, Object literals and function parameters)

Shared memory and atomics

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.

CODER | BLOGGER | ARTIST | GHOST

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store