ESNext Examples

Accessible Object hasOwnProperty.js

// @ts-nocheck
// before
const obj = { a: true };
Object.prototype.hasOwnProperty.call(obj, 'a');

// after
const obj = { a: true };
Object.hasOwn(obj, 'a');

At Method on Iterables.js

// @ts-nocheck
// before
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const last = numbers[numbers.length - 1]; // 9

// after
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const last = numbers.at(-1); // 9

Brand Checks for Private Fields.js

// before
class A {
  #brand;
  // test if obj is of type A since we have access to the private property
  static isA(obj) {
    try {
      obj.#brand;
      return true;
    } catch {
      return false;
    }
  }
}

// after
class B {
  #brand;
  static isB(obj) {
    return #brand in obj;
  }
}

Error Cause.js

// before
try {
  doSomethingThatThrowsAnError();
} catch (err) {
  // how do we make sure the error we're about to throw includes this?
  const myError = new Error('Something went wrong');
  myError.cause = err;
  throw myError;
}

// after
try {
  doSomethingThatThrowsAnError();
} catch (err) {
  throw new Error('Something went wrong', { cause: err });
}

Private Methods and Accessors.js

// before
class A {
  constructor() {
    this._somePrivateProp = 'some private value'; // this is private by convention, not truly private
  }

  set privateProp(value) {
    // consider that some side-effects may happen here
    this._somePrivateProp = value;
  }

  get privateProp() {
    return this._somePrivateProp;
  }

  _doSomethingThatShouldBePrivate() {
    // this method is, like above, only private by convention
  }
}

// after
class B {
  #somePrivateProp = 'some private value';

  set #privateProp(value) {
    // this setter is private
    this.#somePrivateProp = value;
  }

  get privateProp() {
    // this getter is public
    return this.#somePrivateProp;
  }

  #doSomethingThatShouldBePrivate() {
    // this method is in fact private
  }
}

Public and Private Instance Fields.js

// before
class A {
  constructor() {
    this.somePublicProp = 'some public value';
    this._somePrivateProp = 'some private value'; // this is private by convention, not truly private
  }
}

// after
class B {
  somePublicProp; //I'm public
  #somePrivateProp; // I'm private, and inaccessible from outside the class

  set privateProp(value) {
    this.#somePrivateProp = value; // notice that the # is required to access
  }
}

RegEx Match Indices.js

const regex = /\s(?<a>a+\w+)\s/dg;
const string = 'Fourscore and seven years ago our ancestors made a right proper mess';

let result = regex.exec(string);

while (result !== null) {
  for (const index in result.indices) {
    console.log(result.indices[index]);
  }
  result = regex.exec(string);
}

// the result.indices array has the start and end position of the full match as well as capture groups, named groups are captured as well

Static Intialization Blocks.js

// before
class A {
  static a = 'Some predetermined value';
  // these are dynamic based on a
  static b;
  static c;
}

try {
  const { b, c } = doSomethingRiskyWithA(A.a);
  A.b = b;
  A.c = c;
} catch {
  A.b = 'Some fallback';
  A.c = 'Some fallback';
}

// after
class A {
  static a = 'Some predetermined value';
  // these are dynamic based on x
  static b;
  static c;
  static {
    try {
      const { b, c } = doSomethingRiskyWithA(A.a);
      A.b = b;
      A.c = c;
    } catch {
      A.b = 'Some fallback';
      A.c = 'Some fallback';
    }
  }
}

Static Methods and Fields.js

// before
class A {}
A.something = new A();
A._somethingPrivate = 'A static value on A'; // private by convention only
A.doSomething = function () {
  // does something
};
A._doSomethingPrivate = function () {
  // does something that should be private, but is accessible
};

// after
class B {
  static something = new B();
  static #somethingPrivate = 'A staic value on B';

  static doSomething() {
    // does something statically
  }

  static #doSomethingPrivate() {
    // does somehthing statically in a truly private way
  }
}

Top Level Await.js

// before
(async () => {
  // do something asynchronous
  const response = await somethingLongRunning();
})();

// after
const response = await somethingLongRunning();