1. javascript
  2. /basics
  3. /versions

A Brief History of ECMAScript Versions in JavaScript

Introduction

JavaScript is a programming language that 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. JavaScript is standardized by ECMA International (European Computer Manufacturers Association) and the standard is called ECMAScript.

ECMAScript is a standardized specification for JavaScript and it has gone through several versions, each introducing new features and changes. In this article, we will take a look at the history of ECMAScript versions and the key changes 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
let 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.

// Example of a for-in loop in ES2
let numbers = [1, 2, 3, 4, 5];
for (let number in numbers) {
    console.log(number);
}
// Output: 0, 1, 2, 3, 4

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
let text = "Hello, World!";
let regex = /Hello/;
console.log(regex.test(text)); // Output: true

// Example of try-catch statement in ES3
try {
    let 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
let jsonText = '{"name":"John Doe","age":30}';
let jsonData = JSON.parse(jsonText);
console.log(jsonData.name); // Output: "John Doe"

// Example of improved array manipulation in ES5
let 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}! You are ${age} years old.`;
console.log(message); // Output: "Hello, John Doe! You are 30 years old."

// Example of classes in ES6
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}
let john = new Person("John Doe", 30);
john.sayHello(); // Output: "Hello, my name is John Doe and I am 30 years old."

ECMAScript 2016 (ES7)

ECMAScript 2016, also known as ES7, was the seventh version of the ECMAScript standard and was released in 2016. It introduced several important features such as the exponentiation operator, Array.prototype.includes(), and async/await.

// Example of the exponentiation operator in ES7
console.log(2 ** 3); // Output: 8

// Example of Array.prototype.includes() in ES7
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // Output: true

// Example of async/await in ES7
async function getData() {
let response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
let data = await response.json();
console.log(data);
}
getData();

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 important features such as SharedArrayBuffer, Object.values(), and Object.entries().

// Example of SharedArrayBuffer in ES8
let buffer = new SharedArrayBuffer(1024);
let view = new Int32Array(buffer);
view[0] = 42;
console.log(view[0]); // Output: 42

// Example of Object.values() in ES8
let person = { name: "John Doe", age: 30 };
console.log(Object.values(person)); // Output: ["John Doe", 30]

// Example of Object.entries() in ES8
console.log(Object.entries(person)); // Output: [["name", "John Doe"], ["age", 30]]

ECMAScript 2018 (ES9)

ECMAScript 2018, also known as ES9, was the ninth version of the ECMAScript standard and was released in 2018. It introduced several important features such as rest/spread properties, async iteration, and template literals.

// Example of rest/spread properties in ES9
let a = { x: 1, y: 2, z: 3 };
let b = { x: 2, ...a };
console.log(b); // Output: { x: 2, y: 2, z: 3 }

// Example of async iteration in ES9
async function* getData() {
    yield await fetch("https://jsonplaceholder.typicode.com/todos/1");
    yield await fetch("https://jsonplaceholder.typicode.com/todos/2");
    yield await fetch("https://jsonplaceholder.typicode.com/todos/3");
}
(async () => {
    for await (let response of getData()) {
        let data = await response.json();
        console.log(data);
    }
})();

ECMAScript 2019 (ES10)

ECMAScript 2019, also known as ES10, was the tenth version of the ECMAScript standard and was released in 2019. It introduced several important features such as Array.prototype.flat() and Array.prototype.flatMap(), the trimStart() and trimEnd() methods, and JSON superset.

// Example of Array.prototype.flat() in ES10
let nested = [1, [2, [3, [4, [5]]]]];
console.log(nested.flat()); // Output: [1, 2, [3, [4, [5]]]]
console.log(nested.flat(2)); // Output: [1, 2, 3, [4, [5]]]
console.log(nested.flat(Infinity)); // Output: [1, 2, 3, 4, 5]

// Example of trimStart() and trimEnd() in ES10
let text = "  Hello, World!  ";
console.log(text.trimStart()); // Output: "Hello, World!  "
console.log(text.trimEnd()); // Output: " Hello, World!"

// Example of JSON superset in ES10
console.log(JSON.stringify({ x: 1, y: 2, z: 3 }, (key, value) => {
if (typeof value === 'function') {
return value.toString();
}
return value;
})); // Output: "{"x":1,"y":2,"z":3,"toString":"function toString() { [native code] }"}"

ECMAScript 2020 (ES11)

ECMAScript 2020, also known as ES11, was the eleventh version of the ECMAScript standard and was released in 2020. It introduced several important features such as globalThis, private fields, and nullish coalescing.

// 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 important features such as optional chaining, logical assignment, and numeric separators.

// Example of optional chaining in ES12
let obj = {
  foo: {
    bar: {
      baz: 42
    }
  }
};
console.log(obj?.foo?.bar?.baz); // 42

// Example of logical assignment in ES12
let x = 1;
x ||= 2;
console.log(x); // 1

let y;
y ||= 2;
console.log(y); // 2

// Example of numeric separators in ES12
let num = 1_000_000;
console.log(num); // 1000000

ECMAScript 2022 (ES13)

ECMAScript 2022 (ES13) is the 13th and latest edition of the ECMAScript standard. It introduced several new features, such as:

  • The ability to use top-level await, making it possible to use the keyword outside of an async function

  • New class elements: private and public instance fields, private and public static fields, private instance methods and accessors, and private static methods and accessors

  • The ability to use static blocks inside classes, which allows for per-class evaluation initialization

  • The #x in obj syntax which allows you to test for the presence of private fields on objects

  • Regular expression match indices via the /d flag, which provides start and end - indices for matched substrings

  • The cause property on Error objects, that can be used to record a causation chain in errors

  • The at method for Strings, Arrays, and TypedArrays, which allows relative indexing

  • Object.hasOwn, a convenient alternative to Object.prototype.hasOwnProperty

You can check out some elaborate examples of these concepts here.

Conclusion

The evolution of ECMAScript versions has greatly impacted the language and its capabilities. Each version has introduced new features, improvements, and changes that have made the language more powerful and easier to use. From ES1 to the latest ES13, JavaScript has come a long way. With the fast-paced nature of technology and the web development industry, it's crucial for developers to continuously update their knowledge with the latest features and best practices so they can optimize their code and create better user experiences.