JavaScript - ECMAScript 2020: Panduan untuk Pemula

Hai, para pemrogram yang sedang mencari ilmu! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia ECMAScript 2020. Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya telah melihat banyak siswa bercahaya saat mereka mengerti konsep ini. Jadi, mari kita masuk dan jelajahi fitur menarik yang dibawa oleh ES2020 ke dalam bahasa JavaScript!

Fitur yang Ditambahkan di ECMAScript 2020

ECMAScript 2020, juga dikenal sebagai ES2020, mirip seperti sebuah kotak alat baru berkilau untuk pengembang JavaScript. Itu memperkenalkan beberapa fitur menarik yang membuat kehidupan coding kita menjadi lebih mudah dan efisien. Mari kita buka kotak ini bersama dan lihat apa saja yang menarik yang kita temukan di dalamnya!

Tipe Data BigInt

Imaginasi Anda sedang menghitung bintang di langit malam. Ada milyar-milyar di antaranya! Di masa lalu, JavaScript memiliki batas pada seberapa besar sebuah bilangan bisa menjadi. Tetapi sekarang, dengan BigInt, langit adalah batas (dalam arti kata).

BigInt memungkinkan kita bekerja dengan bilangan bulat yang sangat besar. Berikut adalah cara Anda bisa menggunakannya:

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// Output: 1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// Output: 1234567890123456789012345678901234567891n

Dalam contoh ini, kita menciptakan BigInt dengan menambahkan 'n' di akhir bilangan. 'n' memberitahu JavaScript, "Hai, ini adalah BigInt!" Kita dapat melakukan operasi pada BigInt seperti bilangan biasa, tetapi ingat untuk menambahkan 'n' ke setiap bilangan yang Anda gunakan dengan BigInt.

Operator Nullish Coalescing (??)

Apakah Anda pernah bermain permainan "tebak hadiah"? Anda getar kotak, dan jika Anda tidak mendengar apa-apa, Anda menduga itu kosong. Operator nullish coalescing mirip seperti itu, tapi untuk kode!

Operator ini membantu kita memeriksa jika nilai null atau undefined, dan jika itu benar, kita bisa memberikan nilai default. Berikut adalah cara kerjanya:

let username = null;
console.log(username ?? "Guest");
// Output: "Guest"

username = "Alice";
console.log(username ?? "Guest");
// Output: "Alice"

Dalam kasus pertama, username adalah null, jadi operator mengembalikan "Guest". Dalam kasus kedua, username memiliki nilai, jadi itu mengembalikan nilai itu. Seperti mengatakan, "Jika kotak kosong, mari kita asumsikan itu adalah boneka beruang!"

Metode Promise allSettled()

Imaginasi Anda adalah seorang guru (seperti saya!) menunggu semua murid Anda menyelesaikan ujian. Beberapa mungkin menyelesaikan secara sukses, lainnya mungkin menyerah. Promise.allSettled() mirip seperti menunggu semua siswa menyerahkan kertas mereka, terlepas dari seberapa baik mereka melakukannya.

Berikut adalah contoh:

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));

// Output:
// "fulfilled"
// "rejected"

Dalam kode ini, kita memiliki dua promise. Salah satu diselesaikan secara sukses, yang lain ditolak. Promise.allSettled() menunggu keduanya selesai dan kemudian memberikan kita status setiap satunya.

Metode String matchAll()

Apakah Anda pernah bermain "Di mana Waldo?" Well, matchAll() mirip seperti bermain "Di mana Waldo?" dengan teks! Itu membantu kita menemukan semua kejadian dari pola di dalam string.

mari kita lihatnya dalam aksi:

const text = "The cat and the hat sat on the mat.";
const regex = /at/g;
const matches = [...text.matchAll(regex)];

console.log(matches);
// Output: [
//   ['at', index: 7, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 19, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 31, input: 'The cat and the hat sat on the mat.', groups: undefined]
// ]

Di sini, kita mencari semua kejadian dari "at" di dalam teks kita. matchAll() mengembalikan seorang pengguna, yang kita konversi menjadi array menggunakan operator penyebaran (...). Setiap kejadian memberikan kita informasi tentang di mana itu ditemukan di string.

Operator Optional Chaining (?.)

Terakhir tapi bukan yang paling kurang, mari kita bicarakan tentang operator optional chaining. Itu mirip seperti seorang penjelajah hati-hati, memeriksa setiap langkah jalannya sebelum maju.

Berikut adalah cara kerjanya:

const user = {
name: "Alice",
address: {
street: "123 Main St"
}
};

console.log(user.address?.street);
// Output: "123 Main St"

console.log(user.phoneNumber?.home);
// Output: undefined

Dalam contoh ini, kita mencoba mengakses properti yang mungkin tidak ada. Operator ?. memungkinkan kita melakukan ini secara aman. Jika user.address ada, itu akan mencoba mengakses street. Jika user.phoneNumber tidak ada, itu berhenti di sana dan mengembalikan undefined saja daripada melempar kesalahan.

Tabel Metode

Berikut adalah tabel praktis yang menggabungkan metode baru yang kita pelajari:

Metode	Deskripsi
BigInt	Memungkinkan bekerja dengan bilangan bulat besar
?? (Nullish Coalescing)	Memberikan nilai default untuk null atau undefined
Promise.allSettled()	Menunggu semua promise untuk diselesaikan
String.matchAll()	Menemukan semua kejadian dari pola di dalam string
?. (Optional Chaining)	Mengakses properti nested secara aman

Dan itu adalah dia, teman-teman! Kita telah menjelajahi fitur menarik ECMAScript 2020. Ingat, cara terbaik untuk belajar adalah dengan melakukan. Jadi, buka editor kode Anda dan mulai mencoba tools ini. Selamat coding, dan semoga perjalanan JavaScript Anda penuh dengan kegembiraan dan penemuan!

Credits: Image by storyset