As a programming language, JavaScript is widely used in web development for creating interactive and dynamic user interfaces. It was created by Brendan Eich in 1995 under the name Mocha, which was later changed to LiveScript, and finally to JavaScript.
The ECMAScript standard is developed and maintained by Ecma International, a Swiss-based standards organization, and it is officially designated as ECMA-262. This standard serves as the foundation of JavaScript, and its versions directly influence the development and evolution of the language. In this article, we'll provide an overview of the ECMAScript evolution, offering insights into some of the key updates in each version.
ECMAScript 1 (1997)
ECMAScript 1, also known as ES1, was the first version of the ECMAScript standard and was released in 1997. It was based on the JavaScript language and included features such as variables, functions, and basic control flow statements.
// Example of a variable in ES1
var name = "John Doe";
console.log(name); // Output: "John Doe"
// Example of a function in ES1
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // Output: 3
ECMAScript 2 (1998)
ECMAScript 2, also known as ES2, was the second version of the ECMAScript standard and was released in 1998. It made minor changes to the language and mainly focused on making the standard more consistent.
ECMAScript 3 (1999)
ECMAScript 3, also known as ES3, was the third version of the ECMAScript standard and was released in 1999. It introduced several important features such as regular expressions, try-catch statements, and improved string handling.
// Example of regular expressions in ES3
var text = "Hello, World!";
var regex = /Hello/;
console.log(regex.test(text)); // Output: true
// Example of try-catch statement in ES3
try {
var x = y + 1;
} catch (error) {
console.log(error); // Output: ReferenceError: y is not defined
}
ECMAScript 4 (Never Released)
ECMAScript 4 was planned to be the fourth version of the ECMAScript standard, but it was never released. It was intended to introduce significant changes to the language, including classes, interfaces, and namespaces. However, the proposal faced significant opposition, and the development was ultimately abandoned.
ECMAScript 5 (2009)
ECMAScript 5, also known as ES5, was the fifth version of the ECMAScript standard and was released in 2009. It introduced several important features such as strict mode, JSON support, and improved array manipulation.
// Example of strict mode in ES5
function add(a, b) {
"use strict";
return a + b;
}
console.log(add(1, 2)); // Output: 3
// Example of JSON support in ES5
var jsonText = '{"name":"John Doe","age":30}';
var jsonData = JSON.parse(jsonText);
console.log(jsonData.name); // Output: "John Doe"
// Example of improved array manipulation in ES5
var numbers = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(3)); // Output: 2
console.log(numbers.map(function(number) { return number * 2; })); // Output: [2, 4, 6, 8, 10]
ECMAScript 5.1 (2011)
ECMAScript 5.1, also known as ES5.1, was a minor update to ECMAScript 5 and was released in 2011. It mostly focused on making the standard more consistent and correcting errors.
ECMAScript 6 (2015)
ECMAScript 6, also known as ES6, was the sixth version of the ECMAScript standard and was released in 2015. It introduced several important features such as let and const, arrow functions, template literals, and classes.
// Example of let and const in ES6
let name = "John Doe";
const age = 30;
// Example of arrow function in ES6
let add = (a, b) => a + b;
console.log(add(1, 2)); // Output: 3
// Example of template literals in ES6
let message = `Hello, ${name}!`;
console.log(message); // Output: "Hello, John Doe!"
// Example of class in ES6
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, ${this.name}!`;
}
}
let john = new Person("John Doe", 30);
console.log(john.greet()); // Output: "Hello, John Doe!"
ECMAScript 2016 (ES7)
ECMAScript 2016, also known as ES7, was the seventh version of the ECMAScript standard and was released in 2016. It introduced two main features: the exponentiation operator and Array.prototype.includes().
// Example of exponentiation operator in ES7 let square = 2**2; console.log(square); // Output: 4 // Example of Array.prototype.includes in ES7 let numbers = [1, 2, 3, 4, 5]; console.log(numbers.includes(3)); // Output: true
ECMAScript 2017 (ES8)
ECMAScript 2017, also known as ES8, was the eighth version of the ECMAScript standard and was released in 2017. It introduced several new features, including async/await, Object.values(), Object.entries(), and string padding.
// Example of async/await in ES8
async function fetchData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
return data;
}
// Example of Object.values() and Object.entries() in ES8
let person = { name: "John Doe", age: 30 };
console.log(Object.values(person)); // Output: ["John Doe", 30]
console.log(Object.entries(person)); // Output: [["name", "John Doe"], ["age", 30]]
// Example of string padding in ES8
let text = "Hello";
console.log(text.padStart(10, '-')); // Output: "-----Hello"
console.log(text.padEnd(10, '-')); // Output: "Hello-----"
ECMAScript 2018 (ES9)
ECMAScript 2018, also known as ES9, brought significant updates such as asynchronous iteration, Promise.prototype.finally(), and rest/spread operators.
// Example of asynchronous iteration in ES9
async function asyncIterable() {
let iterable = {
[Symbol.asyncIterator]() {
let i = 0;
return {
next() {
if (i < 3) {
return Promise.resolve({ value: i++, done: false });
}
return Promise.resolve({ done: true });
}
};
}
};
for await (let value of iterable) {
console.log(value); // Output: 0, 1, 2
}
}
// Example of Promise.prototype.finally() in ES9
fetch('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.log(error))
.finally(() => console.log('Finished!'));
// Example of rest/spread operators in ES9
let person = { name: "John Doe", age: 30, country: "USA" };
let {name, ...rest} = person;
console.log(name); // Output: "John Doe"
console.log(rest); // Output: { age: 30, country: "USA" }
ECMAScript 2019 (ES10)
ECMAScript 2019, also known as ES10, introduced features like Array.prototype.flat(), Array.prototype.flatMap(), and Object.fromEntries().
// Example of Array.prototype.flat() and Array.prototype.flatMap() in ES10
let array = [1, 2, [3, 4]];
console.log(array.flat()); // Output: [1, 2, 3, 4]
let numbers = [1, 2, 3, 4];
console.log(numbers.flatMap(x => [x, x*2])); // Output: [1, 2, 2, 4, 3, 6, 4, 8]
// Example of Object.fromEntries() in ES10
let entries = [['name', 'John Doe'], ['age', 30]];
console.log(Object.fromEntries(entries)); // Output: { name: "John Doe", age: 30 }
ECMAScript 2020 (ES11)
ECMAScript 2020, also known as ES11, came with features such as BigInt for larger integers, Promise.allSettled(), Nullish Coalescing Operator (??), and Optional Chaining (?.).
// Example of globalThis in ES11
console.log(globalThis); // Output: Window {...}
// Example of private fields in ES11
class Person {
#name = "John Doe";
#age = 30;
getName() {
return this.#name;
}
getAge() {
return this.#age;
}
}
let person = new Person();
console.log(person.getName()); // Output: "John Doe"
console.log(person.getAge()); // Output: 30
// Example of nullish coalescing in ES11
let value = null;
console.log(value ?? "default"); // Output: "default"
ECMAScript 2021 (ES12)
ECMAScript 2021, also known as ES12, introduced several new features such as additional logical assignment operators, numeric separators, Promise.any(), and String.prototype.replaceAll().
// Example of Logical Assignment Operators in ES12
let a = 0, b = 1;
a &&= b;
console.log(a); // Output: 0
a ||= b;
console.log(a); // Output: 1
a &&= b;
console.log(a); // Output: 1
// Example of Numeric Separators in ES12
let billion = 1_000_000_000; // This is equivalent to let billion = 1000000000;
console.log(billion); // Output: 1000000000
// Example of Promise.any() in ES12
let promises = [
Promise.reject('1'),
Promise.resolve('2'),
Promise.reject('3')
];
Promise.any(promises)
.then(value => console.log(value)) // Output: "2"
.catch(error => console.log(error));
// Example of String.prototype.replaceAll() in ES12
let string = "foo foo foo";
console.log(string.replaceAll("foo", "bar")); // Output: "bar bar bar"