Introduction

As the JavaScript ecosystem continues to evolve, new features are constantly being introduced to make the language more powerful, flexible, and efficient. The ECMAScript (ES) 2021 specification is no exception, bringing a set of exciting additions that will significantly impact the way developers work with JavaScript. In this blog post, we will take a deep dive into the most anticipated features of ES2021 and discuss how to use them in your HTML projects.

1. Top-level Await

One of the most significant additions to ES2021 is top-level `await`. Prior to this, `await` could only be used within an `async` function. Top-level `await` allows us to use `await` directly in a module, making it easier to write asynchronous code and improving readability. Here’s a simple example:

“`javascript
import fetch from ‘node-fetch’;

async function getData() {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
console.log(data);
}

getData();
“`

With top-level `await`, the above code can be rewritten as:

“`javascript
import fetch from ‘node-fetch’;

const getData = async () => {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
console.log(data);
}

getData();
“`

2. Logical Assignment Operators

ES2021 introduces logical assignment operators, allowing for more concise and readable code. The `&&=`, `||=`, and `??=` operators perform logical operations and assign the resulting value to the left-hand side variable. Here’s a quick example:

“`javascript
let a = 0;
let b = null;

a ||= 1; // a now equals 1
b ??= ‘default value’; // b now equals ‘default value’ (since b is null)
“`

3. String Methods: `startsWith()`, `endsWith()`, and `at()`

ES2021 adds three new string methods: `startsWith()`, `endsWith()`, and `at()`. These methods allow for greater flexibility when working with strings.

– `startsWith(searchString, position)` checks if the string starts with the provided search string and returns a boolean.
– `endsWith(searchString, position)` checks if the string ends with the provided search string and returns a boolean.
– `at(position)` returns the character at the specified index or undefined if the index is out of bounds.

Here’s a simple example:

“`javascript
const myString = ‘Hello, World!’;

console.log(myString.startsWith(‘Hello’)); // true
console.log(myString.endsWith(‘!’)); // true
console.log(myString.at(7)); // comma (‘,’)
“`

4. Array Methods: `flat()` and `flatMap()`

ES2021 extends the Array methods with `flat()` and `flatMap()`. The `flat()` method flattens nested arrays, while `flatMap()` applies a mapping function to each element in the array and then flattens the results.

Here’s an example using `flat()`:

“`javascript
const nestedArray = [1, 2, [3, 4, [5, 6], 7]];
const flatArray = nestedArray.flat(2); // [1, 2, 3, 4, [