ES6 to ES15 - Features list | JS

#webdev #javascript #beginners #tutorial

Updated with some of the ES15 features at 19TH Feb, 2025

Hello my frontend developer, today i will be writing down all the ECMA Script features introduced in different versions of ES, from ES6 to the latest ES15 version.
Let's get started...

ES6 Features

Feature	Description
let, const	Block-scoped variable declarations
Arrow Functions	Short syntax for functions
Template Literals	String interpolation
Default Parameters	Function parameters with defaults
Destructuring	Array and object unpacking
Spread/Rest	`...` operator for arrays/objects
Enhanced Objects	Shorthand properties and methods
Classes	Object-oriented programming syntax
Modules (import/export)	Modular code structure
Promises	Asynchronous operation handling
Symbol	Unique identifiers
Map, Set	New data structures for collections
Generators	Function that yields multiple results
for...of Loop	Iterating over iterable objects
WeakMap, WeakSet	Weakly referenced collections

Sample codes

// #1 - Let and const example
let user = "Mysterio";
const userId = 1908894;

if (true) {
  let user = "Batman"; 
  console.log(user); // Batman (block-scoped)
}

console.log(user); // Mysterio


// #2 - Arrow functions
const fullname = (firstname, lastname) => firstname + " " +lastname;
console.log(fullname("Clark", "Kent")); // Clark Kent


// #3 - Template Literals
const fullnameWithTemplate = (firstname, lastname) => `${firstname} ${lastname}`;
console.log(fullnameWithTemplate("Clark", "Kent")); // Clark Kent


// #4 - Default parameter
const fullnameWithDefaultParams = (firstname="Bruce", lastname="Wayne") => `${firstname} ${lastname}`;
console.log(fullnameWithDefaultParams()); // Bruce Wayne


// #5 - Destructuring
// Array Destructuring
const [uid, uname] = [1, "Batman"];
console.log(uid, uname); // 1 Batman

// - Object Destructuring
const response = { id: 1, username: "Batman", email: "bruce@gmail.com" };
const { id, username, email } = response;
console.log(id, username, email); // 1 Alice a@b.com


// #6 - Spread and Rest Operators (...)
// Spread
const numbers = [1, 2, 3, 4, 5];
const [first, ...rest] = numbers;
console.log(first, rest); // 1 [2, 3, 4, 5]

// Rest
const floatingNumber  = [1.1, 2.2, 3.3, 4.4, 5.5];
const floatingAndDecimal = [...floatingNumber, ...numbers];
console.log(floatingAndDecimal); // [1.1, 2.2, 3.3, 4.4, 5.5, 1, 2, 3, 4, 5]


// #7 - Shorthand object literals
const newUser = {
  id,
  username,
  email
}
console.log(newUser) // { id: 1, username: 'Batman', email: 'bruce@gmail.com' }


// #8 - Classes - Syntactic sugar for prototypes
class SuperHero {
    constructor(heroname) {
        this.heroname = heroname;
    }

    speak() {
        console.log(`${this.heroname} have won the battle.`);
    }
}

class Human extends SuperHero {
    isHuman() {
        console.log(`${this.heroname} is a also a human.`);
    }
}

const humanSuperhero = new Human('Batman');
humanSuperhero.isHuman(); // Batman is a also a human


// #9 - Import and export modules
// superhero.js
export const superhero = heroname => `I am, ${heroname}`;

// index.js
import { superhero } from './superhero.js';
console.log(greet('Batman')); // I am Batman


// #10 - Promises
const fetchData = () =>
    new Promise((resolve) => {
      setTimeout(() => resolve("This promise will resolve definitely after 1 second"), 1000);
    });

fetchData()
.then(console.log) // This promise will resolve definitely after 1 second
.catch(console.error); // Won't run as the promise is resolved not rejected


// #11 - Symbols
const doomsday1 = Symbol("doomsday");
const doomsday2 = Symbol("doomsday");

console.log(doomsday1 === doomsday2); // false (unique symbols)


