ECMAScript 2018: Panduan Ramah untuk Pemula

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

ECMAScript 2018

Fitur Baru yang Ditambahkan di ECMAScript 2018

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

Iterasi Asinkron di JavaScript

Imagin Anda di sebuah buffet, dan bukannya menyusun semua makanan di piring Anda sekaligus, Anda bisa secara magis memanggil setiap hidangan saat Anda siap makan itu. Itu seperti apa yang dilakukan iterasi asinkron untuk kode Anda!

Loop `for-await-of`

Loop baru 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 terpecahkan sebelum melanjutkan ke iterasi berikutnya. Itu seperti memiliki seorang teman sabar yang menunggu Anda menyelesaikan setiap gigitan sebelum memberikan hidangan berikutnya!

Fitur Baru dari Objek RegExp()

RegExp, atau Ekspresi Reguler, adalah seperti pisau瑞士 Army knife dari pengolahan teks. ECMAScript 2018 menambahkan beberapa trik menarik ke dalam alat ini.

Unicode Property Escapes

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

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

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

Lookbehind Assertions

Sekarang kita bisa memeriksa apa yang ada sebelum kesamaan 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 kesamaan kita diikuti oleh tanda dollar, tanpa termasuk tanda dollar dalam kesamaan.

Named Capture Groups

Kita sekarang dapat memberikan 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 di dalam kotak alat Anda – segala sesuatu 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 kedua kasus, Anda mungkin ingin melakukan sesuatu kemudian. Itu di mana finally() berada!

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 jika janji terpecahkan atau ditolak, blok finally akan selalu berjalan. Itu seperti mengatakan "Apakah kita sukses atau gagal, mari kita membersihkan dan pulang ke rumah."

Properti Rest di Objek

Operator rest (...) dalam literal objek adalah seperti memiliki sebuah tas magis yang dapat menahan semua sisihan. Itu sangat membantu saat Anda ingin memisahkan beberapa properti dari sisanya.

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 segala sesuatu lainnya dimasukkan ke dalam rest. Itu seperti mensortir pakaian Anda – kaus kaki di satu piring, segala sesuatu lainnya di piring lain!

Kesimpulan

Dan itu dia, teman-teman! Kita telah menjelajahi fitur baru menarik ECMAScript 2018. Ingat, cara terbaik untuk belajar adalah dengan melakukan, jadi jangan khawatir untuk mencoba tools baru ini. Pemrograman adalah seperti memasak – semakin banyak Anda berlatih, semakin baik Anda akan menjadi!

Berikut ini adalah tabel referensi cepat dari metode yang kita bahas:

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