ECMAScript (ES11 + ES12 + ES13) New Features Quiz

While dynamic import is supported in most modern browsers, it is not supported in all of them. Additionally, dynamic import is used for importing JavaScript modules, and it is an asynchronous operation that does not block the main thread. Finally, dynamic import cannot be used to import CSS or HTML files, only JavaScript modules.

The String.prototype.replaceAll() method is a new feature introduced in ES2021 that allows you to replace all occurrences of a substring with a new substring.

// replace all occurrences of a substring with another substring
const originalString = 'Hello World, Hello Universe';
const newString = originalString.replaceAll('Hello', 'Hi');
console.log(newString); // output: "Hi World, Hi Universe"

// replace all occurrences of a regular expression with another string
const email = 'example.email@example.com';
const maskedEmail = email.replaceAll(/[^@]/g, '*');
console.log(maskedEmail); // output: "******.****@********.***"

In the first example, we define a string called originalString that contains two occurrences of the substring 'Hello'. We then use the replaceAll() method to replace all occurrences of 'Hello' with the substring 'Hi'. The resulting string, 'Hi World, Hi Universe', is assigned to the newString variable and logged to the console.

In the second example, we define an email address string called email. We then use the replaceAll() method to replace all characters in the email address that are not the '@' symbol with an asterisk ('*'). The resulting string, which masks all characters in the email address except the username and the domain name, is assigned to the maskedEmail variable and logged to the console.

The String.prototype.matchAll() method returns an iterator of all matched substrings in a string against a regular expression, including capturing groups. This allows you to iterate over all matched substrings and access their capture groups, providing a more powerful and flexible way to work with regular expressions in JavaScript.

const string = 'The quick brown fox jumps over the lazy dog';

// get an iterator of all matches of a regular expression
const regex = /[a-z]{4}/g;
const matches = string.matchAll(regex);

// iterate over the matches and log their indices and values
for (const match of matches) {
  console.log(`Match: ${match[0]}, Index: ${match.index}`);
}

In this example, we define a string called string that contains a sentence. We then define a regular expression called regex that matches any sequence of four lowercase letters. We use the matchAll() method on the string object to get an iterator of all matches of the regex pattern in the string.

We can then iterate over the matches using a for...of loop and log the value of each match and its index in the original string. Each match is returned as an array with the first element being the actual match and the second element being the index of the match in the string.

The output of this example would be:

Match: quic, Index: 4
Match: brow, Index: 10
Match: jump, Index: 20
Match: over, Index: 26
Match: lazy, Index: 35

The WeakRef object was introduced in ES12.

let obj = { name: 'John' };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()); // output: { name: 'John' }

obj = null;

console.log(weakRef.deref()); // output: undefined

In this example, we create an object called obj with a single property name set to 'John'. We then create a WeakRef instance called weakRef that references the obj object.

We can use the deref() method of the weakRef object to retrieve the object it references. In this case, calling weakRef.deref() returns the obj object itself, which is then logged to the console.

We then set the obj variable to null, effectively removing the reference to the object. When we call weakRef.deref() again, we get undefined as the output, indicating that the object has been garbage collected and is no longer available.

This demonstrates how WeakRef can be used to create a weak reference to an object, allowing it to be garbage collected when there are no strong references to it remaining in the code.

If all promises in the array passed to Promise.any() are rejected, the method returns a new promise that rejects with an array of reasons from all the rejected promises. This is a different behavior from Promise.all() which will reject with the reason of the first rejected promise.

The FinalizationRegistry feature was introduced in ES12 to allow you to create a WeakRef to an object that does not prevent it from being garbage collected.

The Promise.allSettled() method introduced in ES11 is used to return a new promise that resolves when all promises in an array have settled (either resolved or rejected), regardless of their outcome. The method returns an array of objects representing the status and value or reason of each promise in the original array.

const promise1 = Promise.resolve(1);
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 2));
const promise3 = new Promise((resolve, reject) => setTimeout(reject, 500, 'error'));

Promise.allSettled([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.log(error));

In this example, we define three promises: promise1, which resolves to the value 1; promise2, which resolves to the value 2 after a delay of 1 second; and promise3, which rejects with an error message after a delay of 500 milliseconds.

We then use the Promise.allSettled() method to wait for all promises to settle, regardless of whether they resolve or reject. The method takes an array of promises as its argument and returns a new promise that resolves to an array of objects, one for each promise in the input array. Each object in the resulting array contains a status property, which is either 'fulfilled' or 'rejected', and a value or reason property that contains the resolved value or rejection reason of the corresponding promise, respectively.

In our example, the resulting array of objects will contain three elements, one for each promise in the input array. The first object will have a status of 'fulfilled' and a value of 1. The second object will also have a status of 'fulfilled' and a value of 2. The third object will have a status of 'rejected' and a reason of 'error'.

Finally, we log the resulting array of objects to the console using the then() method of the promise returned by Promise.allSettled(). If any of the promises in the input array were rejected, we can handle the error using the catch() method of the same promise.

The # symbol is used to define private class variables in ES11. The symbol is placed before the variable name in the class definition to indicate that the variable is private and can only be accessed from within the class.

class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }

  setName(name) {
    this.#name = name;
  }
}

const john = new Person('John');
console.log(john.getName()); // output: "John"

john.#name = 'Jane'; // throws a SyntaxError

In this example, we define a Person class with a private instance variable called #name. The # symbol before the variable name indicates that it is private and cannot be accessed outside the class.

We then define a constructor that sets the value of the private variable #name when a new Person object is created. We also define two methods: getName() and setName(), which get and set the value of the private variable #name, respectively.

We then create a new Person object called john with the name 'John'. We can access the private variable #name through the getName() method, which returns the value 'John'.

Finally, we attempt to modify the private variable #name directly by assigning a new value to it using john.#name = 'Jane'. However, this throws a SyntaxError, as private variables cannot be accessed outside the class.

The default behavior of the Array.prototype.sort() method is to sort the array in ascending order based on the Unicode values of its elements. If the elements are strings, they are sorted alphabetically; if they are numbers, they are sorted numerically; and if they are objects, they are sorted based on their string representations. However, you can pass a comparison function to sort() to customize the sorting behavior based on your own criteria.

The syntax for the at() method in ES2022 is array.at(index) for Arrays and TypedArrays, and string.at(index) for Strings. This allows you to retrieve the element at the specified index in the array, typed array, or string.