// #12 - Map ans Set
// Map
const superHeroMap = new Map();
superHeroMap.set("name", "Barry Allen");
superHeroMap.set("age", 30);

console.log(superHeroMap.get("name")); // Barry Allen
console.log(superHeroMap.get("age")); // 30

// Set
const superHeroSet = new Set(["Batman", "Superman", "Wonder Woman","Flash"]);
console.log(superHeroSet); // Set(4) { 'Batman', 'Superman', 'Wonder Woman', 'Flash' }

superHeroSet.add("Aquaman");
console.log(superHeroSet); // Set(5) { 'Batman', 'Superman', 'Wonder Woman', 'Flash', 'Aquaman' }

superHeroSet.delete("Superman");
console.log(superHeroSet) // Set(4) { 'Batman', 'Wonder Woman', 'Flash', 'Aquaman' }

console.log(superHeroSet.has("Batman")); // true



// #13 - Iterators and generators
const superHeroIterators = ["Batman", "Superman", "Wonder Woman", "Flash"];
const iterator = superHeroIterators[Symbol.iterator]();

console.log(iterator.next()); // { value: 'Batman', done: false }
console.log(iterator.next()); // { value: 'Superman', done: false }
console.log(iterator.next()); // { value: 'Wonder Woman', done: false }
console.log(iterator.next()); // { value: 'Flash', done: false }


function* generateSuperHeroes() {
    yield "Batman";
    yield "Superman";
    yield "Wonder Woman";
  }

  const generator = generateSuperHeroes();
  console.log(generator.next().value); // Batman



// # 14 for...of loop
for (const hero of superHeroIterators) {
  console.log(hero);
} // Batman Superman Wonder Woman Flash

ES7 Features

Feature	Description
Array.prototype.includes	Check if an array contains a specific value
Exponentiation Operator `**`	Short syntax for power operations

Sample codes


// #1 - Array.prototype.includes()
const superheroes = ["Batman", "Superman", "Flash"];

if (superheroes.includes("Batman")) {
    console.log("Batman is bruce wayne!");
} // will print - Batman is bruce wayne!


// #2 Exponentiation operator
const usingPowerMethod = Math.pow(17, 3); 
const usingExponentiationOperator = 17 ** 3;

console.log(usingPowerMethod) // 4913
console.log(usingExponentiationOperator) // 4913

ES8 Features

Feature	Description
async/await	Simplified asynchronous programming syntax
Object.values()	Returns values of an object as an array
Object.entries()	Returns key-value pairs of an object as an array
Object.getOwnPropertyDescriptors()	Retrieves all property descriptors of an object
Trailing Commas in Functions	Supports trailing commas in function arguments and calls
SharedArrayBuffer & Atomics	Enables shared memory and atomic operations for threads

Sample codes

// #1 - Async/Await - Syntactic sugar for Promises,
const fetchData = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error:', error);
    }
  };

fetchData();
// {
//    userId: 1,
//    id: 1,
//    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
//    body: 'quia et suscipit\n' +
//          'suscipit recusandae consequuntur expedita et cum\n' +
//          'reprehenderit molestiae ut ut quas totam\n' +
//          'nostrum rerum est autem sunt rem eveniet architecto'
// }


// #2 - Object.values() - Returns an array of a given object’s own enumerable property values.
const superhero = { id: 9089, name: 'Batman', age: 32 };
console.log(Object.values(superhero)); // [9089, 'Batman', 32]


// #3 - Object.entries() - Returns an array of a given object’s own enumerable property [key, value] pairs.
console.log(Object.entries(superhero)); // [ [ 'id', 9089 ], [ 'name', 'Batman' ], [ 'age', 32 ] ]


// #4 - Object.getOwnPropertyDescriptors() - Returns property descriptors for all properties of an object.
console.log(Object.getOwnPropertyDescriptors(superhero));
/*
{
  id: { value: 9089, writable: true, enumerable: true, configurable: true },
  name: {
    value: 'Batman',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: { value: 32, writable: true, enumerable: true, configurable: true }
}
*/

