Over the years, different versions have been released, each bringing new features and improvements that enhance the language's power and usability.
In this post, we'll dive deeper into ECMAScript 6 (also known as ES6 or ECMAScript 2015) and ECMAScript 2020 (ES11 / ES2020) to better understand their offerings.
ECMAScript 6 (ES6)
Arrow Functions: This feature brought a more concise way of defining functions, especially anonymous ones. They also lexically bind the
ECMAScript 2020 (ES2020)
Optional Chaining: This operator (?.) allows for safer access to nested object properties without checking the existence of each layer. It short-circuits and returns undefined if it hits a nullish value (null or undefined).
Nullish Coalescing: The nullish coalescing operator (??) provides a way to set default values when dealing with nullish values, unlike the logical OR operator (||) which considers all falsy values.
BigInt: The BigInt data type was introduced to represent integers larger than the Number type can handle, which is useful when dealing with large integers.
Promise.allSettled: While ES6 introduced Promises, ES2020 took it a step further with Promise.allSettled. This method waits for all promises to settle, regardless of whether they fulfill or reject, providing a comprehensive status.
Dynamic Import: This feature enables modules to be loaded dynamically at runtime, offering opportunities for code-splitting and lazy-loading, improving application performance.
Both ES6 and ES2020 are well-supported in modern browsers, although the degree of support varies. As of writing, Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari support most of the features of ES2020 and ES6. However, when targeting a broad audience, it's wise to use tools like Babel to transpile your code to ES5 to ensure backward compatibility with older browsers.
ECMAScript 5 (ES5): ES5 is the oldest standard that is still widely used today. Released in 2009, it is supported by virtually all browsers, making it a safe choice for broad compatibility. ES5 introduced key features such as
accessor properties, and native
arrow functions. Despite being released in 2015, some older browsers do not fully support it. Developers often use tools like Babel to transpile ES6 code into ES5 to ensure backward compatibility.
ECMAScript 2016 (ES7) and ECMAScript 2017 (ES8): These versions are commonly used and brought in useful features like
async/await (ES8), and
Array.prototype.includes (ES7). However, like ES6, they may require transpiling for older browser support.
ECMAScript 2019 (ES10) and ECMAScript 2020 (ES11): These versions continue to be more widely adopted as more developers leverage their advanced features, and browser support continues to improve. Notable additions in these versions include
flatMap array methods,
Optional Chaining, and
In general, the choice of ECMAScript version often comes down to balancing the benefits of new features with the need for broad browser compatibility.
Developers typically use the most recent version they can that still ensures compatibility with their users' browsers.
As such, it's common to see developers working in ES6+ environments but transpiling down to ES5 for production builds.
Did you find this article valuable?
Support 0xTristan by becoming a sponsor. Any amount is appreciated!