ECMAScript 2018 Overview
Starting from 2016, ECMAScript versions have been named after the year of their release, moving away from the numerical naming convention used earlier like ES5 or ES6. The 2018 edition, known as ES2018, brought several new capabilities to JavaScript.
#### Key Features Introduced in ECMAScript 2018:
- **Asynchronous Iteration**
- **Promise.finally()**
- **Object Rest/Spread Properties**
- **New Regular Expression Features**
- **JavaScript Shared Memory**
Feature Details and Examples
**1. Asynchronous Iteration**
ES2018 introduces asynchronous iterators and iterables, allowing the `await` keyword to be used within `for...of` loops.
javascript
async function asyncIterableExample() {
const asyncIterable = {
async *[Symbol.asyncIterator]() {
yield* [1, 2, 3];
}
};
for await (let value of asyncIterable) {
console.log(value); // Outputs 1, 2, 3
}
}
asyncIterableExample();
Browser support as of January 2020:
- Chrome 63, Edge 79, Firefox 57, Safari 11, Opera 50
**2. Promise.finally()**
This addition allows handlers that are called when Promises are settled, regardless of the outcome.
```javascript
let myPromise = new Promise((resolve, reject) => {
// Simulate async operation
setTimeout(resolve, 100, 'Success');
});
myPromise
.then(value => console.log(value))
.catch(error => console.error(error))
.finally(() => console.log('Operation completed.'));
```
Browser support as of November 2018:
- Chrome 63, Edge 18, Firefox 58, Safari 11.1, Opera 50
**3. Object Rest/Spread Properties**
ES2018 enhanced object literals with rest properties for more flexible destructuring.
```javascript
const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
```
Browser support as of January 2020:
- Chrome 60, Edge 79, Firefox 55, Safari 11.1, Opera 47
**4. New Regular Expression Features**
Several enhancements were made to RegExp:
- Unicode Property Escapes
- Lookbehind Assertions
- Named Capture Groups
- s (dotAll) Flag
Example of using Unicode Property Escapes and Lookbehind Assertions:
```javascript
const regex = /(?<=\$)\d+(?=\sUSD)/;
const result = "Cost: $30 USD".match(regex);
console.log(result); // Outputs ['30']
```
Browser support as of June 2020:
- Chrome 64, Edge 79, Firefox 78, Safari 12, Opera 51
**5. JavaScript Shared Memory and Threads**
JavaScript now allows threads to run code in parallel using Web Workers and to share data via SharedArrayBuffer.
```javascript
// Main thread
const sharedBuffer = new SharedArrayBuffer(1024);
const worker = new Worker('worker.js');
worker.postMessage(sharedBuffer);
// Inside worker.js
self.onmessage = function(event) {
const sharedBuffer = event.data;
// Work with the shared buffer
};
```
Shared memory enables different parts of a program to simultaneously access and modify data, potentially improving performance for complex computations.
These enhancements make JavaScript more powerful and efficient, particularly for developers working with asynchronous operations, complex data handling, and multi-threading.
