ECMAScript (ES7 + ES8 + ES9 + ES10) New Features Quiz

The flat() method for arrays was introduced in ES8, and its variations, flatMap() and flatten(), were introduced in ES9 and ES10, respectively. This method allows you to flatten a nested array by concatenating all subarrays into a single array.

ES9 introduced the SharedArrayBuffer object, which provides a low-level mechanism for sharing data between JavaScript threads and improving support for parallelism.

ES9 introduced the String.prototype.padStart() and String.prototype.padEnd() methods, which provide a more concise way to pad strings with whitespace by specifying the desired length and the character to use for padding.

ES9 introduced asynchronous iteration, which is a new way of iterating over asynchronous data sources using the for await...of loop.

// asynchronous iterable
const iterable = {
  async *[Symbol.asyncIterator]() {
    yield Promise.resolve(1);
    yield Promise.resolve(2);
    yield Promise.resolve(3);
  }
};

// asynchronous loop
async function asyncLoop() {
  for await (let value of iterable) {
    console.log(value);
  }
}

// call the asynchronous loop function
asyncLoop();

In this example, we define an asynchronous iterable object with a Symbol.asyncIterator method that returns an async generator function. The generator function yields three promises that resolve to values of 1, 2, and 3.

We then define an asynchronous loop function called asyncLoop that uses the for await...of loop to iterate through the asynchronous iterable object. Each value yielded by the iterable is assigned to the value variable, and this value is logged to the console using console.log(value).

Finally, we call the asyncLoop function to execute the asynchronous loop and print the values 1, 2, and 3 to the console.

ES7 introduced the includes() method for arrays, which returns true if an element is found in the array, and false otherwise. This is similar to the indexOf() method, but is more concise and easier to read.

ES9 introduced the String.prototype.trimStart() and String.prototype.trimEnd() methods, which allow you to remove whitespace characters from the beginning and end of a string, respectively. These methods support Unicode characters, making them more robust than the existing String.prototype.trim() method.

ES8 introduced object property descriptors, which allow for more flexible object property definitions by specifying configurable, enumerable, and writable attributes for each property. This feature also provides a way to define getter and setter functions for computed properties.

// define an object
const person = {
  name: 'John',
  age: 30
};

// define a property descriptor for the "name" property
const nameDescriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(nameDescriptor);

// modify the "age" property to be read-only
Object.defineProperty(person, 'age', { writable: false });
person.age = 35; // throws a TypeError

console.log(person.age); // output: 30

In this example, we define an object called person with two properties: name and age. We then use the Object.getOwnPropertyDescriptor() method to retrieve the property descriptor for the name property. The resulting descriptor object contains information about the name property, including whether it is writable, enumerable, and configurable.

Next, we use the Object.defineProperty() method to modify the age property to be read-only. This is done by passing an options object with writable: false as the third argument to the method. This means that any attempt to modify the age property using the assignment operator (=) will result in a TypeError being thrown.

Finally, we attempt to assign a new value to the age property and log its value to the console. Since the age property is read-only, the assignment throws a TypeError. The value of the age property remains unchanged at 30.

ES9 introduced the Object.fromEntries() method, which provides a more convenient way to convert arrays and objects to maps by taking an array of key-value pairs and returning a new map object.

ES7 introduced the BigInt data type, which allows you to represent integers larger than 2^53 - 1

The ** operator is the exponentiation operator introduced in ES7. It raises the left operand to the power of the right operand.

Exponentiation is a mathematical operation that involves raising a base number to a power. In other words, it is a shorthand way of writing repeated multiplication of a number by itself. The base number is multiplied by itself as many times as indicated by the exponent or power. For example, 2 raised to the power of 3 (written as 2^3) means multiplying 2 by itself 3 times (2 * 2 * 2), resulting in 8.

// using the ** operator
let x = 2;
let y = 3;
let result = x ** y; // result = 8 (2 raised to the power of 3)

// using the Math.pow() method
let a = 4;
let b = 2;
let output = Math.pow(a, b); // output = 16 (4 raised to the power of 2)

ES10 introduced nullish coalescing, which is a new way of handling nullish values in JavaScript using the ?? operator.

const x = null;
const y = x ?? 'default value';
console.log(y); // output: "default value"

ES8 introduced the arrow function syntax, which allows for more concise function syntax by removing the need for the function keyword and using a shorter syntax for one-line functions.

ES10 introduced optional chaining, which allows for the chaining of optional properties and methods without throwing a TypeError if a property or method is undefined or null.

const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: 12345
  }
};

// accessing a property with optional chaining
const cityName = person.address?.city;
console.log(cityName); // output: "New York"

// accessing a non-existent property with optional chaining
const stateName = person.address?.state;
console.log(stateName); // output: undefined

In this example, we define an object called person that has three properties: name, age, and address. The address property is itself an object with two properties: city and zip.

We then use the optional chaining operator ?. to access the city property of the address object. Since the address property exists on the person object, the expression person.address?.city evaluates to 'New York'. The resulting value is then assigned to the cityName variable, which is logged to the console.

In the second part of the example, we attempt to access the non-existent state property of the address object using optional chaining. Since the state property does not exist, the expression person.address?.state evaluates to undefined. The resulting value is then assigned to the stateName variable, which is also logged to the console.

ES8 introduced async/await, which is a new way of writing asynchronous code in JavaScript that makes use of promises and the async and await keywords.

ES10 introduced the flat() method for arrays, which provides a more convenient way to merge arrays by concatenating subarrays into a single array. The flat() method also supports an optional depth parameter that specifies how many levels of nested arrays to flatten.