Features of ECMAScript 2022 (ES13)

Exploring the Exciting Features of ECMAScript 2022 (ES13)

ECMAScript, the standard upon which JavaScript is based, continues to evolve, bringing new and powerful features to the language. In the latest release, ECMAScript 2022 (ES13), developers are treated to a range of enhancements that promise to streamline code, improve readability, and provide more flexibility. Let’s dive into some of the exciting features that ES13 introduces:

1. Class Field Declarations

In ES13, class field declarations receive a makeover, allowing developers to initialize property default values directly within the class. This eliminates the need for a constructor solely for property initialization.

// NEW ECMAScript 2022
class User1 {
  firstName = 'Core';
  middleName = 'Knowledge';
  lastName = 'Sharing';
}
const user1 = new User1();
console.log(user1.firstName); // Core
console.log(user1.lastName); // Sharing

2. Private Methods and Fields

ES13 introduces private fields and members to a class by prefixing them with the hashtag (#) symbol. Attempting to access these private members outside the class results in an error, enhancing encapsulation.

class User {
  #fn = "John";
  ln = "Doe";

  showFn() {
    console.log(this.#fn);
  }
}

const userInstance = new User();
console.log(userInstance.#fn); // SyntaxError: Private field '#givenName' must be declared in an enclosing class
console.log(userInstance.ln); // Doe
userInstance.showFn(); // John

3. Await Operator at the Top Level

ES13 allows the use of await without the async keyword in a method, providing a cleaner syntax for asynchronous operations.

// NEW ECMAScript 2022
function asyncFunction(timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, timeout);
  });
}
// Waits for timeout - no error thrown
await asyncFunction(3000);

// Before ES2022
(async () => {
  const data = await fetchData();
  console.log(data);
})();

// After ES2022
const data = await fetchData();
console.log(data);

4. Static class fields and methods

This feature allows you to declare static fields and methods in classes. Static fields and methods are shared by all instances of the class.

class Person {
  static nextPersonId = 1;

  constructor(name) {
    this.id = Person.nextPersonId++;
    this.name = name;
  }

  static getNextPersonId() {
    return Person.nextPersonId;
  }
}

const person1 = new Person('Alice');
const person2 = new Person('Bob');

console.log(person1.id); // 1
console.log(person2.id); // 2

console.log(Person.getNextPersonId()); // 3

5. Class static Block

Static initialization blocks are a unique feature in JavaScript classes that enable the execution of statements during class initialization. Unlike static methods, these blocks allow more complex initialization logic and provide access to private state within the class.

Syntax:

To declare a static initialization block, use the static {} syntax within the class body. Multiple blocks can be included, and they are evaluated in the order they are declared.

class MyClass {
  static {
    // Initialization logic here
  }
}

Why Use Static Initialization Blocks?

Before the introduction of static initialization blocks, developers might resort to calling static methods after the class declaration for complex initialization. However, this approach exposes implementation details to users. With static initialization blocks, you can keep the initialization logic encapsulated within the class, maintaining a cleaner and more modular codebase.

Scope and Variables:

Variables declared inside a static block are local to that block. The this keyword inside a static block refers to the constructor object of the class. The block's scope is nested within the lexical scope of the class body, providing access to private names without causing syntax errors.

class A {
  static field = "Inner y";
  static {
    var y = this.field;
  }
}

Examples:

Let’s explore some practical examples to illustrate the power of static initialization blocks.

1. Multiple Blocks:

class MyClass {
  static field1 = console.log("static field1");
  static {
    console.log("static block1");
  }
  static field2 = console.log("static field2");
  static {
    console.log("static block2");
  }
}

Output:

'static field1'
'static block1'
'static field2'
'static block2'

1. Using this and super:

class A {
  static field = "static field";
  static {
    console.log(this.field);
  }
}

Output:

'static field'

1. Access to Private Properties:

let getDPrivateField;
class D {
  #privateField;
  constructor(v) {
    this.#privateField = v;
  }
  static {
    getDPrivateField = (d) => d.#privateField;
  }
}
console.log(getDPrivateField(new D("private"))); // 'private'

Static initialization blocks open up new possibilities for organizing and executing initialization logic within JavaScript classes. By understanding their syntax and applications, you can enhance the modularity and maintainability of your code. Experiment with these blocks in your projects, and unlock the full potential of JavaScript classes!

6. Exist Checks for Private Fields

With ES13, developers can check the existence of private fields within a class using the in operator.

// NEW ECMAScript 2022
class Car {
  #color;
  hasColor() {
    return #color in this;
  }
}
const car = new Car();
console.log(car.hasColor()); // true;

7. at() Method for Indexing

ES13 introduces the at() method for arrays and strings, providing a convenient way to access elements by index.

// NEW ECMAScript 2022
const arr = ['a', 'b', 'c', 'd'];
console.log(arr.at(-1)); // d

8. Object.hasOwn() Method

ES13 introduces the Object.hasOwn() method, providing a more reliable way to check if an object has a given property.

// NEW ECMAScript 2022
const obj = Object.create(null);
obj.color = 'green';
console.log(Object.hasOwn(obj, 'color')); // true

9. Error Cause

Error objects in ES13 now feature a cause property, allowing developers to specify the original error that led to the current error. This aids in diagnosing unexpected behavior.

// NEW ECMAScript 2022
function userAction() {
  try {
    apiCallThatCanThrow();
  } catch (err) {
    throw new Error('New error message', { cause: err });
  }
}

10. Array Find from Last

ES13 introduces two new methods, findLast() and findLastIndex(), providing efficient ways to find the last occurrence of an element in an array.

// NEW ECMAScript 2022
const nums = [7, 14, 3, 8, 10, 9];
const lastEven = nums.findLast((num) => num % 2 === 0);
const lastEvenIndex = nums.findLastIndex((num) => num % 2 === 0);
console.log(lastEven); // 10
console.log(lastEvenIndex); // 4

In conclusion, ECMAScript 2022 brings a plethora of enhancements to JavaScript, empowering developers to write cleaner, more efficient code. These features not only simplify syntax but also bolster the language’s capabilities. As you explore the latest in ES13, consider incorporating these features into your projects for a more enjoyable and productive development experience. Happy coding!