JavaScript ES7+ Features

Introduction

ES7 and later versions brought powerful new syntax improvements to JavaScript. These features make code cleaner, faster, and more expressive — especially in async and large-scale applications.

1. ES7 – Exponentiation Operator (**)

const x = 5 ** 2;   // 25
const y = 2 ** 10;  // 1024

2. ES7 – Array.prototype.includes()

["a", "b", "c"].includes("b");  // true
[1,2,3].includes(4);            // false

3. ES8 – async / await (Game Changer)

async function load() {
  const data = await fetch("/api");
  console.log(await data.json());
}
load();

4. ES8 – Object.entries() / Object.values()

const user = { name: "Kaloyan", age: 12 };

Object.entries(user);
// [["name", "Kaloyan"], ["age", 12]]

Object.values(user);
// ["Kaloyan", 12]

5. ES8 – String Padding

"1".padStart(3, "0"); // "001"
"CTW".padEnd(10, "."); // "CTW......."

6. ES9 – Rest/Spread on Objects

const obj = { a:1, b:2, c:3 };
const { a, ...rest } = obj;
// rest = { b:2, c:3 }

const clone = { ...obj, d:4 };

7. ES9 – Promise.finally()

fetch("/api")
  .then(() => console.log("done"))
  .catch(() => console.log("err"))
  .finally(() => console.log("always"));

8. ES10 – Array.flat() and flatMap()

[1, [2,3], [4,[5]]].flat(2);
// [1,2,3,4,5]

[1,2,3].flatMap(n => [n, n*2]);
// [1,2, 2,4, 3,6]

9. ES10 – Optional Catch Binding

try {
  throw "error";
} catch {
  console.log("Error happened");
}

10. ES11 – Nullish Coalescing (??)

let x = null ?? "default"; // "default"
0 ?? 10; // 0 (important difference vs ||)

11. ES11 – Optional Chaining (?.)

user?.profile?.email;
product?.stats?.likes;

12. ES11 – Dynamic import()

import("/modules/math.js").then(mod => {
  console.log(mod.add(5,3));
});

13. ES12 – Logical Assignment Operators

x ||= 10;  // if x is falsy
y &&= 5;   // if y is truthy
z ??= 7;   // if z is null or undefined

14. ES13 – Top-Level Await

const data = await fetch("/api").then(r => r.json());
console.log(data);

15. ES2023 – Array findLast() / findLastIndex()

[1,2,3,4,5].findLast(n => n % 2 === 0); // 4

Summary