Search for a command to run...
How ES7 and ES8 Improved the Web
I am an aspiring web developer on a mission to kick down the door into tech. Join me as I take the essential steps toward this goal and hopefully inspire others to do the same!
No comments yet. Be the first to comment.
ES6 transformed JavaScript in 2015, creating the divide between legacy and modern development patterns. This series explores why it remains the pivotal moment in JavaScript's history and its lasting impact.
How ES9 & ES10 Make JavaScript More Elegant
My Life-Long PC Building Adventure
Where Innovation Meets Standardization
Advanced Patterns for Web Components in Modern Frameworks
Leveraging Custom Elements for Scalable and Maintainable Web Applications
Ensuring Inclusivity in Custom Elements
JavaScript continues to evolve at a remarkable pace, bringing developers more powerful and elegant ways to write code. While ES6 (ECMAScript 2015) revolutionized the language with arrow functions, classes, and promises, the subsequent releases—ES7 (2016) and ES8 (2017)—refined and enhanced these foundations with features that significantly improved how we handle asynchronous operations and manipulate data.
Before diving into the features, it's worth understanding how JavaScript's evolution changed. After the massive ES6 update, TC39 (the committee overseeing JavaScript's development) shifted to yearly, incremental releases. Each feature now progresses through four stages before becoming part of the standard:
Stage 1: Proposal and discussion
Stage 2: Draft specification
Stage 3: Implementation and feedback
Stage 4: Ready for inclusion
This approach allows for more agile language development, benefiting developers with regular, manageable improvements rather than waiting years for massive updates.
ES7 might seem underwhelming at first glance, with just two notable additions—but don't be fooled. These seemingly minor features significantly improved everyday JavaScript coding.
Before ES7, checking if an array contained a specific value required using indexOf():
javascript// Pre-ES7
if (myArray.indexOf(value) !== -1) {
// Value exists in array
}
With includes(), the code becomes more intuitive:
javascript// ES7
if (myArray.includes(value)) {
// Value exists in array
}
ES7 introduced a dedicated operator for exponential calculations:
javascript// Pre-ES7
const result = Math.pow(2, 10); // 1024
// ES7
const result = 2 ** 10; // 1024
// With assignment
let value = 2;
value **= 10; // 1024
This isn't just syntactic sugar—it's more readable and integrates better with JavaScript's other operators.
If ES7 was an appetizer, ES8 is the main course—particularly for handling asynchronous operations, which have long been one of JavaScript's most challenging aspects.
To appreciate async/await, we need to understand how asynchronous JavaScript has evolved:
javascript// The callback era (pre-ES6)
getUser(userId, function(user) {
getUserPosts(user.id, function(posts) {
getPostComments(posts[0].id, function(comments) {
// Welcome to callback hell
console.log(comments);
}, handleError);
}, handleError);
}, handleError);
// The promise era (ES6)
getUser(userId)
.then(user => getUserPosts(user.id))
.then(posts => getPostComments(posts[0].id))
.then(comments => console.log(comments))
.catch(error => handleError(error));
// The async/await era (ES8)
try {
const user = await getUser(userId);
const posts = await getUserPosts(user.id);
const comments = await getPostComments(posts[0].id);
console.log(comments);
} catch (error) {
handleError(error);
}
The secret to async/await's power is how it transforms asynchronous operations into code that looks and feels synchronous while retaining all the non-blocking benefits.
javascriptasync function fetchUserData() {
try {
// Each await pauses execution until the promise resolves
const response = await fetch('/api/user');
const userData = await response.json();
return userData;
} catch (error) {
console.error('Failed to fetch user:', error);
throw error; // Re-throw to allow further catch handling
}
}
// Don't forget - async functions always return promises!
fetchUserData()
.then(user => console.log(user))
.catch(error => console.error('Outer error handler:', error));
While async/await excels at making code readable, you need to be careful about performance:
javascript// Sequential execution (slower)
const userData = await fetchUser();
const postData = await fetchPosts();
const commentData = await fetchComments();
// Parallel execution (faster when operations are independent)
const [userData, postData, commentData] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
]);
ES8 introduced several powerful methods for working with objects that make data transformation much more straightforward.
javascriptconst person = {
name: 'Alice',
age: 28,
occupation: 'Engineer'
};
// Get all values
const values = Object.values(person);
// ['Alice', 28, 'Engineer']
// Get key-value pairs as arrays
const entries = Object.entries(person);
// [['name', 'Alice'], ['age', 28], ['occupation', 'Engineer']]
// Powerful when combined with array methods
const adults = Object.entries(person)
.filter(([key, value]) => key === 'age' && value >= 18)
.map(([key, value]) => `${value} years old`);
// ['28 years old']
This method returns detailed information about object properties, including their configurability, writability, and getter/setter functions:
javascriptconst obj = {
get name() { return 'Alice'; },
set age(value) { this._age = value; }
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
/*
{
name: {
get: [Function: get name],
set: undefined,
enumerable: true,
configurable: true
},
age: {
get: undefined,
set: [Function: set age],
enumerable: true,
configurable: true
}
}
*/
// Perfect for deep cloning objects with getters/setters
const clone = Object.defineProperties({},
Object.getOwnPropertyDescriptors(obj));
ES8 introduced two methods that simplify string formatting:
javascript// Left padding (great for numbers)
'5'.padStart(2, '0'); // '05'
'42'.padStart(5, '*'); // '***42'
// Right padding
'Hello'.padEnd(10, '.'); // 'Hello.....'
These methods are particularly useful for:
Formatting numbers (credit cards, phone numbers)
Creating aligned tables in console or monospace fonts
Padding strings to fixed lengths for storage formats
This seemingly small syntax improvement has significant benefits for version control and code maintenance:
javascript// Pre-ES8 - Adding or removing parameters creates noisy diffs
function createUser(
name,
email,
role
) {
// function body
}
// ES8 - Adding parameters creates cleaner diffs
function createUser(
name,
email,
role, // Trailing comma is valid!
) {
// function body
}
Let's bring everything together by seeing how ES8 transforms a typical API client implementation:
javascript// Modern API client with ES8 features
class ApiClient {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
async get(endpoint, queryParams = {}) {
try {
// Convert query parameters to URL-friendly format
const queryString = Object.entries(queryParams)
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
.join('&');
const url = `${this.baseUrl}/${endpoint}${queryString ? `?${queryString}` : ''}`;
const response = await fetch(url);
// Check for error status codes
if (!response.ok) {
throw new Error(`API error: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error(`Request failed for ${endpoint}:`, error);
throw error;
}
}
// Additional methods like post(), put(), delete() would follow similar patterns
}
// Usage
const api = new ApiClient('https://api.example.com');
// Clean, async/await syntax
async function getUserWithPosts(userId) {
try {
const user = await api.get(`users/${userId}`);
const posts = await api.get('posts', { userId: user.id });
return {
...user,
posts,
};
} catch (error) {
console.error('Failed to get user data:', error);
throw error;
}
}
While these features are now widely supported in modern browsers and Node.js, it's important to consider compatibility when developing for diverse environments:
Async/await: Chrome 55+, Firefox 52+, Safari 10.1+, Edge 15+, Node.js 7.6+
Object methods: Chrome 54+, Firefox 47+, Safari 10.1+, Edge 14+, Node.js 7.0+
String padding: Chrome 57+, Firefox 48+, Safari 10+, Edge 15+, Node.js 8.0+
For projects needing to support older environments, transpilers like Babel and polyfills are still recommended.
To make the most of async/await, keep these best practices in mind:
Always handle errors with try/catch blocks or .catch() on the function call
Remember that async functions always return promises
Use Promise.all() for independent operations to improve performance
Don't overuse await for operations that could run concurrently
Consider a cleanup function for resources even if an error occurs
ES7 and ES8 might not have the same revolutionary impact as ES6, but they've significantly improved how we write JavaScript—particularly for handling asynchronous operations. Async/await alone has transformed one of the language's most challenging aspects into elegant, readable code that feels almost like synchronous programming.
As JavaScript continues to evolve with yearly updates, we see a language growing more mature, expressive, and developer-friendly. These incremental improvements are making JavaScript not just more powerful but also more enjoyable to write—a trend that continues with ES9 and beyond.
The most exciting part? These features aren't just theoretical—they're ready to use in your projects today, making your code cleaner, more maintainable, and more expressive. So dive in, experiment with the CodePen examples, and take your JavaScript to the next level with the powerful features of ES7 and ES8.