JavaScript versions: How JavaScript has changed over the years

From powering simple web animations to driving complex web applications, JavaScript has transformed the web as we know it. But it wasn’t always this powerful. Let’s journey through JavaScript’s history, exploring how it evolved from a simple scripting language into the backbone of modern web development.

Brendan Eich invented JavaScript, which became an ECMA standard in 1997. ECMAScript is the official language name. Major ECMAScript versions include ES1, ES2, ES3, ES5, and ES6.

JavaScript History#

Before JavaScript, websites were built entirely with static HTML, where every element—from lists to links—was hard-coded. This resulted in pages that couldn’t respond dynamically to user interactions.

For example, the San Francisco FogCamhttps://fogcam.org/ (1994) was revolutionary and one of the earliest webcams.

Despite offering a “live” view, the site relied on static HTML and CSS, refreshing every 20 seconds via a <meta> tag. This workaround highlighted a key limitation: while dynamic content was emerging, the technology to seamlessly update pages without full reloads was missing.

Similarly, the Dole/Kemp ‘96https://www.dolekemp96.org/main.htm website, created during Senator Bob Dole’s presidential campaign, also exemplified the static constraints of early web development. Navigation was predefined through hard-coded HTML routes, leaving little room for interactive or adaptive user experiences.

These examples illustrate how static web pages were fundamentally limited despite their initial innovation. The growing need for interactivity and dynamic content led engineers at Netscape Communicator to develop JavaScript—a scripting language that would transform the web by enabling animations, interactive forms, and real-time updates without needing constant page reloads.

JavaScript beginnings#

Initially named Mocha, then briefly LiveScript, JavaScript emerged in 1995 as a tool for adding dynamic elements to static web pages. In collaboration with Sun Microsystems, Netscape officially released JavaScript with Navigator 2.0, marking the beginning of a new era for the web.

Netscape pioneered this scripting language by collaborating with Sun Microsystems to develop JavaScript. As Netscape dominated the browser market, competitors sought alternatives to keep up with their success.

For legal reasons, Microsoft introduced its version of JavaScript, JScript, to increase user interaction and enhance website experiences. While Netscape initially led the browser wars, Microsoft’s Internet Explorer gained traction due to JScript. This led to a divided ecosystem and challenges in standardizing the language.

JavaScript gained popularity because it resembled Java syntax. As Java grew in popularity, JavaScript also became more widely adopted.

Note: Despite their names, Java and JavaScript are fundamentally different. Java is a compiled language that runs on a Virtual Machine or browser, while JavaScript is a lightweight, interpreted scripting language primarily used for dynamic behavior in browsers and environments like Node.js.

JavaScript versions and ECMAScript#

ECMAScript is the standardized specification that underpins JavaScript and similar scripting languages. It defines core language features, syntax, and semantics to ensure consistency across different implementations and platforms.

The intense rivalry between Netscape and Microsoft largely drove the creation of ECMAScript. As Netscape’s JavaScript and Microsoft’s JScript began to diverge in functionality and behavior, ECMA International stepped in to standardize these approaches, ensuring compatibility and consistency across web browsers and laying the groundwork for a more unified web environment.

JavaScript’s evolution is closely tied to the ECMAScript specification. In 1997, Netscape Communicator submitted key documents to ECMA International, which then used both Netscape’s JavaScript and Microsoft’s JScript to create the ECMAScript standard. The following summary outlines the major ECMAScript versions, each marking significant milestones in the development of modern JavaScript.

Below is a summary of the major ECMAScript versions:

JavaScript’s continuous development ensures developers are equipped with powerful tools and features to meet modern programming needs.

ECMAScript 1 (1997): The birth of standardized JavaScript#

The first edition established the foundation of the language, introducing the core syntax and basic features that would shape JavaScript’s evolution.

ECMAScript 2 (1998): Editorial adjustments and clarifications#

This maintenance release primarily featured minor editorial changes to the original specification, refining and clarifying the language’s foundational aspects established in ECMAScript 1.

ECMAScript 3 (1999): Establishing the core language features#

