Panduan Mesra untuk Pemula ECMAScript 2018

Hai sana, para ahli JavaScript masa depan! Saya sangat gembira untuk menjadi panduan Anda dalam perjalanan menarik ini melalui ECMAScript 2018. Sebagai seseorang yang telah mengajar pemrograman selama bertahun-tahun, saya tidak sabar untuk membagikan fitur baru ini kepada Anda. Jangan khawatir jika Anda baru belajar mengoding - kita akan berjalan langkah demi langkah, dan sebelum Anda sadari, Anda akan menulis JavaScript seperti seorang pro!

ECMAScript 2018

Fitur Baru yang Ditambahkan di ECMAScript 2018

ECMAScript 2018, juga dikenal sebagai ES9, membawa beberapa penambahan fantastik ke dalam bahasa JavaScript. Itu seperti mendapat sebuah kotak peralatan baru untuk petualangan coding Anda! Mari kita masuk ke dalam fitur ini satu per satu.

Iterasi Asinkron JavaScript

Bayangkan Anda di sebuah buffet, dan bukannya menumpuk semua makanan di piring Anda sekaligus, Anda dapat secara magis memanggil setiap hidangan saat Anda siap makan itu. Itu seperti apa yang iterasi asinkron lakukan untuk kode Anda!

Loop `for-await-of`

Loop ini memungkinkan kita bekerja dengan sumber data asinkron lebih mudah. Ini adalah contoh:

async function* numberGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

async function printNumbers() {
for await (const num of numberGenerator()) {
console.log(num);
}
}

printNumbers();
// Output:
// 1
// 2
// 3

Dalam contoh ini, numberGenerator adalah fungsi generator asinkron yang menghasilkan janji. Loop for-await-of menunggu setiap janji terpenuhi sebelum melanjutkan ke iterasi berikutnya. Itu seperti memiliki seorang teman sabar yang menunggu Anda menyelesaikan setiap gigitan sebelum mengajak makanan berikutnya!

Fitur Baru dari Objek RegExp()

RegExp, atau Ekspresi Reguler, adalah seperti pisau Swiss Army bagi pemrosesan teks. ECMAScript 2018 menambahkan beberapa trik menarik ke dalam alat ini.

Unicode Property Escapes

Fitur ini memungkinkan kita mencocokkan karakter berdasarkan properti Unicode mereka. Ini sangat membantu saat bekerja dengan teks internasional!

const greekSymbol = "π";
console.log(/\p{Script=Greek}/u.test(greekSymbol)); // true

Di sini, \p{Script=Greek} mencocokkan setiap karakter dalam naskah Yunani. Flag u mengaktifkan mode Unicode.

Lookbehind Assertions

Sekarang kita dapat memeriksa apa yang ada sebelum cocokan kita, bukan hanya setelahnya. Itu seperti dapat melihat ke belakang dalam dunia coding!

const price = "$123.45";
console.log(price.match(/(?<=\$)\d+(\.\d*)?/)[0]); // "123.45"

Dalam contoh ini, (?<=\$) adalah lookbehind positif yang memastikan cocokan kita diikuti oleh tanda dollar, tanpa mencakup tanda dollar dalam cocokan.

Named Capture Groups

Kita sekarang dapat memberi nama kepada grup tangkapannya, membuat ekspresi reguler kita lebih mudah dibaca dan diurus.

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2023-05-15");
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "05"
console.log(match.groups.day);   // "15"

Itu seperti memberi label pada kompartemen dalam kotak peralatan Anda - semuanya mudah ditemukan!

`Promise.prototype.finally()`

Janji di JavaScript adalah seperti membuat rencana dengan seorang teman. Kadang-kadang hal berjalan lancar, kadang-kadang tidak, tapi dalam semua kasus, Anda mungkin ingin melakukan sesuatu kemudian. Itu di mana finally() memasuki panggung!

function fetchData() {
return new Promise((resolve, reject) => {
// Simulasi panggilan API
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Error fetching data");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Operation completed"));

Dalam contoh ini, tidak peduli apakah janji terpenuhi atau ditolak, blok finally akan selalu dijalankan. Itu seperti mengatakan "Apakah kita sukses atau gagal, mari kita membersihkan dan pulang."

Properti Objek Rest

Operator rest (...) dalam literal objek adalah seperti memiliki sebuah kantong ajaib yang dapat menahan semua sisa. Itu sangat berguna saat Anda ingin memisahkan beberapa properti dari yang lain.

const person = {
name: "Alice",
age: 30,
city: "Wonderland",
occupation: "Explorer"
};

const { name, age, ...rest } = person;

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "Wonderland", occupation: "Explorer" }

Dalam contoh ini, kita mengambil name dan age, dan semua yang lain dimasukkan ke dalam rest. Itu seperti mensortir pakaian Anda - kaus kaki di satu piringan, semua yang lain di piringan lain!

Kesimpulan

Dan di sana Anda ada, teman-teman! Kita telah melakukan perjalanan melalui fitur menarik ECMAScript 2018. Ingat, cara terbaik untuk belajar adalah dengan melakukan, jadi jangan takut untuk mencoba alat baru ini. Pemrograman adalah seperti memasak - semakin banyak Anda berlatih, semakin baik Anda akan menjadi!

Berikut adalah tabel rujukan cepat dari metode yang kita diskusikan:

Fitur	Deskripsi
`for-await-of`	Memungkinkan iterasi asinkron over promises
Unicode Property Escapes	Mencocokkan karakter berdasarkan properti Unicode dalam RegExp
Lookbehind Assertions	Mencocokkan berdasarkan apa yang ada sebelumnya dalam RegExp
Named Capture Groups	Memungkinkan memberi nama kepada grup tangkapannya dalam RegExp
`Promise.prototype.finally()`	Menentukan callback yang akan dijalankan saat janji selesai
Properti Objek Rest	Mengumpulkan properti yang tersisa ke dalam objek baru