The 5 Most Transformative JavaScript Features from ES8

ES8 was packed with valuable features that transformed the way we write JavaScript. Code became cleaner, easier to write, and upgraded with new capabilities. Let’s check them out and see the ones you missed.

1. Trailing Commas

Trailing commas used to cause a syntax error before ES8!

Before:

const arr = [
  1,
  2,
  3 // Adding another item here required adding a comma before this line
];

This caused problems when rearranging the list or adding new items, cluttering up git diffs.

Now:

const arr = [
  1,
  2,
  3, // Trailing comma allowed
];

Tools like Prettier add them by default after formatting, making code maintenance easier.

2. async / await

async/await transformed asynchronous code, making it cleaner and more readable.

Before:

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Now:

async function fetchData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

No more nesting with then(), and we can use native try-catch for async code.

3. Powerful Object Static Methods

Object.values()

Extract all the values from an object into an array.

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); // [1, 2, 3]

Object.entries()

Transform an object into a list of key-value pairs.

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]

Great for data transformations using both the object key and value.

4. Native String Padding

ES8 introduced native string padding with padStart and padEnd methods.

'5'.padStart(2, '0'); // '05'
'5'.padEnd(2, '0'); // '50'

This removed the need for third-party dependencies like left-pad.

5. Object.getOwnPropertyDescriptors()

Get property descriptors for an object’s properties.

const obj = { a: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);

console.log(descriptors);
/*
{
  a: {
    value: 1,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

Useful for tasks like copying objects while preserving property attributes.

Final Thoughts

ES8 was a significant leap for JavaScript with several features that have become essential for modern development. These features empower you to write cleaner code with greater conciseness, expressiveness, and clarity.

Ref: Tari Ibaba - Medium