ES3 supported many new things that have become a standard part of the language today.

• Strict equality: The strict equality operator (===) offers a type-safe comparison method. The difference between the equality operator and strict equality operator is that the equality operator (==) performs type coercion, while the strict equality operator (===) checks both the value and the type of the operands.

• Regular expressions: The following two types of regular expressions became available in ES3:

  • Literal expressions: Written between two slashes (/), literal regular expressions allow you to define patterns directly in your code. Flags like global (g), case-insensitive (i), and multiline (m) can be applied.

  • Constructor expressions: These are created using the RegExp constructor, where the first argument is the regular expression pattern, and the second optional argument is the flags.

• Switch statement: The switch statement provides a cleaner alternative to multiple if...else if conditions. It compares a given value against several cases and executes the corresponding code block.

• Try/catch handling: The try/catch statement allows you to handle errors gracefully. If an error occurs in the try block, the code inside the catch block is executed to manage the error.

Note: ES3 was the last major update to the ECMAScript specification for nearly a decade until the release of ES5 in 2009.

ECMAScript 4: (Not released)#

The TC39 is a Royalty-Free Task Group at ECMA International responsible for standardizing ECMAScript. When it came time to develop a specification for ES4, there was significant disagreement within the group. Due to this lack of consensus, ES4 was not fully released as an official standard and remains an unfinished version of ECMAScript.

ECMAScript 5 (2009): Modern JavaScript foundations#

ES5 introduced significant changes to JavaScript, which are still widely used today. It was a major update to the ECMAScript standard, marking the most substantial changes since ES3. ES5 was pivotal in improving code safety and consistency, setting the stage for modern JavaScript frameworks. Some of the new features in ES5 include:

• "use strict": Before ES5, undeclared variables (those that don’t use the var keyword) were allowed. With the "use strict" directive, a reference error is thrown if undeclared variables are used.

• New array methods: ES5 introduced several array methods, making it easier to work with arrays. These methods are listed below:

  • every(): The every() method checks if every element in the array satisfies the condition specified in the callback function.

  • filter(): The filter() method returns a new array containing only the elements that pass the test implemented in the provided function.

  • forEach(): The forEach() method executes the provided function once for each element in the array.

  • indexOf() and lastIndexOf(): The indexOf() method returns the first index at which a given element is found, while the lastIndexOf() method returns the last index of that element in the array.

  • isArray(): The Array.isArray() method checks whether the provided object is an array.

  • map(): The map() method creates a new array by calling a provided function on every element in the original array.

  • reduce() and reduceRight(): Both the reduce() and the reduceRight() methods apply a function to each element in the array to reduce it to a single value. The difference is that reduceRight() starts from the last element and works backward.

  • some(): The some() method checks if at least one element in the array satisfies the condition specified in the callback function.

• JSON support: ES5 introduced native support for working with JavaScript Object Notation (JSON). The JSON.parse() and JSON.stringify() methods allow us to convert objects to strings and vice versa, making it easier to transmit data over networks.

• New date methods: ES5 introduced two new Date methods, Date.now() and new Date().valueOf(), both of which return the current time in milliseconds since January 1, 1970. Date.now() is a static method, while valueOf() is an instance method.

Note: Older versions of Internet Explorer may not support Date.now(), so compatibility might need to be checked.

• Getters and setters: ES5 introduced accessor properties (getters and setters). These functions allow the definition of custom behavior for getting or setting property values.

ECMAScript 2015 (ES6): The ES6 revolution in JavaScript#

Seven years after the completion of ES5, ES6 (later renamed ECMAScript 2015) became the standard in June 2015. This version introduced many new features that enhanced JavaScript’s functionality, making the language more powerful and easier to work with. Let’s dive into some key updates.

• Babel: Babel allows developers to write modern JavaScript and convert it into ES5 code compatible with older browsers. If you’re using frameworks like create-react-app, Babel is typically already configured for you.

• Arrow functions: Using the arrow =>, we can write functions more concisely. The arrow function simplifies function creation.

  • The arrow function eliminated the need for the return keyword and curly braces. For multiple lines, you still use curly braces and a return statement.

  • Arrow functions automatically bind this to the surrounding context, so you no longer need to use .bind() when working within classes.

