Two years ago when ECMAScript 2015 (colloquially known as a ES6) was standardized there was a massive update to the language. Announced at the same time was a yearly release plan that aims to deliver a new version of the language annually and ship it with the proposals that are ready at the time of the TC39 meeting. The list of language improvements is open and you can track it on the TC39 Github account. Following are some noticeable changes in 8th edition or es8 or ECMAScript2017
Object.values()
Object.values() is a new function that’s similar to Object.keys() but returns all the values of the Object’s own properties excluding any value(s) in the prototypical chain.
Before ECMAScript2017 or es8, we had to get keys from the map using .keys and then map. But with ECMAScript2017; we can just use Object.values out of the box. Consider following example.
const categories = { javascript: 5, rust: 3, golang: 7 }
const values = Object.values(categories);
console.log(values);
// [5,3,7]
Object.entries()
Object.entries() is related to Object.keys , but instead of returning just keys, it returns both keys and values in the array fashion. This makes it very simple to do things like using objects in loops or converting objects into Maps. Consider following example
const categories = { javascript: 5, rust: 3, golang: 7 }
for(let [key, value] of Object.entries(categories)){
console.log(`Key: ${key} has value: ${value}`);
}
One can also be able to convert Object to Map easily
const categories = { javascript: 5, rust: 3, golang: 7 }
const myMap = new Map(Object.entries(categories));
console.log(myMap);
// Map { javascript: 5, rust: 3, golang: 7 }
String padding
Two instance methods were added to String — String.prototype.padStart and String.prototype.padEnd that allow appending/prepending either an empty string or some other string to the start or the end of the original string.
'someString'.padStart(numberOfCharcters [,stringForPadding]);
'5'.padStart(10) // ' 5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5 '
'5'.padEnd(10, '=*') //'5=*=*=*=*='
This comes in handy when we want to align things in scenarios like pretty print display or terminal print.
PS: You may use this link to check out unicode char conversions.
Object.getOwnPropertyDescriptors
This method returns all the details (including getter and setter methods) for all the properties of a given object.
The main motivation to add this is to allow shallow copying / cloning an object into another object that also copies getter and setter functions as opposed to Object.assign.
Object.assign shallow copies all the details except getter and setter functions of the original source object.
const source = {
name: 'Some name',
id: 123,
set someFunc(x) {
this.name = x;
},
}
const sourceClone = Object.create(Object.getPrototypeOf(source), Object.getOwnPropertyDescriptors(source));
Add trailing commas in the function parameters
This is a minor update that allows us to have trailing commas after the last function parameter. Consider following example
function Person(
name,
age, // this is correct in es8
){
this.name = name;
this.age = age
}
Note: You can also call functions with trailing commas!
Async/Await
This, by far, is the most important and most useful feature if you ask me. Async functions allows us to not deal with callback hell and make the entire code look simple.
The async keyword tells the JavaScript compiler to treat the function differently. The compiler pauses whenever it reaches the await keyword within that function. It assumes that the expression after await returns a promise and waits until the promise is resolved or rejected before moving further.
async function fetchUserAccounts(){
var users = await fetchAccounts();
console.log(users);
return users;
}
In example above fetchUserAccounts will wait for fetchAccounts to be resolved before executing code after it.
async functions returns a promise so to operate on values returned by async function on may need to use .then to capture its results
One may also require to call multiple async/await in parallel if they do not depend on one another. This can be achieved using Promise.all. Consider following example
async function addMultiple(a, b, c){
[x, y, z] = Promise.all([increamentByTen(a),increamentByTen(b), increamentByTen(c)]);
console.log(x, y, z);
}
Errors can be handled by using try/catch within async/await as usual
async function someFunc(a, b) {
try {
a = await someOtherFunc(a);
b = await someOtherFunc(b);
} catch (e) {
return NaN; //return something
}
return a + b;
}
//Usage:
someFunc('one', 2).then(console.log); //NaN
Shared memory and atomics
This is a huge, pretty advanced feature and is a core enhancement to JS engines.
About The Author
I am Pankaj Baagwan, a System Design Architect. A Computer Scientist by heart, process enthusiast, and open source author/contributor/writer. Advocates Karma. Love working with cutting edge, fascinating, open source technologies.
To consult Pankaj Bagwan on System Design, Cyber Security and Application Development, SEO and SMO, please reach out at me[at]bagwanpankaj[dot]com
For promotion/advertisement of your services and products on this blog, please reach out at me[at]bagwanpankaj[dot]com
Stay tuned <3. Signing off for RAAM