NOTE - I didn't game sample codes for last 2 as those are used very rarely or in advance programming.

ES9 Features

Feature	Description
Rest/Spread with Objects	`...` syntax for cloning and merging objects
for await...of Loop	Asynchronous iteration for streams or async iterables
Promise.prototype.finally()	Runs code after promise resolution or rejection
RegEx: s Flag (dotAll)	`.` matches newlines in regex
RegEx: Named Capture Groups	Adds names to capture groups for clarity

Sample Codes

// #1 - Rest/Spread Properties for Objects
const superhero = { id: 9810, name: 'Superman', age: 35 };
const { age, ...rest } = superhero;

console.log(rest); // { id: 9809, name: 'Superman' }

const updateSuperHero = { ...superhero, powers: ["flying", "super strength","heat vision"] };
console.log(updateSuperHero) // { id: 9810, name: 'Superman', age: 35, powers: [ 'flying', 'super strength', 'heat vision' ]}


// #2 -  Asynchronous Iteration with (for await...of) loop
async function fetchPosts() {
    const urls = ['https://jsonplaceholder.typicode.com/posts/1', 'https://jsonplaceholder.typicode.com/posts/2'];

    for await (const url of urls) {
      const response = await fetch(url);
      const post = await response.json();
      console.log(post.title);
    }
  }

fetchPosts();
// sunt aut facere repellat provident occaecati excepturi optio reprehenderit
// qui est esse


// #3 - Promise.prototype.finally() - Executes a callback after a promise is settled (either resolved or rejected).
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data.userId))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('Request completed'));
// 1
// Request completed


// #4 - Regular Expression Improvements
const regex = /bruce.wayne/s; // Allows . to match newline characters (\n).
console.log(regex.test('bruce\\wayne')); // true

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/; // Improves regex readability with named groups.
const match = dateRegex.exec('2025-02-17');

console.log(match.groups); // { year: '2025', month: '02', day: '17' }
console.log(match.groups.year); // 2025

ES10 Features

Feature	Description
Array.prototype.flat()	Flattens nested arrays
Array.prototype.flatMap()	Maps and flattens arrays in one step
Object.fromEntries()	Converts key-value pairs to objects
String.prototype.trimStart()/trimEnd()	Trims spaces from strings
Optional catch Binding	`catch` without error parameter
Symbol.description	Retrieves symbol descriptions
Function.prototype.toString()	Returns exact source code
Well-Formed JSON.stringify()	Properly handles Unicode characters
BigInt (Stage 3)	Supports large integers

Sample codes

// #1 flat and flatMap methods for arrays
const nestedNumbers = [1, [2, [3, [4]]]];

console.log(nestedNumbers.flat());       // 1 level flattening [1, 2, [3, [4]]]
console.log(nestedNumbers.flat(2));      // 2 level flattening [1, 2, 3, [4]]
console.log(nestedNumbers.flat(Infinity)); // infinite flattening [1, 2, 3, 4]

// Combines map() and flat() in one method.
console.log(nestedNumbers.flat(Infinity).flatMap(x => [x, x * 2]));  // [1, 2, 2, 4, 3, 6, 4, 8]


// #2 - Object.fromEntries()
const superHeroArray = [['name', 'Bruce'], ['age', 32]];
const superHeroObject = Object.fromEntries(superHeroArray);

console.log(superHeroObject); // { name: 'Bruce', age: 32 }


// #3 - trimStart and trimEnd
const trimmedSuperHero = '    Superman    ';

console.log(trimmedSuperHero.trimStart()); // Superman___
console.log(trimmedSuperHero.trimEnd());  // ___Superman


// #4 - Optional Catch Binding in try...catch
try {
    throw new Error('Superhero not found!');
  } catch {
    console.log('An error occurred');
  }


// #5 - Symbol.description
const sym = Symbol('Bruce way is batman');
console.log(sym.description); // Bruce way is batman


// #6 - Function.prototype.toString() Revision - Returns the exact function body
function isSuperHero () {
    console.log('Bruce way is batman');
}