• Classes: In ES6, classes provide a more structured way of handling object-oriented programming (OOP). Classes simplify inheritance and improve code readability with the extends keyword for classical inheritance.

• Destructing: Destructuring makes it easier to extract values from objects or arrays and assign them to variables, reducing clutter and improving readability.

  • Object destructuring: Before destructuring, you would access each property individually, but destructuring allows you to pull them all at once.

  • Array destructing: The syntax is similar, but instead of curly braces, we use square brackets to destructure arrays.

• let and const: In ES6, let and const introduce block-scoped variables, replacing function-scoped var. This helps avoid issues with variable redeclaration and scope confusion.

  • The let keyword allows reassignment but will throw an error if redeclared within the same scope.

  • The const keyword is for variables that should never be reassigned:

• Promises: Unlike callbacks, promises result from an error at a later point, improving code readability. Using promises makes handling asynchronous logic easier than the nested callback approach.

• Rest and spread operators: The rest and spread operators share the same syntax (...) but serve different purposes.

  • The rest operator collects multiple arguments into an array.

  • The spread operator allows us to expand elements from one array or object into another.

• Template literals: It allows for embedding variables directly inside strings, eliminating the need for concatenation. Template literals also support multi-line strings and expressions, making them more flexible than traditional string concatenation.

Elevate your JavaScript skills with modern ES6 and beyond features by exploring the “JavaScript in Practice: ES6 and Beyond” course on Educative.

ECMAScript 2016 (ES2016): Enhancing math, arrays, and async#

ECMAScript 2016 enhanced the language by simplifying mathematical operations, improving array handling, and making asynchronous programming more intuitive. These new features made JavaScript more powerful and easier to work with, especially for developers with complex asynchronous code.

• Exponentiation operator (**): The exponentiation operator simplifies raising numbers to a power. It is equivalent to using Math.pow() but with a more concise and readable syntax.

• Array.prototype.includes(): This method allows developers to check if an array contains a specific element. It is a more straightforward alternative to indexOf() and returns a boolean (true or false).

• Asynchronous programming: The async and await simplify working with promises, making asynchronous programming much easier and more intuitive.

  • async: This keyword declares an asynchronous function that always returns a Promise. It allows the use of await inside the function.

  • await: The await keyword pauses the execution of an asynchronous function until a Promise is resolved or rejected, effectively making asynchronous code behave more like synchronous code.

  • With async and await, you no longer need to use .then() or .catch() for handling promises, leading to cleaner and more understandable code.

ECMAScript 2017 (ES2017): Streamlining objects, async, and concurrency#

The ECMAScript 2017 updates streamlined object manipulation, improved asynchronous programming, added string manipulation methods and introduced tools for handling concurrency. These features enhanced JavaScript by making it more versatile and efficient, particularly in complex data handling and asynchronous workflows.

• Object.values(): The Object.values() returns an array of a given object’s enumerable property values. This function makes it easier to work with the values of an object without needing to loop through the keys manually.

• Object.entries(): The Object.entries() returns an array of an object’s key-value pairs, where each pair is an array of the form [key, value]. This function simplifies iteration through both keys and values of an object, making it easier to work with objects in certain situations.

• Object.getOwnPropertyDescriptors(): This function allows you to retrieve all property descriptors (such as value, writable, enumerable, configurable) of an object’s properties. This feature makes it easier to inspect and manipulate objects at a deeper level.

• async / await with generators and promises: ECMAScript 2017 extended the async / await syntax by allowing it to work with generators. This allows for asynchronous functions that can pause execution at any point and return control when necessary, significantly simplifying asynchronous code that involves complex flows.

• String.prototype.padStart() and padEnd(): These methods are particularly useful for formatting strings consistently, such as aligning text or adding leading zeros.

  • The padStart() adds padding to the beginning of a string until it reaches a given length.

  • The padEnd() adds padding to the end.

