JavaScript ES8 (2017)

JavaScript ES8 (ECMAScript 2017) introduced a range of practical features aimed at simplifying asynchronous programming, object manipulation, and string padding. These changes might seem small individually, but together, they significantly improve the development experience.

In this tutorial, you’ll learn about the most important features of ES8:

1. async / await
2. Object.entries() and Object.values()
3. String.padStart() and String.padEnd()
4. Object.getOwnPropertyDescriptors()
5. A real-world model using ES8 features

🔁 1. async / await – Simplified Asynchronous Code

Prior to ES8, JavaScript developers used Promises or callback functions for asynchronous operations. ES8 introduced the async and await keywords to make asynchronous code look and behave more like synchronous code.

🧪 Syntax:

javascriptCopyEditasync function fetchData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}

• async marks a function as asynchronous and returns a Promise.
• await pauses the function execution until the Promise is resolved.

✅ Why It’s Useful:

No more chaining .then() — your code becomes cleaner and easier to understand.

📦 2. Object.entries() and Object.values()

These methods simplify working with objects.

Object.entries() – Converts an object into an array of [key, value] pairs.

javascriptCopyEditconst user = { name: "Alice", age: 25 };
console.log(Object.entries(user));
// [["name", "Alice"], ["age", 25]]

Object.values() – Returns an array of values.

javascriptCopyEditconsole.log(Object.values(user));
// ["Alice", 25]

These are useful when iterating over object properties.

📏 3. String.padStart() and String.padEnd()

These methods pad a string with other characters until it reaches a specified length.

padStart() Example:

javascriptCopyEditlet num = "5";
console.log(num.padStart(3, "0")); // "005"

padEnd() Example:

javascriptCopyEditlet word = "Hi";
console.log(word.padEnd(5, "!")); // "Hi!!!"

These are great for formatting output (e.g., aligning numbers in a table).

🧩 4. Object.getOwnPropertyDescriptors()

Returns all property descriptors (like value, writable, configurable) of an object.

javascriptCopyEditconst person = {
  name: "Alice",
  age: 25
};

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

Useful when cloning or freezing objects with their full properties.

🛠 Model Project: Student Data Viewer (Using ES8)

🎯 Goal:

Build a simple script that:

• Fetches student data (simulated)
• Uses async/await
• Displays the object using Object.entries()
• Pads the student ID for display

✅ ES8 Code Model:

javascriptCopyEdit// Simulate fetching data
function getStudentData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        id: "7",
        name: "Alice",
        grade: "A"
      });
    }, 1000);
  });
}

// Use async/await to fetch and display data
async function displayStudentData() {
  const student = await getStudentData();

  // Pad student ID
  const paddedID = student.id.padStart(3, "0");

  console.log(`Student ID: ${paddedID}`);

  // Display student info using Object.entries
  for (const [key, value] of Object.entries(student)) {
    console.log(`${key}: ${value}`);
  }
}

displayStudentData();

🖥 Output:

yamlCopyEditStudent ID: 007
id: 7
name: Alice
grade: A

This example combines async/await, padStart(), and Object.entries() — all ES8 features — in a realistic use case.

🧠 Summary Table

📌 Conclusion

ES8 might not have been as flashy as ES6, but it delivered practical, everyday tools that developers use constantly. From easier async handling with async/await to better string formatting and object iteration, ES8 makes JavaScript cleaner and more readable.

If you’re working with APIs, formatting output, or working with complex objects, these ES8 features will help you write better code, faster.