JavaScript - ECMAScript 2020: Panduan Pemula

Hai, para pemrogram yang bersemangat! Saya sangat gembira menjadi panduan Anda dalam perjalanan menarik ke dunia ECMAScript 2020. Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya telah melihat banyak murid bercahaya saat mereka memahami konsep ini. Jadi, mari kita masuk dan eksplorasi fitur yang menarik yang ES2020 membawa ke bahasa JavaScript!

Fitur Ditambahkan dalam ECMAScript 2020

ECMAScript 2020, juga dikenal sebagai ES2020, seperti sebuah kotak alat baru berkilau untuk pengembang JavaScript. Ini memperkenalkan beberapa fitur menarik yang membuat kehidupan pemrograman kita 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 milyarannya! Di masa lalu, JavaScript memiliki batas pada seberapa besar sebuah bilangan bisa menjadi. Tetapi sekarang, dengan BigInt, langit adalah batas (dugaan yang dimaksudkan)!

BigInt memungkinkan kita bekerja dengan bilangan bulat yang sangat besar. Berikut 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 bisa melakukan operasi pada BigInt seperti 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 menebak itu kosong. Operator nullish coalescing seperti itu, tapi untuk kode!

Operator ini membantu kita memeriksa jika nilai adalah null atau undefined, dan jika itu benar, kita bisa menyediakan nilai default. Berikut 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. 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() seperti menunggu semua siswa mengembalikan kertas mereka, tanpa menghiraukan bagaimana mereka melakukan.

Berikut contohnya:

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 janji. Satu janji terpenuhi secara sukses, yang lain ditolak. Promise.allSettled() menunggu keduanya selesai dan kemudian memberikan kita status setiap janji.

Metode String matchAll()

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

mari 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 kemunculan "at" dalam teks kita. matchAll() mengembalikan seorang penggambar, yang kita konversi ke array menggunakan operator penyebaran (...). Setiap kecocokan memberikan kita informasi tentang di mana itu ditemukan dalam string.

Operator Optional Chaining (?.)

Terakhir tapi bukan terkecil, mari bicarakan tentang operator optional chaining. Itu seperti seorang penelusur berhati-hati, memeriksa setiap langkah di jalannya sebelum maju.

Berikut 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 dan mengembalikan undefined saja tanpa melempar kesalahan.

Tabel Metode

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

Metode	Deskripsi
BigInt	Memungkinkan bekerja dengan bilangan bulat yang besar
?? (Nullish Coalescing)	Menyediakan nilai default untuk null atau undefined
Promise.allSettled()	Menunggu semua janji untuk diselesaikan
String.matchAll()	Menemukan semua kemunculan pola dalam string
?. (Optional Chaining)	Mengakses properti nested objek secara aman

Dan itu adalah nya, teman-teman! Kita telah mengeksplorasi 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