Leveling Up Your JavaScript Game with ES7 & ES8

Let me set the scene: it’s 11 p.m., your codebase is a spaghetti mess of nested .then() callbacks, you’re debugging why an object loop is randomly failing, and your client just dropped a “one last feature” bombshell on you. You sigh, crack open another energy drink (or maybe a beer), and think, "There’s gotta be a better way."

Turns out, JavaScript heard your prayers. ES7 and ES8 (a.k.a. ECMAScript 2016 & 2017) swooped in like the cool senior dev who always knows the shortcuts. These versions didn’t bring huge overhauls, but the tools they added? Absolute game-changers. Let’s dive in, and I’ll show you how they saved my bacon — multiple times.

1. Async/Await: Say Goodbye to Callback Hell

The Problem:

Remember writing fetch() calls and chaining .then() blocks like they were going out of style? It always starts fine:

fetch('/api/data')
  .then((response) => response.json())
  .then((data) => process(data))
  .catch((err) => handleError(err));

But then your PM wants more:

• Add error logging!
• Make another call if the first one fails!
• Parallel fetch two endpoints!

And suddenly, your .then() chain looks like a Jenga tower—one .catch() away from disaster.

The Fix: Async/Await

Async/await takes that mess and makes it look synchronous, while keeping the non-blocking goodness of JavaScript intact.

async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return process(data);
  } catch (err) {
    handleError(err);
  }
}

✅ No nested callbacks.
✅ Readable like a paperback novel.
✅ Debugging is 100x easier.

Get Razan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

How It Saved Me:
I had a project where I had to fetch user data, posts, and comments all at once. With async/await and Promise.all, it was a breeze:

async function getDashboardData() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments(),
  ]);
  return { user, posts, comments };
}

2. Object.entries() and Object.values(): Object Loops Done Right

The Problem:

Looping over objects used to feel like getting into an exclusive club — you had to know the “object keys” handshake.

const obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach((key) => {
  console.log(key, obj[key]);
});

Sure, it works, but why jump through hoops just to get the values or entries?

The Fix:

ES8 introduced Object.entries() and Object.values(), making object iteration as natural as breathing.

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

Object.values(obj).forEach((value) => {
  console.log(value);
});

How It Saved Me:
I once had to parse API response objects with a dozen nested fields. With Object.entries(), I dynamically mapped each key-value pair into a form field generator. Code went from meh to chef’s kiss.

3. String Padding: padStart() and padEnd()

The Problem:

Ever tried formatting output in plain JavaScript? Adding leading zeros? Aligning text in a CLI tool? It’s a mess of .repeat() and manual hacks.

const str = '5';
const padded = '0'.repeat(3 - str.length) + str; // Painful

The Fix:

Enter padStart() and padEnd()—the underrated heroes for string formatting.

const str = '5';
console.log(str.padStart(3, '0')); // "005"
console.log('Hello'.padEnd(10, '!')); // "Hello!!!!!"

How It Saved Me:
I was generating IDs for a project, and the client wanted them zero-padded to six digits. This one-liner saved my day:

const id = 42;
console.log(id.toString().padStart(6, '0')); // "000042"

4. Trailing Commas in Function Parameters

The Problem:

Have you ever added a parameter to a function, only to break your linter because of a missing comma? Or wasted 10 minutes in a code review fixing commas after reordering arguments?

The Fix:

Trailing commas are now valid in function parameter lists and calls.

Before:

function foo(a, b) {
  // No trailing comma allowed
}

After:

function foo(a, b,) {
  // Trailing comma? No problem.
}

Why It’s Awesome:
It’s a small change, but it prevents those annoying “add a comma” commits, especially in version-controlled codebases.

How It Saved Me:
I refactored a file with dozens of function calls, reordering parameters like a madman. Not once did I hit a comma-related error, thanks to this little gem.

Wrap-Up: Why These Features Matter

At first glance, these ES7 and ES8 additions might not seem groundbreaking. But in practice? They make your code more readable, less error-prone, and just plain nicer to work with.

• Async/await turns asynchronous chaos into something elegant.
• Object.entries() and Object.values() simplify working with objects.
• String padding makes formatting effortless.
• Trailing commas prevent silly syntax errors.

So next time you’re writing JavaScript, think about these tools in your kit. They’re not flashy, but they get the job done — like that senior dev who knows all the shortcuts.

What About You?

Have these features saved your day too? Got a favorite ES7/ES8 trick I didn’t mention? Drop your stories in the comments — I’d love to hear how you’re using them!

Cheers to cleaner, better JavaScript. 🍻