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: '"
![Apple Officially Announces Return of 'Ted Lasso' for Fourth Season [Video]](https://www.iclarified.com/images/news/96710/96710/96710-640.jpg)
![Apple Plans Live Translation Feature for AirPods in iOS 19 [Report]](https://www.iclarified.com/images/news/96712/96712/96712-640.jpg)
![Apple Shares Official Trailer for 'F1' Starring Brad Pitt [Video]](https://www.iclarified.com/images/news/96714/96714/96714-640.jpg)
![[Update: Fix] Chromecast (2nd gen) and Audio can’t Cast in ‘Untrusted’ outage](https://i0.wp.com/9to5google.com/wp-content/uploads/sites/4/2019/08/chromecast_audio_1.jpg?resize=1200%2C628&quality=82&strip=all&ssl=1)
_Tanapong_Sungkaew_Alamy.jpg?#)
_JIRAROJ_PRADITCHAROENKUL_Alamy.jpg?#)
![[The AI Show Episode 139]: The Government Knows AGI Is Coming, Superintelligence Strategy, OpenAI’s $20,000 Per Month Agents & Top 100 Gen AI Apps](https://www.marketingaiinstitute.com/hubfs/ep%20139%20cover-2.png)
![[The AI Show Episode 138]: Introducing GPT-4.5, Claude 3.7 Sonnet, Alexa+, Deep Research Now in ChatGPT Plus & How AI Is Disrupting Writing](https://www.marketingaiinstitute.com/hubfs/ep%20138%20cover.png)