console.log(isSuperHero.toString());
// function isSuperHero () {
//    console.log('Bruce way is batman');
// }


// #7 - Well-Formed JSON.stringify() for emojis
console.log(JSON.stringify('\uD83D\uDE00')); // Outputs: '"😀"' 


// #8 - BigInt - Supports integers beyond Number.MAX_SAFE_INTEGER
const bigNumber = 123456789012345678901234567890n;
console.log(bigNumber + 10n); // 123456789012345678901234567900n

ES11 Features

Feature	Description
BigInt	Large integers beyond `Number.MAX_SAFE_INTEGER`
Nullish Coalescing (`??`)	Returns right-hand operand only if left-hand is `null`/`undefined`
Optional Chaining (`?.`)	Safely access nested properties without causing errors
Promise.allSettled()	Resolves after all promises are settled (either fulfilled or rejected)
globalThis	Standard global object across all JavaScript environments
String.prototype.matchAll()	Returns an iterator for all matches in a string
Stable Array.prototype.sort()	Ensures stable sorting (equal items retain original order)
import.meta	Provides metadata about the current module

Sample codes

// #1 - Nullish Coalescing Operator (??) - It returns the right-hand operand when the left-hand operand is null or undefined.
const superhero = null;
const userName = superhero ?? 'Batman';
console.log(userName); // 'Batman'

const human = "Bruce";
const isHuman = human ?? 18;
console.log(isHuman)  // Bruce


// #2 -  Optional Chaining (?.) -  If any part of the chain is null or undefined, it short-circuits and returns undefined without throwing an error.
const superheroObject = { name: 'Batman', age: 32, human : {name: 'Bruce Wayne'} };

console.log(superheroObject?.name);  // 'Batman'
console.log(superheroObject.age); // 32
console.log(superheroObject.human.name.fullName); // undefined (no error)


// #3 - Promise.allSettled() - Returns a promise that resolves when all promises have been settled (either resolved or rejected).
const p1 = Promise.resolve("Batman");
const p2 = Promise.reject('No superhero found');
const p3 = Promise.resolve("Superman");

Promise.allSettled([p1, p2, p3])
  .then(results => results.forEach(result => console.log(result.status)));
// 'fulfilled', 'rejected', 'fulfilled'


// #4 - globalThis - A standard global object that works across all JavaScript environments


// #5 - matchAll() - Returns an iterator for all matches in a string
const regex = /man+/g;
const str = 'Superman Batman Flash';

const matches = str.matchAll(regex);

for (const match of matches) {
  console.log(match[0]); // man man
}


// #6 - import.meta
console.log(import.meta.url);  // Displays the current module's URL

ES12 Features

