Introduction
ECMAScript¹ (or ES ) is the technical specification of a scripting language, standardized and maintained by ECMA International in ECMA-262 and ISO/IEC 16262. The best known implementations of this language (often referred to as dialects) are JavaScript, JScript and ActionScript (for those who remember the old days of Adobe Flash 😎).
The evolution of the UI/UX (User Interface/User eXperience) of websites has contributed to the growth and diffusion of Javascript, making it the language synonymous with client-side development. In 2009, with the introduction of Node.js, Javascript also “invaded” the server-side development sector, becoming — together with Python — the most used language.
In this article I want to show you the main new features introduced in each release of ECMAScript (and consequently in Javascript).
2009 — ECMAScript 5 (ES5)
5️⃣ Strict Mode: Improves error handling and prevents the use of undeclared variables.
— Browser Support: Chrome 13, Firefox 4, Safari 5.1, Edge 12, IE 10
'use strict' ;
x = 3.14 ; // This will throw an error because x is not declared
5️⃣ Object Methods: New methods for manipulating objects.
— Browser Support: Chrome 5, Firefox 4, Safari 5, Edge 12, IE 9
const obj = {a:1};
Object.defineProperty(obj, 'b', {value:2});
console.log( Object.keys(obj)); // ["a", "b"]
5️⃣ Array Methods: Methods to iterate and manipulate arrays.
— Browser Support: Chrome 5, Firefox 3.5, Safari 5, Edge 12, IE 9
const arr = [1, 2, 3, 4];
const doubled = arr.map( x => x * 2 );
console.log(doubled); // [2, 4, 6, 8]
5️⃣ JSON.parse() and JSON.stringify(): JSON format manipulation.
— Browser Support: Chrome 5, Firefox 3.5, Safari 5, Edge 12, IE 9
//String to JSON
var personString = '{"name":"Alessandra", "age":30}' ;
var personJSONObj= JSON.parse(personString);
console.log(personJSONObj.name ); // Outputs: Alexandra
//JSON to String
var personJSONObj = {name:"Alessia", age:25};
var personString = JSON.stringify(personJSONObj);
console.log(personString); // Outputs: {"name":"Alessia","age":25}
2015 — ECMAScript 6 (ES6) / ES2015
6️⃣ Let and Const: Block-scoped variable declarations.
— Browser Support: Chrome 49, Firefox 44, Safari 10, Edge 14
let x = 10 ;
const y = 20 ;
6️⃣ Arrow Functions: Compact syntax for functions.
— Browser Support: Chrome 45, Firefox 22, Safari 10, Edge 12
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
6️⃣ Template Literals: Multi-line strings and interpolation ( NB. the string must be enclosed in backtick characters).
— Browser Support: Chrome 41, Firefox 34, Safari 9, Edge 12
const name = 'World' ;
console.log( `Hello, ${name} !` ); // Hello, World!
6️⃣ Classes: Syntax for defining classes.
— Browser Support: Chrome 42, Firefox 45, Safari 9, Edge 13
class Person{
constructor ( name ) {
this.name = name;
}
greet() {
console.log( `Hello, ${ this.name} ` );
}
}
const john = new Person( 'John' );
john.greet(); // Hello, John
6️⃣ Modules: Import and export modules.
— Browser Support: Chrome 61, Firefox 60, Safari 10.1, Edge 16
// In file math.js
export function add( a, b ) {
return a + b;
}
// In another file
import { add } from './math.js' ;
console.log( add(2, 3)); // 5
6️⃣ Promises: Easier asynchronous management.
— Browser Support: Chrome 32, Firefox 29, Safari 8, Edge 12
const promise = new Promise(( resolve, reject ) => {
setTimeout(() => resolve( 'Done!' ), 1000 );
});
promised.then( result => console.log(result)); // Done!
2016 — ECMAScript 7 (ES7) / ES2016
7️⃣ Exponentiation Operator: Exponentiation operator (**).
— Browser Support: Chrome 52, Firefox 52, Safari 10.1, Edge 14
console.log( 2 ** 3 ); // 8
7️⃣ Array.prototype.includes: Method to check for the presence of an element in an array.
— Browser Support: Chrome 47, Firefox 43, Safari 9, Edge 14
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
2017 — ECMAScript 8 (ES8) / ES2017
8️⃣ Async/Await: Syntax for asynchronous handling based on Promises.
— Browser Support: Chrome 55, Firefox 52, Safari 10.1, Edge 15
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
fetchData();
8️⃣ Object.entries and Object.values: Methods to get keys and values of an object.
— Browser Support: Chrome 54, Firefox 47, Safari 10.1, Edge 14
const obj = {a:1, b:2};
console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]
console.log(Object.values(obj)); // [1, 2]
8️⃣ String Padding: Methods padStartand and padEnd for padding strings.
— Browser Support: Chrome 57, Firefox 48, Safari 10.1, Edge 15
console.log('5'.padStart(2, '0')); // "05"
console.log('5'.padEnd(2, '0')); // "50"
2018 — ECMAScript 9 (ES9) / ES2018
9️⃣ Rest/Spread Properties: Object Operators.
— Browser Support: Chrome 60, Firefox 55, Safari 11, Edge 16
const obj = {a:1, b:2, c:3};
const {a, ...rest} = obj;
console.log(rest); // {b:2, c:3}
9️⃣ Asynchronous Iteration: Asynchronous iterators with for-await-of.
— Browser support: Chrome 63, Firefox 57, Safari 12, Edge 79
async function process(array) {
for await(let item of array) {
console.log(item);
}
}
process([1, 2, 3]);
9️⃣ Promise.finally: Method to execute code after a Promise completes.
— Browser Support: Chrome 63, Firefox 58, Safari 11.1, Edge 18
promise
.then(result => console.log(result))then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log('Finished'));
2019 — ECMAScript 10 (ES10) / ES2019
1️⃣0️⃣ Array.prototype.flat and flatMap: flat() “flattens” an array of arrays into a single array. flatMap() combines mapping and flattening.
— Browser Support: Chrome 69, Firefox 62, Safari 12, Edge 79
const arr = [1, [2, 3], [4, 5]];
console.log(arr.flat()); // [1, 2, 3, 4, 5]
const arr2 = [1, 2, 3];
console.log(arr2.flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6]
1️⃣0️⃣ Object.fromEntries: Method to create objects from arrays of key-value pairs.
— Browser Support: Chrome 73, Firefox 63, Safari 12.1, Edge 79
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries);
console.log(obj); // {a:1, b:2}
1️⃣0️⃣ Optional Catch Binding: Ability to omit the catch parameter in errors.
— Browser Support: Chrome 66, Firefox 58, Safari 11, Edge 79
try {
throw new Error( 'Oops' );
} catch { //you used to have to write catch(e)
console.log('Error caught');
}
2020 — ECMAScript 11 (ES11) / ES2020
1️⃣1️⃣ BigInt: Data type to represent very large integers.
— Browser Support: Chrome 67, Firefox 68, Safari 14, Edge 79
const bigInt = 1234567890123456789012345678901234567890n ;
console.log(bigInt); // 1234567890123456789012345678901234567890n
1️⃣1️⃣ Optional Chaining (?.): Allows you to access deeply nested properties without having to explicitly check whether each reference in the chain is null or undefined.
— Browser Support: Chrome 80, Firefox 74, Safari 13.1, Edge 80
let user = {name:"Alice", address: {city:"Wonderland"}};
console.log(user?.address?.city ); // "Wonderland"
console.log(user?.contact?.phone ); // undefined
1️⃣1️⃣ Nullish Coalescing Operator (??): Returns the value of its right operand when the left operand is null or undefined.
— Browser Support: Chrome 80, Firefox 72, Safari 13.1, Edge 80
let foo = null ?? 'default string' ;
console.log(foo); // "default string"
1️⃣1️⃣ Dynamic Import: Allows you to load modules dynamically, i.e. during code execution, rather than statically at the beginning. This is useful for conditional module loading or module loading. Dynamic Import is particularly useful for improving the performance of web applications, allowing you to load only the necessary code when needed.
— Browser Support: Chrome 63, Firefox 67, Safari 11.1, Edge 79
// Suppose we have a module called 'module.js'
// module.js
export function greet() {
console.log("Hello from the module!");
}
// Main code
async function loadModule() {
const module = await import('./module.js');
module.greet(); // "Hello from the module!"
}
loadModule();
2021 — ECMAScript 12 (ES12) / ES2021
1️⃣2️⃣ Logical Assignment Operators (&&=, ||=, ??=): Combines logical operators with assignment.
— Browser Support : Chrome 85, Firefox 79, Safari 14, Edge 85
let a = 1 ;
to &&= 2 ;
console.log(a); // 2
let b = null ;
b ??= 3 ;
console.log(b); // 3
1️⃣2️⃣ String.prototype.replaceAll(): Replaces all occurrences of a string with another.
— Browser Support : Chrome 85, Firefox 77, Safari 13.1, Edge 85
let str = "Hello world! Hello!" ;
console.log(str.replaceAll("Hello", "Hi")); // "Hi world! Hi!"
1️⃣2️⃣ Numeric Separators: Improves the readability of large numbers by adding underscores ( _ ) as separators.
— Browser Support : Chrome 75, Firefox 70, Safari 13, Edge 79
let largeNumber = 1_000_000_000 ;
console.log(largeNumber); // 1000000000
1️⃣2️⃣ Promise.any(): Returns a promise that resolves as soon as one of the provided promises resolves, or rejects if all promises are rejected.
— Browser Support : Chrome 85, Firefox 79, Safari 14.1, Edge 85
const p1 = Promise.reject('Error');
const p2 = new Promise((resolve) => setTimeout(resolve, 100, 'Success' ));
const p3 = new Promise((resolve) => setTimeout(resolve, 200, 'Another Success'));
Promise.any([p1, p2, p3]).then((value) => {
console.log(value); // "Success"
});
1️⃣2️⃣ WeakRefs: Allows you to create weak references to objects, which do not prevent garbage collection.
— Browser Support : Chrome 84, Firefox 79, Safari 14, Edge 84
let obj = {name:'Alice'};
let weakRef = new WeakRef(obj);
obj = null ; // Object can be garbage collected
console.log(weakRef.deref()); // May return undefined if object was garbage collected
1️⃣2️⃣ FinalizationRegistry: Allows you to register callbacks that are executed when a registered object is garbage collected.
— Browser Support : Chrome 84, Firefox 79, Safari 14, Edge 84
let registry = new FinalizationRegistry((heldValue ) => {
console.log(`Object with held value ${heldValue} was garbage collected`);
});
let obj = {name:'Alice'};
registry.register(obj, 'some value' );
obj = null ; // The object can be collected by the garbage collector
2022 — ECMAScript 13 (ES13) / ES2022
1️⃣3️⃣ Top-level await: Allows you to use await outside of the functions async.
— Browser Support: Chrome 89, Firefox 89, Safari 15, Edge 89
// In a module
let response = await fetch('https://api.example.com/data' );
let data = await response.json();
console.log(data);
1️⃣3️⃣ Class Fields: Allows you to define properties directly within a class definition.
— Browser Support: Chrome 72, Firefox 90, Safari 14.1, Edge 79
class MyClass{
myField = 'value' ;
}
let instance = new MyClass();
console.log(instance.myField); // "value"
1️⃣3️⃣ Static Class Fields and Private Methods: Support for static fields and private methods in classes.
— Browser Support: Supported by Chrome 72+, Firefox 90+, Edge 79+, Safari 14+.
class MyClass{
static staticField = 'static' ;
#privateMethod(){
return 'private method' ;
}
callPrivateMethod(){
return this.#privateMethod();
}
}
console.log(MyClass.staticField); // 'static'
const instance = new MyClass();
console.log(instance.callPrivateMethod()); // 'private method'
1️⃣3️⃣ RegExp Match Indices: Adding property indicesto objects RegExp.
— Browser Support: Supported by Chrome 90+, Firefox 90+, Edge 90+, Safari 15+.
const regex = /a(b)c/ ;
const match = regex.exec('abc');
console.log(match.indices); // [[0, 3], [1, 2]]
1️⃣3️⃣ Object.hasOwn(): A safer way to check if an object owns a specific property.
— Browser Support: Supported by Chrome 93+, Firefox 92+, Edge 93+, Safari 15+.
const obj = {key:'value'};
console.log(Object.hasOwn(obj, 'key')); // true
2023 — ECMAScript 14 (ES14) / ES2023
1️⃣4️⃣ Array.prototype.toSorted: This method works like Array.prototype.sort, but creates a new sorted array without modifying the original array.
— Browser Support: Supported by Chrome 110+, Firefox 115+, Edge 110+, Safari 16+.
const arr = [3, 1, 4, 1, 5];
const sortedArr = arr.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]
1️⃣4️⃣ Array.prototype.toReversed: Similar to Array.prototype.reverse, but creates a new reversed array without modifying the original array.
— Browser Support: Supported by Chrome 110+, Firefox 115+, Edge 110+, Safari 16+.
const arr = [1, 2, 3];
const reversedArr = arr.toReversed();
console.log(reversedArr); // [3, 2, 1]
console.log(arr); // [1, 2, 3]
1️⃣4️⃣ Array.prototype.toSpliced: Allows you to create a new array with some elements removed or replaced, without modifying the original array.
— Browser Support: Supported by Chrome 110+, Firefox 115+, Edge 110+, Safari 16+.
const arr = [1, 2, 3, 4];
const splicedArr = arr.toSpliced(1, 2, 5, 6);
console.log(splicedArr); // [1, 5, 6, 4]
console.log(arr); // [1, 2, 3, 4]
1️⃣4️⃣ Array.prototype.with: Creates a new array with a modified element at the specified index.
— Browser Support: Supported by Chrome 110+, Firefox 115+, Edge 110+, Safari 16+.
const arr = [1, 2, 3];
const newArr = arr.with(1, 4);
console.log(newArr); // [1, 4, 3]
console.log(arr); // [1, 2, 3]
1️⃣4️⃣ Hashbang syntax support (#!): Allows you to use hashbang syntax in JavaScript files to specify the interpreter.
— Browser support: Not applicable to browsers, but supported in Node.js environments.
#!/usr/bin/env node
console.log('Hello, world!');
2024 — ECMAScript 15 (ES15) / ES2024
1️⃣5️⃣ Object.groupBy: is a function that allows you to group elements of an array based on a criterion specified by a callback function. It returns an object whose properties correspond to the groups created by the function.
— Browser Support: Supported by Chrome 117+, Firefox 119+, Edge 117+, Safari 17.4+.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const grouped = Object.groupBy(numbers, num => num % 2 === 0 ? 'even' : 'odd');
console.log(grouped); // Output: { odd: [1, 3, 5, 7, 9], even: [2, 4, 6, 8]}
1️⃣5️⃣ Promise.withResolvers: Facilitates the creation of promises that can be resolved or rejected from the outside. Provides an object that contains a promise (promise) along with functions to resolve (resolve) or reject (reject) it.
Previously, the pattern for creating external promises was a bit verbose and not very clear. Promise.withResolverssimplifies this process, making it easier to manage promises in complex scenarios such as handling timeouts, external resources, or other asynchronous conditions.
— Browser Support: Supported by Chrome 119+, Firefox 121+, Edge 119+, Safari 17.4+.
To better understand this new feature we must first take a step back to ES13. We will use the following code as an example to understand the benefits of Promise.withResolvers:
// ES14 - ES2023
let resolveFn, rejectFn;
const promise = new Promise((resolve, reject) => {
resolveFn = resolve;
rejectFn = reject;
});
setTimeout(() => resolveFn('Resolved after 1 second' ), 1000);
promised.then(value => console.log(value));
// Output after 1 second: "Resolved after 1 second"
With Promise.withResolvers, we can do the same thing more simply:
const {promise, resolve, reject} = Promise.withResolvers();
setTimeout(() => resolve('Resolved after 1 second' ), 1000);
promised.then(value => console.log(value));
// Output after 1 second: "Resolved after 1 second"
Another example to better understand its use:
function wait(ms) {
const {promise, resolve, reject} = Promise.withResolvers();
// Resolve the promise after the specified number of milliseconds
setTimeout(() => {
resolve(`Resolved after ${ms} milliseconds`);
}, ms);
return promise;
}
// Use the 'wait' function and wait for the promise to be resolved
wait(2000).then((message) => console.log(message));
// Output after 2 seconds: "Resolved after 2000 milliseconds"
Before we leave, here are some interesting proposals that we might see in the future…
NB The features listed below are still in the Proposal stage
Decorators: New possibilities for using decorators with a clearer and more powerful syntax as @login this example.
Decorators use a syntax to add annotations or modify the behavior of classes, methods, properties, and parameters. In ES15, decorators are improved to provide clearer syntax and more power.
function log(target, key, descriptor) {
const originalMethod = descriptor.value ;
descriptor.value = function(...args ) {
console.log(`Calling ${key} with`, args);
return originalMethod.apply(this, args);
};
return descriptor;
}
class MyClass {
@log
myMethod(arg) {
console.log(`Inside myMethod with ${arg} `);
}
}
const instance = new MyClass();
instance.myMethod('test');
#Output
Calling myMethod with test
Inside myMethod with test
Records and Tuples: New immutable data types that offer significant advantages in manipulating and managing data structures. These types are designed to be more predictable and efficient, especially in scenarios where immutability is desirable.
const record = #{name:"Alice", age:30};
console.log(record.name); // Alice
console.log(record.age); // 30
// Attempt to edit throws error
// record.name = "Bob"; // TypeError: Cannot assign to read only property 'name' of object
const tuple = #[1, 2, 3];
console.log(tuple[0]); // 1
console.log(tuple[1]); // 2
consoles.log(tuple[2]); // 3
// Attempt to modify throws error
// tuple[0] = 10; // TypeError: Cannot assign to read only property '0' of object
Pipeline Operator: is an operator that allows you to take the output of an expression and pass it as input to the next function. This approach improves the readability of the code when you have multiple subsequent operations that need to be applied to a value.
The operator |> is used to apply a function to a value, passing the value as the first argument to the function.
function add(x, y) {
return x + y;
}
function multiply(x, y) {
return x * y;
}
function square(x) {
return x * x;
}
/** Example 1 with functions **/
const result = 5
|> (x => add(x, 3)) //5 + 3
|> (x => multiply(x, 2)) //(5 + 3) * 2
|> square; //((5 + 3) * 2) ^ 2
console.log(result); // 128
/** Example 2 with array **/
const numbers = [1, 2, 3, 4, 5];
const result = numbers
|> (arr => arr.map( x => x * 2 )) // [2, 4, 6, 8, 10]
|> (arr => arr.filter( x => x > 5 )); // [6, 8, 10]
console.log(result); // [6, 8, 10]
Follow me #techelopment
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
telegram: techelopment_channel
youtube: @techelopment
whatsapp: Techelopment
References
[1] ECMAScript - Wikipedia
GitHub - sudheerj/ECMAScript-features: ECMAScript features cheatsheet
Modern JavaScript Features in ES13 ES2022
JavaScript | MDN
V8
Can I use... Support tables for HTML5, CSS3, etc
Javascript — What's new with ECMAScript® 2024 (ES15)
⭐ECMAScript version history - Wikipedia
⭐proposals/finished-proposals.md at main · tc39/proposals
Top comments (0)