JavaScript modern dengan ES6-ES13 (Tutorial JS)

Ini yang akan menantimu dalam kursus JavaScript ES6 ini.

JavaScript telah ada di browser selama bertahun-tahun. Hampir setiap halaman web berisi kode JS lebih atau kurang. Meskipun versi awalnya agak berantakan, pekerjaan dengan standar ES5 sudah lumayan bagus, setidaknya jika kita dapat mengelakkan jebakan dan ketidakpastian dengan bijak. Jadi mengapa harus belajar hal baru dan tidak tetap menggunakan yang terbukti? Dalam pelajaran ini, saya akan menunjukkan manfaat standar baru ES6 dan alasan mengapa sebenarnya tidak bisa menghindari penggunaannya.

Hingga ES5, kata kunci var adalah satu-satunya cara untuk mendeklarasikan variabel, dan seringkali menyebabkan perilaku tidak diinginkan atau bahkan kesalahan. ES6 memperkenalkan dua kata kunci baru let dan const, yang mengatasi beberapa kekurangan dari var.

Setiap pengembang web mengenal perulangan For. Perulangan ini sering digunakan untuk melintasi array. Dengan ES6, ada sebuah varian dari perulangan For yang memungkinkan hal ini menjadi lebih singkat dan ringkas.

Fungsi sangat penting dalam JS dan selama ini hanya dideklarasikan dan didefinisikan melalui kata kunci function. ES6 memperkenalkan cara penulisan yang sangat elegan dan singkat, yang tidak hanya membuat kode lebih mudah dibaca, tetapi juga memberikan solusi untuk masalah yang menjengkelkan dengan this.

Parameter opsional dapat diimplementasikan dengan sedikit rumit di ES5 dan tidak terbuka bagi pemanggil fungsi. Dengan ES6, parameter opsional dengan nilai default dapat ditulis langsung dalam tanda tangan fungsi.

Destrukturisasi memungkinkan ekstraksi elemen secara terarah dari objek dan array. Jika dilihat dengan seksama, akan ada banyak kemungkinan penggunaan yang membuat kode JS lebih elegan dan ringkas.

Manipulasi dengan variabel arguments diperlukan sampai ES6 untuk memungkinkan jumlah parameter yang berbeda dalam fungsi. Ini jauh lebih mudah dilakukan dalam ES6 dengan menggunakan apa yang disebut sebagai Rest Parameters.

Tidak hanya pada definisi fungsi, operator …- juga digunakan pada parameter istirahat, dan juga dapat digunakan pada Destrukturisasi Array untuk menangkap "sisa" elemen dan menyediakannya sebagai Array.

Tidak hanya pada arrays, operator sisa juga dapat digunakan pada objek untuk menangkap property yang tersisa dan menyediakannya sebagai objek.

Kebalikan dari operator Sisa adalah operator Spread. Ia terlihat sama (…), tetapi berada di sisi lain dari suatu penugasan dan menyebarkan array ke bagian-bagiannya.

“Trick” dengan operator Spread juga berfungsi dengan sangat baik pada objek. Dengan demikian, objek dapat "dicampurkan" ke objek lain. Namun, ada alternatif yang sangat baik dengan Object.assign().

Fungsi dalam objek literal sangat merepotkan untuk ditulis dengan kata kunci function. Namun dengan ES6, Anda bisa menulisnya lebih singkat dan jelas.

Tidak ada cara lain untuk mengatakannya: String literal multi-baris dengan nilai variabel terintegrasi sangat merepotkan hingga ES6 dan juga sangat tidak nyaman dibaca. Literal template baru dari ES6 sebaliknya adalah kesenangan sintaksis.

Objek dapat selalu disalahgunakan sebagai gudang kunci-nilai atau kamus, namun dengan beberapa kerugian. Struktur data Map baru ini membebaskan diri dari kerugian tersebut dan menyediakan fungsionalitas kamus yang solid, seperti yang dikenal dari bahasa pemrograman lainnya.

Setelah menghindari Callback-Hell dengan Promises, konstruksi async/await menambahkan sedikit lagi gula sintaksis. Ini membangun di atas Promises dan memungkinkan untuk memprogram operasi asinkron hampir seperti operasi sinkron. Mereka yang pernah memprogram dengan async/await, mulai menghindari penggunaan langsung dari metode then dari Promises (dan lebih-lebih dari callback).

Selain mengimpor modul secara statis dengan kata kunci import, ES6 juga mendukung pengimporan dinamis dengan fungsi import-. Karena berfungsi secara asinkron, sebuah Promise dikembalikan, yang dapat dengan baik diantisipasi dengan menggunakan await. Dengan demikian, tidak ada lagi halangan dalam memuat ulang modul selama runtime di waktu yang tepat.

Penurunan juga masih didasarkan pada prototipe, ditulis dalam ES6 dengan kata kunci extends tetapi jauh lebih mudah dan mudah dipahami. Ketika menggunakannya, kita harus memanggil konstruktor kelas dasar pada waktu yang tepat dengan super. Cara melakukannya sudah tentu dijelaskan dalam pelajaran ini.

Sekarang juga bisa mendeklarasikan field privat, dan pastinya tidak bisa diakses dari luar. Sedikit membutuhkan kebiasaan adalah deklarasi ini, yang jelas berbeda dari bahasa pemrograman lain.

Dengan kata kunci baru class dan fitur-fitur terkait seperti pewarisan dan enkapsulasi data (private fields), seharusnya semua programmer OO seharusnya puas, kan? Saya ingin memperkenalkan alternatif dalam pelajaran ini untuk membuat objek, yang sepenuhnya tanpa kelas, prototipe, dan this, namun memungkinkan jenis "pewarisan" yang lebih fleksibel atau lebih baik disebut "komposisi".

Fitur-fitur utama dari versi ES6 dan yang lebih baru seharusnya sudah dibahas sekarang. Namun, terdapat penambahan fitur baru secara berkala. Beberapa fungsi yang jarang digunakan belum disebutkan. Pada pelajaran ini akan dijelaskan tentang apa yang diharapkan di masa depan dan fungsi mana yang masih mungkin menarik dalam kasus-kasus khusus.