Feature	Description
Logical Assignment Operators	Combines logical operators with assignment (`&&=`, `
Promise.any()	Resolves with the first fulfilled promise in an array of promises
WeakRefs	Allows referencing objects without preventing garbage collection
String.prototype.replaceAll()	Replaces all occurrences of a substring in a string
Numeric Separators ({% raw %}`_`)	Makes large numbers more readable using underscores (`_`)
Object.hasOwn()	Checks if an object has a specific property as its own (more reliable than `hasOwnProperty()`)
Enhanced Array.prototype.sort()	Numeric sorting now works correctly without a custom comparator

Sample codes

// #1 - Logical Assignment Operators - &&, ||, ??
let x = 1;
x &&= 2; // x remains 2, because x was truthy
console.log(x); // 2

let y = 0;
y &&= 3; // y remains 0, because y is falsy
console.log(y); // 0

let a = null;
a ||= 'default'; // a is assigned 'default', because it's falsy
console.log(a); // 'default'


let b = null;
b ??= 'fallback'; // b is assigned 'fallback', because it's nullish
console.log(b); // 'fallback'


// #2 - Promise.any() - returns the first promise that resolves
const p1 = Promise.reject('Superhero not found');
const p2 = Promise.reject('Human not found');
const p3 = Promise.resolve('Martian found');

Promise.any([p1, p2, p3])
  .then(result => console.log(result)) // 'Martian found'
  .catch(err => console.log(err));


// #3 - WeakRefs - allow you to reference objects without preventing them from being garbage collected.
let superhero = { name: 'Batman' };
let weakRef = new WeakRef(superhero);

// Access the object (if it hasn't been garbage collected)
console.log(weakRef.deref()); // { name: 'Batman' }

// After `superhero` is dereferenced, it may be garbage collected
superhero = null; // superhero can be garbage collected


// #4 - replaceAll() - replacing all occurrences of a substring in a string
const text = 'Batman has the kryptonite in case superman goes dooms day';
const result = text.replaceAll('o', '0');
console.log(result); // 'Batman has the krypt0nite in case superman g0es d00ms day'


// #5 - Numeric Separators (_) for numbers
const price = 100_000_000;
console.log(price) // 100000000


// #6 - Object.hasOwn() to check whether an object has a property
const superheroObject = { name: 'Batman', age: 32 };
console.log(Object.hasOwn(superheroObject, 'name')); // true
console.log(Object.hasOwn(superheroObject, 'human')); // false


// #7 - Numeric sorting improved
const numbers = [10, 1, 21, 2];
numbers.sort(); // Default behavior: lexicographic sorting
console.log(numbers); // ['1', '10', '2', '21']

const sortedNumbers = [10, 1, 21, 2];
sortedNumbers.sort((a, b) => a - b); // Numeric sorting
console.log(sortedNumbers); // [1, 2, 10, 21]

ES13 Features

Feature	Description
Array.at()	Allows accessing array elements with negative indices
Top-Level await	Allows `await` at the top level of modules without async functions
WeakRefs with FinalizationRegistry	Manages resources and cleanup when objects are garbage collected
Error.cause	Adds a `cause` property to errors for better error handling
Object.hasOwn()	Checks if an object has a property directly (not inherited)
Improved copyWithin()	Enhancements to `copyWithin()` method for copying array elements

Sample codes

// #1 - Array at() Method
const superheroes = ["Batman", "Superman", "Spiderman", "Ironman", "Captain America"];

console.log(superheroes.at(1)); // Superman (from the start)
console.log(superheroes.at(-1)); // Captain America (from the end)
console.log(superheroes.at(-2)); // Ironman (from the end)


// #2 - Top-Level await - Allows the use of await at the top level of modules without needing to wrap it in an async function
// In an ES module (e.g., `index.mjs`)
// const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
// const data = await response.json();
// console.log(data);


// #3 - WeakRefs with FinalizationRegistry
const registry = new FinalizationRegistry((value) => {
    console.log(`Object ${value} has been garbage collected`);
  });

let obj = { name: 'Bruce' };
registry.register(obj, 'Bruce');

obj = null; // Object will be collected, triggering the callback


// #4 - Error.cause - Provides a way to add a cause to an Error object. 

try {
    throw new Error('Something went wrong', { cause: 'Fake API call' });
  } catch (err) {
    console.log(err.message);  // 'Something went wrong'
    console.log(err.cause);    // 'Fake API call'
  }


// #5 - Array copyWithin() method
const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 3); // Copies elements from index 3 to index 0
console.log(numbers); // [4, 5, 3, 4, 5]

ES14 Features

Feature	Description
Array.prototype.toSorted()	Returns a sorted copy of an array, without mutating the original array
Array.prototype.toReversed()	Returns a reversed copy of an array, without mutating the original array
Array.prototype.toSpliced()	Returns a modified copy of an array with elements removed/added, without mutating the original array
Symbol.prototype.description	A new property that returns the description of a symbol
Improved RegExp Features	Enhanced regex capabilities with flags like `d` for dotall mode
Error Stack Trace Improvements	More detailed and accurate stack trace information, including async functions
Object.hasOwn() Improvements	More reliable and preferred method for checking an object's properties

Sample codes

// #1 - Array.prototype.toSorted() - creates a sorted copy of an array without mutating the original array.
const superheros = ["Superman", "Batman", "Flash"];
const sortedSuperheros = superheros.toSorted(); 
console.log(sortedSuperheros); // [ 'Batman', 'Flash', 'Superman' ]
console.log(superheros); // Original array: [ 'Superman', 'Batman', 'Flash' ]


// #2 - Array.prototype.toReversed() - returns a new array with the elements in reversed order, without changing the original array.
const reversedSuperheros = superheros.toReversed();
console.log(reversedSuperheros); // [ 'Flash', 'Batman', 'Superman' ]
console.log(superheros); // Original array: [ 'Superman', 'Batman', 'Flash' ]


// #3 - Array.prototype.toSpliced() - returns a new array with elements removed and/or added, without mutating the original array
const splicedSuperheros = superheros.toSpliced(1, 1, "Aquaman");
console.log(splicedSuperheros); // [ 'Superman', 'Aquaman', 'Flash' ]
console.log(superheros); // Original array: [ 'Superman', 'Batman', 'Flash' ]


// #4 - Improved RegExp Features
const regex = /foo.bar/s;
const result = regex.test('foo\nbar'); // true, because `.` can now match newlines
console.log(result);

Some of the ES16 Features

Feature	Description
groupBy	Allows us to group the array of objects based on a given callback function
with	changes a value of a given index
Set Methods	Union, intersection, difference
withResolver	Promise withResolver method for clean destructuring of the promise methods

Sample codes

// #1 groupBy object method - Allows us to group the array of objects based on a given callback function
const superheroes = [
    { name: 'Batman', id: 9801 },
    { name: 'Superman', id: 9804 },
    { name: 'Flash', id: 9802 },
    { name: 'Aquaman', id: 9803 },
  ];

  const groupedById = Object.groupBy(superheroes,superhero => superhero.id);
  console.log(groupedById);
  /* 
  {
  '9801': [ { name: 'Batman', id: 9801 } ],
  '9802': [ { name: 'Flash', id: 9802 } ],
  '9803': [ { name: 'Aquaman', id: 9803 } ],
  '9804': [ { name: 'Superman', id: 9804 } ]
}
  */

const groupedByIdForBatmanOrSuperman = Object.groupBy(superheroes,superhero => superhero.id === 9801 || superhero.id === 9804 ? "Super hero is batman or aquaman": "Other superheroes");
console.log(groupedByIdForBatmanOrSuperman);
/*
{
  'Super hero is batman or aquaman': [ { name: 'Batman', id: 9801 }, { name: 'Superman', id: 9804 } ],
  'Other superheroes': [ { name: 'Flash', id: 9802 }, { name: 'Aquaman', id: 9803 } ]
}
 */



// #2 - with() method - changes a value of a given index and could be chained with other methods like map
const updateAquamanWithSupergirl = superheroes.with(3, { name: 'Supergirl', id: 9805 });
console.log(updateAquamanWithSupergirl)
/**
 [
  { name: 'Batman', id: 9801 },
  { name: 'Superman', id: 9804 },
  { name: 'Flash', id: 9802 },
  { name: 'Supergirl', id: 9805 }
]
 */


// #3 Set methods - union, intersection and difference
const superheroesSet = new Set(["Batman", "Superman", "Flash", "Aquaman"]);
const humansSet = new Set(["Bruce", "Clark", "Barry", "Aquaman"]);

const union = superheroesSet.union(humansSet);
const intersection = superheroesSet.intersection(humansSet);
const difference = superheroesSet.difference(humansSet);

console.log("Union - ",union)  // Set(7) {'Batman','Superman','Flash','Aquaman','Bruce','Clark','Barry'}
console.log("Intersection - ",intersection) // Set(1) { 'Aquaman' }
console.log("Difference - ",difference) // Difference -  Set(3) { 'Batman', 'Superman', 'Flash' }


// #4 Promise withResolver method for clean destructuring of the promise methods
const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => {
  resolve('I am batman');
}, 1000);

promise.then(console.log); // Output after 1 second: I am batman