Key ES8 (ECMAScript 2017) Features for Modern JavaScript Development

ES8 (ECMAScript 2017) introduces several valuable features that fundamentally change how we write JavaScript, making code more concise, easier to maintain, and enabling new capabilities.

1. Trailing commas

Before ES8, a trailing comma in an array or object literal caused a syntax error. This forced developers to constantly add or remove commas when re‑ordering items, which also polluted Git diffs.

Now trailing commas are allowed:

const colors = [
    'red',
    'blue',
    'green',
    'yellow', // ✅ allowed
];

const person = {
    name: 'Tari Ibaba',
    site: 'codingbeautydev.com', // ✅ allowed
};

Tools like Prettier now automatically add trailing commas during formatting.

2. async / await

The async/await syntax eliminates the need for nested then() calls, making asynchronous code look synchronous.

Before:

wait().then(() => {
    console.log('WHERE ARE YOU?! 😠');
});

function wait() {
    return new Promise(resolve =>
        setTimeout(resolve, 10 * 1000)
    );
}

After:

(async () => {
    await wait();
    console.log('WHERE ARE YOU?! 😠');
})();

function wait() {
    return new Promise(resolve =>
        setTimeout(resolve, 10 * 1000)
    );
}

Using async/await also enables native try‑catch error handling for asynchronous operations.

async function startWorkout() {
    try {
        await goToGym();
    } catch (err) {
        console.log(err);
    }
}

function goToGym() {
    return new Promise((resolve, reject) => {
        if (Math.random() > 0.5) {
            reject(new Error("I'm tired today!😴"));
        }
        resolve("Let's go!🏃‍♂️");
    });
}

3. Powerful Object static methods

Object.values() extracts all values of an object into an array, which is handy for data visualisation.

const person = {
    name: 'Tari Ibaba',
    site: 'codingbeautydev.com',
    color: '🔵blue',
};

const arr = Object.values(person);
// ['Tari Ibaba', 'codingbeautydev.com', '🔵blue']
console.log(arr);

Object.entries() returns an array of [key, value] pairs, useful for transforming objects.

const person = {
    name: 'Tari Ibaba',
    site: 'codingbeautydev.com',
    color: '🔵blue',
};

const arr = Object.entries(person);
/*
[
  ['name', 'Tari Ibaba'],
  ['site', 'codingbeautydev.com'],
  ['color', '🔵blue']
]
*/
console.log(arr);

It also simplifies converting an object‑map of tasks into an array:

// Before (more verbose)
const taskList = Object.keys(tasks).map(id => ({
    id,
    ...tasks[id],
}));

// After (concise)
const taskList = Object.entries(tasks).map(([id, task]) => ({
    id,
    ...task,
}));
console.log(taskList);

4. Native string padding

ES8 adds padStart and padEnd , removing the need for third‑party packages like left-pad .

const name = 'tari';
console.log(name.padStart(9, ' '));   // '     tari'
console.log(name.padEnd(10, '🔴')); // 'tari🔴🔴🔴🔴'

5. Object.getOwnPropertyDescriptors()

This method returns the full descriptor objects for each property, exposing attributes such as value , enumerable , configurable , getters, and setters.

const person = {
  name: 'Tari Ibaba',
  color: '🔵color',
  age: 999,
  greet: () => console.log('Hey!'),
};

console.log(Object.getOwnPropertyDescriptors(person));

Final thoughts

Overall, ES8 represents a major leap for JavaScript, providing features that have become essential for modern development. These additions let developers write cleaner, more expressive, and more maintainable code.