• Concurrency and atomics: ECMAScript 2017 also introduced concurrency and atomics, offering developers a way to handle operations in a multi-threaded environment. These features offer better synchronization, which is important for high-performance JavaScript applications that work across threads or web workers.

ECMAScript 2018 (ES2018): Async iteration, object spread, and regex enhancements#

ECMAScript 2018 brought key updates that improved JavaScript’s handling of asynchronous data, regular expressions, and object manipulation. The addition of the spread operator for objects, the finally method on promises, and the introduction of asynchronous iteration with for await...of were significant steps toward making JavaScript cleaner and more powerful for modern web development.

• Spread operator and rest parameters for object literals:

  • The spread operator (...) was extended to allow copying properties from one object to another. This makes it easier to merge or clone objects with a simple, concise syntax.

  • Similarly, rest parameters (...) can now be used in function arguments for objects, enabling the collection of remaining properties into a new object.

• Asynchronous iteration: It allowed working with asynchronous data sources, such as streams or APIs, using the new for await...of loop. This allows developers to iterate over asynchronous data in a cleaner, more synchronous-like manner without relying on callback functions or promises.

• Promise.prototype.finally: The finally() was added to promises to handle cleanup tasks after a promise is resolved or rejected. This method is executed regardless of whether the promise was fulfilled or rejected, making it easier to run the final code (like closing a connection, clearing resources, etc.) without needing to repeat the same logic in both then() and catch() blocks.

• Enhancements to RegExp: ECMAScript 2018 introduced new features and improvements to regular expressions:

  • RegExp named capture groups: The named capture groups in regular expressions allowed you to reference matched groups by name rather than index. This improves the readability of regular expressions.

  • RegExp lookbehind assertions: Lookbehind assertions allow you to match patterns only if preceded by another specified pattern, making complex string-matching tasks more efficient and easier to implement.

  • RegExp Unicode property escapes: This allows the matching of characters based on Unicode properties like general category, script, or other character attributes, greatly improving regex’s internationalization support.

ECMAScript 2019 (ES2019): Array flattening, stable sorting, and object enhancements#

ECMAScript 2019 introduced powerful updates, including the flat() and flatMap() methods for handling nested arrays, stable sorting for predictable results, Object.fromEntries() for creating objects from key-value pairs, and optional catch binding for cleaner error handling. These enhancements streamline JavaScript development for more efficient and modern code.

• Array.prototype.flat(): The flat() method was introduced to arrays to flatten nested arrays up to a specified depth. This allows you to easily reduce the nesting of array elements by a certain level. By default, flat() flattens the array to a depth of 1, but you can pass an argument to specify the desired depth.

• Array.prototype.flatMap(): The flatMap() is a combination of map() and flat(). It first maps each element using a function, then flattens the result by one level. This method is especially useful when working with arrays that require mapping and flattening in one step.

• Stable sorting: One of the major changes in Array.prototype.sort() is that it is now guaranteed to be stable. If two elements have the same sorting key, their relative order will remain unchanged after sorting.

• Object.fromEntries(): The Object.fromEntries() is a new method that transforms a list of key-value pairs (such as from a Map or an array of arrays) into an object. This is the inverse of Object.entries(), making it easier to convert data back and forth between key-value pairs and objects.

• Optional catch binding: Catch binding (i.e., the variable that catches the error) is now optional. You can omit the error object from the catch block if you don’t need the error object.

ECMAScript 2020 (ES2020): BigInt, nullish coalescing, globalThis, and optional chaining#

ECMAScript 2020 introduced the ability to work with large numbers through BigInt, provide safer default values with the nullish coalescing operator, access global objects consistently with globalThis, and simplify nested property access with optional chaining. These improvements make writing more robust, maintainable, and readable code easier.

• BigInt type: The BigInt is a new primitive type that allows the representation of integers beyond the Number.MAX_SAFE_INTEGER limit, which is $2^{53} - 1$. You can create BigInt values either using the BigInt constructor or by appending an n to the number literal.

Note: Math functions (like Math.pow()) are incompatible with BigInt. Instead, use the ** operator for exponentiation.

