4 Fitur menarik di ES2022

ECMAScript 2022

ECMAScript 2022 dirilis pada bulan Juni 2022 setelah melalui 4 tahapan TC39. Kita akan mengulas 4 fitur baru menarik yang ada di ES2022

1. Metode at() pada array atau string

Fitur ini sangat menarik karena kita bisa mengambil data pada sebuah array atau bahkan huruf pada sebuah string lebih mudah dan juga enak dibaca.

Metode at() bisa mengakses data baik dari depan dengan menggunakan integer positif atau dengan integer negatif jika ingin mengambil data dari belakang.

Sebelumnya kita biasa menulis seperti ini:

const arr = [1,2,3,4];
const str = "HELLO";
// mengakses dari depan
arr[1] // 2
str[1] // "E"
// mengakses dari belakang
arr[arr.length - 2] // 3
str[str.length - 2] // "L"

Sekarang kita bisa menulis seperti ini dengan ES2022:

const arr = [1,2,3,4];
const str = "HELLO";
// mengakses dari depan, mulai dari index 0 untuk element pertama
arr.at(1) // 2
str.at(1) // "E"
// mengakses dari belakang, mulai dari index -1 untuk element terakhir
arr.at(-2) // 3
str.at(-2) // "L"

2. await diluar fungsi async

Fungsi Asynchronous sudah umum digunakan di dalam Javascript. Tetapi tahukah kalau ternyata await tidak bisa digunakan di luar fungsi async ? Ya, ternyata sebelumnya await hanya bisa digunakan di dalam fungsi async, namu saat ini di ES2022 kita bisa menggunakannya di luar fungsi async.

const res = await fetch('https://reqres.in/api/users');
const person = await res.json();
console.log(person);

Beberapa hal yang bisa dilakukan dengan top-level await ialah memanggil modul secara dinamis dan bersyarat.

const funcName = await fetch("https://example.com/which-function");
const myFunction= await import(`/functions/${funcName}.js`);
// OR
const isSuperAdmin = true;
if(isSuperAdmin) {
   await require('/functions/only-superadmin.js')
}

3. cause untuk error handling

Saat ini memungkinkan kita untuk melampirkan cause saat melempar sebuah error.

try {
  // put something fail here
} catch (error) {
  throw new Error('Something went wrong', { cause: error });
}

4. Private fields and methods

Sebelum ES2022, fields berada di dalam constructor dan diberi prefix _ yang menandakan bahwa fields itu adalah private.

class User {

  constructor(){

      // public field
      this.name = 'john doe'

      // private field
      this._password = 'qwerty';
  }
}

const user = new User();
// public field dapat diakses
console.log(user.name);
// name - public fields are accessible outside the classes
// private field tetap dapat diakses tanpa ada error
user._password = '1234';
console.log(user._password);

Pada contoh di atas _password tetap dapat diakses dari luar class.

Pada ES2022, kita dapat membuat fields menjadi private dengan menambahkan prefix # . Selain itu, tidak lagi diperlukan memasukan fields ke dalam constructor().

class User {
  // public field
  name = 'kodex';
// private field
  #password = 'qwerty';
setPassword(password) {
    this.#password = password;
  }
}
const user = new User();
// akan berhasil karena public field
user.setPassword('1234');
// akan ada error karena private field
console.log(user.#password);
user.#password = '1234';

Sama halnya dengan fields, kita juga bisa menambahkan # pada methods untuk membuatnya menjadi private.

class User {
  // public field
  name = 'john doe';
// private method
  #setName(name) {
    this.name = name;
  }
}
const user = new User();
// akan ada error karena private method
user.#setName('jane doe');

Masih banyak lagi fitur-fitur baru di ES2022, namun hal-hal di atas yang menurut saya menarik. Anda bisa melihat secara lengkap di sini.