What’s New in ES2017 (or ES8) for JavaScript

The 2017 JavaScript feature release becomes official

The newest version if ECMAScript has been released and it’s packed with features. Beginning in 2015, JavaScript (officially known as ECMA) began its yearly release cycle. The release in 2015 contributed to the tidal wave of the front end renaissance followed by a rather small 2016 in comparison. The release process now will follow the more incremental and stable approach.

ES8 Features

Async Function

Asynchronous code is at the core of JavaScript, and ES8 has officially added the ability to declare a function as async. By adding the async keyword in front of a function, you are able to defer the execution of code using the await statement. The return value of an async function is implicitly a promise object.

async function getDataFromAjax(url) {
let data;
  try {
data = await fetch(url);
    // This will wait 
// until fetch returns
fillClientStateWithData(data.json());
  } catch(error) {
    // This will execute if the
// API returns an error
handleAjaxError(error);
}
}
getDataFromAjax();

Other methods to handle async actions previously introduced in JavaScript are callbacks, promise chains, and generators.

Object.values and Object.entries

These methods add additional options to iterate through objects. Object.values can be viewed as a more declarative way of executing a for...of loop. It returns an array of the values for all enumerable keys in the object (excluding values in the prototype chain).

const obj = {
me: 'I',
hello: 'love',
js: 'ES8',
secrets: 42
}
const result = Object.values(obj);
console.log(result); // ["I", "love", "ES8", 42]

The Object.entries method returns an array of arrays with the key and value in each sub-array.

const obj = {
me: 'I',
hello: 'love',
js: 'ES8',
secrets: 42
}
const result = Object.entries(obj);
console.log(result); // [["me", "I"], ["hello", "love"], ["js", "ES8"], ["secrets", 42]]

Note that both methods will work for any enumerable data structure such as strings and arrays. The method will coerce the item into an object.

Other methods to iterate objects previously introduced are Object.keys(obj), for...in, and for...of.

Trailing Commas in Function Parameter Lists

An ES8 update improving developer experience is allowing trailing commas in function parameters lists. Trailing commas will no longer raise a SyntaxError when a comma is present.

class C {
one(a,) {},
two(a, b,) {},
}

var obj = {
one(a,) {},
two(a, b,) {},
};
function hi(a,b,) {
console.log(`hi ${a} and ${b}`)
}
hi('world', 'es8',);

Trailing commas at the end of objects and arrays was previously implemented in JavaScript. This feature generated broad adoption and has led the way for this function syntax update.

// Previously implemented legal trailing commas for objects and arrays
var obj = { 
foo: "bar",
baz: "qwerty",
age: 42,
};
var arr = [1,2,3,] // note if you use more than one comma at the end, it will add to the length

String Padding

Additional functionality has been added to make strings easier to work with, and string padding ensures that the output is the exact length desired. A developer can add padding to either the beginning or end of a string with the additional string composed of a select set of characters or empty spaces. The primary functions included are String.padStart() and String.padEnd().

// padStart
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0"); // "00000abc"
'abc'.padStart(1); // "abc"
// padEnd
'abc'.padEnd(10); // "abc "
'abc'.padEnd(10, "foo"); // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1); // "abc"

Object.getOwnPropertyDescriptors()

With the movement toward functional programming and immutable data structures in JavaScript, getOwnPropertyDescriptors() is an added tool that can help out. The method returns all the own property descriptors of a given object. The property descriptors include value writable get set configurable enumerable. This can offer a safer and more thorough object copying as opposed to Object.assign() which directly accesses properties and symbols instead of their descriptors.

const obj = {
hello: 'world',
user: 'turing'
}
const clone = Object.create(
Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)
);

Shared Memory and Atomics

To improve the handling of concurrency, SharedArrayBuffer and Atomics were introduced to the standard. The SharedArrayBuffer allows for the sharing of bytes among multiple workers. Atomics provide static methods to for atomic operations. Larz T Hansen offers a tutorial to provide more clarity to the subject.

Conclusion

ES8 offers some great new features to add to your developer toolbox. For a more detailed understanding, check out the formal ECMA specification.


If you found this article helpful, please click the💚 below. Follow me for more articles on React, Node.js, JavaScript, and open source software! You can also find me on Twitter or gitconnected.

Engineering Blockchain Jobs >