• Nullish coalescing operator: The nullish coalescing operator is a new way to provide a default value when an expression evaluates to null or undefined. This differs from the logical OR (||) operator, which returns a default value for any falsy value (like false, 0, NaN, or an empty string). The ?? operator only evaluates the right-hand side if the left-hand side is null or undefined.

• globalThis: The globalThis object is a new global object that provides a consistent way to access the global context across all environments (like browsers, Node.js, etc.). Before ES2020, the global object could be accessed differently depending on the environment (like a window in the browser or global in Node.js), but globalThis standardizes this across environments.

• Optional chaining: The optional chaining operator (?.) makes it easier to access deeply nested properties in an object without checking if each property exists. If any part of the chain is null or undefined, the expression will return undefined instead of throwing an error.

ECMAScript 2021 (ES2021): Enhanced strings, promises, and memory management#

ECMAScript 2021 brings various useful features to JavaScript, improving string manipulation, handling promises, and adding powerful memory management tools like WeakRef and FinalizationRegistry. The new logical assignment operators and numeric separators make the language more concise and readable, while the precision improvements in Array.sort help ensure more consistent behavior.

• String.prototype.replaceAll(): The new replaceAll() method allows replacing all occurrences of a substring in a string with a specified value. This method is similar to replace(), but unlike replace(), which only replaces the first occurrence by default, replaceAll() handles all occurrences.

• Promise.any(): The Promise.any() method accepts an iterable of promises and returns a promise that resolves as soon as any promises in the iterable resolve. It short-circuits and returns the value of the first resolved promise, ignoring any rejected ones. If all promises are rejected, it returns an AggregateError.

• AggregateError: This is a new error type for reporting multiple errors, particularly useful in conjunction with Promise.any().

• Logical assignment operators: The logical assignment operators combine logical operators and assignments into one syntax. These operators work as follows:

  • ??=: Assigns a value if the left-hand side is null or undefined.

  • &&=: Assigns a value if the left-hand side is truthy.

  • ||=: Assigns a value if the left-hand side is falsy.

• WeakRef and FinalizationRegistry:

  • WeakRef allows referring to a target object without preventing it from being garbage collected.

  • FinalizationRegistry allows managing cleanup operations when an object is garbage collected.

• Numeric separators for literals: The introduction of numeric separators allows for more readable numeric literals by using an underscore (_) to separate groups of digits (for example, in large numbers).

• Improved precision: The Array.prototype.sort() was updated in ES2021 to ensure better-sorting precision, reducing the number of edge cases where the sorting order could be inconsistent.

ECMAScript 2022 (ES2022): Top-level await, enhanced classes, and improved language tools#

ECMAScript 2022 introduced the top-level await and static blocks, which enhance code flexibility. New private fields and methods strengthen encapsulation in class-based structures. The cause property and at() method further improve debugging and ease of access to data, respectively.

• Top-level await: Top-level await allows the await keyword to be used at the top level of ES modules. This eliminates the need for wrapping asynchronous code inside an async function.

• New class elements: ES2022 introduces several new class elements to improve encapsulation in object-oriented programming:

  • Public and private instance fields: You can now define public or private instance fields directly inside classes.

  • Public and private static fields: Similarly, static fields can be public or private.

  • Private instance methods and accessors: You can define private methods and getters/setters for instance members.

  • Private static methods and accessors: Static methods and accessors can now be private.

• Static blocks: The static blocks allow initialization code to be run inside a class during its evaluation phase.

• #x: The #x syntax is used to check for the presence of private fields in objects.

• /d: The new /d flag in regular expressions provides matched substrings’ start and end indexes.

• cause: The cause property on error objects allows you to record a causation chain when throwing errors.

• at(): The at() method allows for relative indexing in Strings, Arrays, and TypedArrays.

• Object.hasOwn(): The Object.hasOwn() is a new method that provides a more convenient way to check if an object has a property, as an alternative to using Object.prototype.hasOwnProperty().

ECMAScript 2023 (ES2023): Immutable array methods, shebangs, and symbol Keys#

