DEV Community

Akash Shyam
Akash Shyam

Posted on

Features To Look Out For In Future JS Versions

I'm am sooooo excited... some of my favourite typescript features are on the horizon. So without further ado, let's get started

Class Fields

Class fields include private methods and accessors(like get & set), public and private instance fields, static class fields and private static methods. Let's look at them:

  1. Private Methods & Fields
class Man {
  // Private Field
  #name = '';

  // Private Getter
  get #x() {
    return #xValue; 
  }

  // Private Setter
  set #x(value) {
    this.#xValue = value;
  }

  // Private Method
  #clicked() {
    this.#x++;
  }

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

}
Enter fullscreen mode Exit fullscreen mode
  1. Static Private Methods & Fields Just like we have saw private instance fields and methods earlier, we can do the same for static fields & methods.
class ColorFinder {
  static #red = "#ff0000";
  static #green = "#00ff00";
  static #blue = "#0000ff";

  static colorName(name) {
    switch (name) {
      case "red": return ColorFinder.#red;
      case "blue": return ColorFinder.#blue;
      case "green": return ColorFinder.#green;
      default: throw new RangeError("unknown color");
    }
  }

}
Enter fullscreen mode Exit fullscreen mode

Top Level Await

I bet most of us have used async IIFEs(Immediately Invoked Function Expression) a.k.a IIAFEs for using async/await in the top level of a module in this fashion:

(async () => {
  // Async code
  await axios.post('https://xyz.com');
})()
Enter fullscreen mode Exit fullscreen mode

Using this, we can simplify this code to:

// That's it... no catch!
await axios.post('https://xyz.com');
Enter fullscreen mode Exit fullscreen mode

That's it for this post! I hope you liked it. Checkout my twitter where I post tips, tricks and memes for developers. Bye for now 🤘

Discussion (0)