6 Fitur JavaScript ES12 -Kembali pada tahun 2015, ES6 yang revolusioner diperkenalkan dengan berbagai fitur yang umum digunakan dalam pengembangan web modern.
Sejak itu, ECMAScript telah berkembang secara signifikan hingga ES12, yang secara resmi dikenal sebagai ECMAScript 2021. ES12 tiba pada Juni 2021 dengan kemampuan baru, peningkatan, dan beberapa perubahan sintaks.
Setiap pengembang JavaScript yang ingin melakukan yang terbaik harus mempelajari fitur terbaru ES12. Di blog ini, kita akan melihat 6 Fitur JavaScript ES12 teratas dengan contoh.
1. Promise.any()
Promise.any() mengambil objek Promise yang dapat diubah dan diselesaikan jika salah satu dari janji tersebut diselesaikan. Ini berguna ketika kita hanya membutuhkan satu janji untuk dipenuhi terlepas dari apa yang terjadi pada orang lain.
Promise.all() adalah metode serupa yang sudah ada di ES, tetapi diselesaikan hanya jika semua janji diselesaikan. Demikian pula, Promise.race() digunakan untuk mengembalikan janji pertama untuk menyelesaikan apakah itu diselesaikan atau ditolak.
const err = new Promise((resolve, reject) => {
reject(new Error('Error'));
});
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('First Promise');
}, 200);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Second Promise');
}, 500);
});
Promise.any(\\\[err, p1, p2\\\]).then((res) => {
console.log(res);
})
// output: First PromiseKelas AggregateError baru membantu kita menangkap pengecualian dari metode Promise.any(). Misalnya, Jika semua janji yang diteruskan ke Promise.any() ditolak, objek AggregateError akan dilempar.
const e1 = new Promise((resolve, reject) => {
reject(new Error('Error 1'));
});
const e2 = new Promise((resolve, reject) => {
reject(new Error('Error 2'));
});
Promise.any(\\\[e1, e2\\\])
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
// output: "AggregateError: All promises were rejected"Penggunaan Promise.any() dalam pengembangan cukup mudah. Misalnya, kami dapat mengirim beberapa panggilan API yang identik ke server atau database dan mengembalikan data apa pun yang lebih dulu.
2. WeakRef
Seperti namanya, WeakRef adalah referensi yang lemah ke objek lain. Objek yang direferensikan secara lemah tidak akan disimpan dalam memori selama objek tersebut tidak direferensikan dengan kuat.
JavaScript menggunakan algoritme pengumpulan sampahnya untuk menghapus objek dalam memori yang tidak lagi dirujuk oleh objek lain. Jadi, ketika kita membuat objek WeakRef, itu bisa menjadi sampah yang dikumpulkan kapan saja.
const student = {
name: 'John Doe',
age: 20,
address: {
number: 365,
street: 'Flower street'
}
}
const ref = new WeakRef(student);
ref.deref().age;
//output: 20Kita dapat menggunakan metode deref() untuk mengakses referensi yang lemah jika masih tersedia di memori.
Meskipun WeakRef berguna untuk menghemat beberapa memori, penulis WeakRef menyarankan untuk menghindarinya setiap saat jika memungkinkan, alasannya adalah perilaku rumit dari pengumpul sampah di mesin JavaScript yang berbeda.
3. Private class methods
Sejak pengenalan kelas untuk JavaScript di ES6, metode dan properti telah menjadi publik secara default. Meskipun pengembang menggunakan awalan garis bawah (_) saat mendeklarasikan metode dan properti pribadi, itu hanyalah sebuah konvensi.
Itu tidak menghentikan siapa pun untuk mengakses properti pribadi dari luar kelas. Tetapi dengan ES12, JavaScript telah mengaktifkan pembuatan metode dan properti pribadi secara asli. Untuk membuatnya, kita harus mengawali pengenal dengan hash (#).
class Auth {
#getToken() {
return "12345678";
}
isAuth() {
return this.#getToken();
}
}
const auth = new Auth();
auth.getToken(); //output: auth.getToken is not a function
auth.isAuth(); //output: 12345678Mirip dengan metode dan properti pribadi, kita dapat mendefinisikan pengakses pribadi (pengambil dan penyetel) menggunakan sintaks yang sama.
class Auth {
get #getToken() {
return localStorage.getItem('token');
}
set #setToken(token) {
localStorage.setItem('token', token);
}
set login(token) {
this.#setToken = token;
}
get isAuth() {
return this.#getToken;
}
}
let token = '12345678';
const auth = new Auth();
auth.login = token;
auth.isAuth; //output: 123456784. Logical assignment operators
JavaScript sudah mendukung operator penugasan aritmatika dan bitwise. Dari ES12 dan seterusnya, ia telah memperluas dukungan ke operator penugasan logis.
Ada tiga operator penugasan logis baru:
- Logical Nullish Assignment (??=)
- Logical AND Assignment (&&=)
- Logical OR Assignment (||=)
Meskipun sintaks terlihat mirip dengan operator penugasan aritmatika (+=), operator penugasan logis tidak akan selalu melakukan penugasan. Sebaliknya, penugasan hanya akan terjadi jika kondisi yang ditentukan oleh operator logika terpenuhi.
4.1 Logical nullish assignment
Operator penugasan nullish logis (??=) akan menetapkan nilai operan kanan ke operan kiri hanya jika operan kiri nol atau tidak terdefinisi (nullish).
Sepintas, operator ??= mungkin terlihat sedikit membingungkan karena bentuk perluasan dari operator ini setara dengan x ?? (x = y).
const person = { name: 'John' };
person.name ??= 'User 1';
console.log(person.name);
// output: John
person.age ??= 18;
console.log(person.age);
// output: 18Jika kita menggunakan versi ES yang lebih lama, kode di atas akan terlihat seperti ini:
const person = { name: 'John' };
if(person.name === undefined || person.name === null) {
person.name = 'User 1';
}
console.log(person.name);
if(person.age === undefined || person.age === null) {
person.age = 18;
}
console.log(person.age);4.2 Logical AND assignment
Operator logika AND penugasan (&&=) akan melakukan penugasan jika operan kiri benar. Karena kita baru saja membahas penugasan nullish, penggunaan operator logika AND penugasan sudah cukup jelas.
const product = { stocks: 10 };
product.stocks &&= 20;
console.log(product.stocks);
// output: 20
product.exp &&= '12/31/2021';
console.log(product.exp);
// output: undefined4.3 Logical OR assignment
Operator penugasan logika OR (||=) mirip dengan penugasan nullish, tetapi operan kiri harus salah agar penugasan terjadi. Suatu nilai dianggap salah jika itu nol, tidak terdefinisi, salah, 0, atau NaN.
const product = {
stocks: 0,
exp: '12/31/2021'
};
product.stocks ||= 10;
console.log(product.stocks);
// output: 10
product.exp ||= '01/31/2022';
console.log(product.exp);
// output: 12/31/20215. String.replaceAll()
Tujuan dari metode replaceAll() adalah untuk mengganti semua substring di dalam string. Di versi ES sebelumnya, jika kita ingin melakukan ini, kita harus menggunakan metode replace().
Dalam metode replace() , hanya kemunculan pertama yang akan diganti jika Anda menggunakan string sebagai argumen pertama. Oleh karena itu, kami akan menetapkan argumen pertama sebagai ekspresi reguler untuk menggantikan semua kemunculan.
let str = 'hotdog dog'.replace(new RegExp('dog','g'), 'cat');
console.log(str) //output: hotcat catDengan ES12, kita bisa langsung menggunakan metode replaceAll() tanpa menggunakan ekspresi reguler. Cara ini sangat sederhana dan aman.
let str = 'hotdog dog'.replaceAll('dog', 'cat');
console.log(str) //output: hotcat cat6. Numeric separators
This is a simple yet useful feature that was already available in browsers thanks to the V8 engine, but now it comes integrated with ES12. Numeric separators are underscores (_) that help us to separate large numbers.
let billion = 1_000_000_000; console.log(billion); //output: 1000000000
Browser akan mengabaikan garis bawah. Pemisah numerik membuat hidup pengembang lebih mudah saat bekerja dengan jumlah besar.
Kesimpulan
ECMAScript terus berkembang dengan pengenalan fitur baru yang keren setiap tahun. ES edisi ke-12 telah menyederhanakan fungsionalitas pengkodean penting dengan fitur-fiturnya yang disempurnakan.
Dalam artikel ini, kami menjelajahi 6 fitur teratas ES12 yang harus Anda pelajari sebagai pengembang JavaScript. Saya harap Anda memanfaatkan fitur ini untuk proyek pengembangan Anda.
Terima kasih telah membaca artikel 6 Fitur JavaScript ES12 !
Syncfusion Essential JS 2 adalah satu-satunya suite yang Anda perlukan untuk membangun aplikasi. Ini berisi lebih dari 65 komponen UI berkinerja tinggi, ringan, modular, dan responsif dalam satu paket. Unduh uji coba gratis untuk mengevaluasi kontrol hari ini.
Jika Anda memiliki pertanyaan atau komentar, Anda dapat menghubungi kami melalui forum dukungan, portal dukungan, atau portal umpan balik kami. Kami selalu senang membantu Anda!