ECMAScript 2023 enhances JavaScript with non-mutative array methods like toSorted(), toReversed(), and toSpliced() for easier immutability, along with findLast() and findLastIndex() for streamlined element retrieval. Shebang support simplifies file execution in Node.js, and Symbols as keys in weak collections improve memory-sensitive data handling.

• New methods: ES2023 introduces several new Array and TypedArray methods to enhance the manipulation and usability of arrays and typed arrays:

  • toSorted() returns a sorted copy of an array without mutating the original array.

  • toReversed() returns a reversed copy of an array without modifying the original array.

  • toSpliced() returns a copy of an array with the specified modifications (like splice()) without mutating the original array.

  • findLast() returns the last element in the array that satisfies the provided testing function.

  • findLastIndex() returns the index of the last element in the array that satisfies the provided testing function.

• #!: ECMAScript 2023 adds support for shebang (#!) comments at the beginning of files. These comments are commonly used in executable files to specify the path to the interpreter.

• Symbols as keys in weak collections: ES2023 supports using most Symbols as keys in weak collections (WeakMap and WeakSet). This feature improves the flexibility of weak collections and enables symbols to be used as lightweight, non-enumerable property keys.

ECMAScript 2024 (ES2024): Grouping, promises, and regex enhancements#

ECMAScript 2024 enhances JavaScript with features like Object.groupBy and Map.groupBy for data grouping, Promise.withResolvers for simplified promise handling, new set operations for robust functionality, and the /v regex flag for improved Unicode handling.

• Object.groupBy and Map.groupBy: These static methods allow grouping iterables based on the return value of a provided callback function. The grouped items are returned in an object (Object.groupBy) or a Map (Map.groupBy).

• Promise.withResolvers: This feature provides a clean and simple way to create a promise and directly access its resolve and reject functions.

• Set operations: New methods for Set objects enhance usability and bring them closer to typical set operations in other languages. Examples include union, intersection, difference, and symmetric difference.

• /v: The /v flag is an improved version of the /u (Unicode) flag for regular expressions, adding better Unicode support while addressing compatibility issues.

ES.Next: Next-generation ECMAScript features#

ES.Next is a dynamic term referring to the upcoming version of ECMAScript at the time of discussion. It includes features that have reached Stage 4 (finished proposalshttps://github.com/tc39/proposals/blob/main/finished-proposals.md) and are part of the latest draft specification. Although these features are not yet part of a ratified specification, they are effectively considered standard due to the “living spec” model followed by TC39.

Upcoming features like Promise.try, JSON modules, and new Set methods demonstrate JavaScript’s commitment to aligning with modern development needs.

What’s next for JavaScript?#

JavaScript continues to evolve with yearly updates to its standardization, ensuring it remains relevant and powerful for modern web development. With the release of ES2024, the language has introduced features that simplify coding, improve performance, and enhance developer experience. Looking ahead, ES.Next promises even more exciting additions, like Promise.try, JSON Modules, and advanced Set methods, showcasing JavaScript’s adaptability to the ever-changing software development landscape.

Staying current with JavaScript’s evolution isn’t just about learning new syntax—it’s about adopting better ways to build faster, more efficient applications. As new features continue to shape modern development, keeping up with JavaScript’s future ensures your code remains relevant, efficient, and forward-thinking.

Have you enjoyed a journey through JavaScript’s rich history? As we explore its evolution from its humble beginnings to the transformative updates in ES6, ES7, and ES8, now’s the perfect time to dive deeper into modern JavaScript.

Discover how these groundbreaking features redefine coding with our “Rediscovering JavaScript: ES6, ES7, & ES8” course. This comprehensive course guides you through the enhancements that empower developers to write cleaner, more efficient code, bridging the gap between JavaScript’s past innovations and today’s cutting-edge practices.

Happy learning!

Explore advanced JavaScript tips and best practices#

• 15 JavaScript Tips: best practices to simplify your code

• JavaScript Array Methods: how to use map and reduce

• 6 JavaScript data structures you must know

• JavaScript Loops Tutorial: for loop, while loop, and more

• What is jQuery? Learn the most popular JavaScript library