ES7 to Latest Features

JavaScript Evolution After ES6

After the release of ES6 (ECMAScript 2015), JavaScript adopted an annual release cycle. Every year, new language features are standardized by TC39, making JavaScript more expressive, readable, safer, and performant.

Instead of introducing one massive version every several years, JavaScript now evolves incrementally through yearly ECMAScript releases.

ECMAScript Release Timeline

ES7 (2016)

Array.includes()

const fruits =
[
  "Apple",
  "Orange",
  "Mango"
];

console.log(
  fruits.includes("Mango")
);

Exponentiation Operator

console.log(
  2 ** 5
);

ES8 (2017)

Async Await

async function loadData() {

  const response =
    await fetch("/users");

  console.log(response);

}

Object.entries()

const user =
  {

    name: "John",

    age: 25

  };

console.log(
  Object.entries(user)
);

Object.values()

console.log(
  Object.values(user)
);

ES9 (2018)

Object Spread

const user =
  {
    name: "John"
  };

const updated =
  {

    ...user,

    city: "Dallas"

  };

Rest Properties

const
{

  name,

  ...details

}
=
updated;

Promise.finally()

fetch("/users")

  .finally(

    () =>

      console.log("Finished")

  );

ES10 (2019)

Array.flat()

const values =
[
  1,
  [
    2,
    3
  ]
];

console.log(
  values.flat()
);

Array.flatMap()

const numbers =
[
  1,
  2,
  3
];

const doubled =
numbers.flatMap(

  number =>

    [
      number,
      number * 2
    ]

);

Optional Catch Binding

try {

}

catch {

  console.log("Error");

}

ES11 (2020)

Optional Chaining

console.log(
  user?.address?.city
);

Nullish Coalescing

const username =
  value ??
  "Guest";

BigInt

const id =
  9007199254740993n;

Dynamic Import

const module =
  await import("./math.js");

ES12 (2021)

replaceAll()

const text =
  "Java Java";

console.log(
  text.replaceAll(
    "Java",
    "JS"
  )
);

Numeric Separators

const amount =
  1_000_000;

Promise.any()

Promise.any(

  [
    api1(),
    api2(),
    api3()
  ]

);

ES13 (2022)

Top-Level Await

const users =
  await fetch("/users");

Class Fields

class User {

  role =
    "Admin";

}

Private Fields

class Bank {

  #balance =
    1000;

}

Error Cause

throw new Error(

  "Failed",

  {

    cause:
      "Network"

  }

);

ES14 (2023)

findLast()

const values =
[
  2,
  5,
  8,
  12
];

console.log(

  values.findLast(

    value =>

      value % 2 === 0

  )

);

toSorted()

const numbers =
[
  5,
  1,
  8
];

const sorted =
numbers.toSorted();

toReversed()

const reversed =
numbers.toReversed();

toSpliced()

const updated =
numbers.toSpliced(
  1,
  1
);

Latest JavaScript Features

New Set Methods

const first =
new Set(
  [1, 2, 3]
);

const second =
new Set(
  [3, 4]
);

const union =
first.union(second);

Promise.withResolvers()

const
{

  promise,

  resolve,

  reject

}
=
Promise.withResolvers();

Iterator Helpers

const result =

numbers

  .values()

  .map(

    number =>

      number * 2

  )

  .toArray();

Features Used Most in Modern Development

• Async Await
• Optional Chaining
• Nullish Coalescing
• Object Spread
• Array.includes()
• Dynamic Imports
• replaceAll()
• Top-level Await
• Private Class Fields
• toSorted()

Real World Applications

• React Components
• Next.js Pages
• Node.js APIs
• Astro Projects
• Angular Applications
• Vue Applications
• Express Servers
• Cloud Functions
• Microservices
• Enterprise Web Applications

Browser Support

Nearly all ES7 through ES14 features are supported by current versions of Chrome, Edge, Firefox, Safari, and Node.js. Newer proposals such as Iterator Helpers and Promise.withResolvers() may require recent browser versions or transpilation depending on the runtime.

Common Mistakes

• Using new features without checking browser support.
• Mutating arrays instead of using immutable methods.
• Confusing ?? with ||.
• Ignoring Promise error handling.
• Overusing optional chaining.
• Using private fields incorrectly.
• Not using async await properly.
• Ignoring Babel for legacy browsers.
• Mixing CommonJS and ES Modules.
• Ignoring TypeScript compatibility.

Best Practices

• Use the latest stable language features.
• Prefer immutable array methods.
• Use optional chaining safely.
• Prefer async await over nested Promises.
• Use dynamic imports for lazy loading.
• Write modular code.
• Keep Babel configuration updated.
• Test across supported browsers.
• Use linting tools.
• Stay updated with new ECMAScript releases.

Interview Questions

• What changed after ES6?
• What is the ECMAScript annual release cycle?
• What features were introduced in ES7?
• When was async await introduced?
• What is optional chaining?
• What are immutable array methods?
• What is Top-Level Await?
• What is Promise.any()?
• What are private class fields?
• Which modern JavaScript features are used most in React?