JavaScript adalah salah satu bahasa pemrograman paling populer di dunia dan digunakan untuk membuat situs web interaktif dan aplikasi web. Untuk pengembang, mempelajari JavaScript dapat menghasilkan banyak peluang karena kekuatan dan keserbagunaannya. Pada artikel ini, kita akan mengeksplorasi 10 konsep utama yang dapat membantu Anda meningkatkan penguasaan JavaScript dan meningkatkan keterampilan Anda ke level berikutnya. Konsep-konsep ini akan memberi Anda dasar yang kuat dalam bahasa dan membantu Anda berkembang menjadi pengembang yang lebih kompeten dan percaya diri.

1.Janji

Alat yang ampuh untuk menangani tindakan asinkron dalam kode Anda adalah janji JavaScript. Mereka memberi Anda cara untuk menangani hasil operasi asinkron, seperti permintaan jaringan, tanpa memblokir eksekusi kode Anda yang lain. Janji dapat berada di salah satu dari tiga status — terpenuhi, ditolak, atau tertunda — dan ini melambangkan hasil akhir dari operasi asinkron.

Dibandingkan dengan menggunakan fungsi panggilan balik, promise menawarkan mekanisme untuk menangani hasil tindakan asinkron dengan cara yang lebih ramping dan terkontrol. Selain itu, mereka membuatnya lebih mudah untuk menangani kesalahan dengan cara yang konsisten dan menggabungkan beberapa tugas asinkron.

Janji digunakan secara luas di pustaka dan kerangka kerja JavaScript, seperti AngularJS, ReactJS, dan Node.js. Diperkenalkan di ES6, mereka adalah konsep dasar untuk pengembangan JavaScript modern. Keterbacaan, pemeliharaan, dan kinerja kode Anda semuanya dapat ditingkatkan secara signifikan dengan mengetahui cara menggunakan promise dengan benar.

Dalam menggunakan janji JavaScript, objek " janji " adalah konstruktor yang membuat janji baru dan mengambil satu argumen, yang merupakan fungsi yang disebut "pelaksana". Fungsi pelaksana mengambil dua parameter, “ resolve ” dan “ reject ” yang dapat digunakan untuk menunjukkan apakah operasi asinkron berhasil atau gagal.

Mari kita lihat contoh berikut:

Setelah janji dibuat, Anda dapat menggunakan metode “ then” untuk melampirkan callback yang akan dipanggil saat janji diselesaikan, dan metode “ catch” untuk melampirkan callback yang akan dipanggil saat janji ditolak. Alternatifnya, Anda bisa mengelola beberapa janji secara bersamaan dengan menggunakan metode Promise.all() dan Promise.race() . Janji tersedia di semua lingkungan JavaScript modern dan didukung di semua browser utama, sehingga Anda dapat menggunakannya dengan percaya diri dalam proyek Anda.

2. Asinkron/Menunggu

Sama seperti janji, fitur " async/await "digunakan dalam JavaScript untuk menangani operasi asinkron. Itu diperkenalkan di ECMAScript 2017 (ES8) dan dibangun di atas janji untuk membuat kode asinkron dalam JavaScript lebih mudah dikelola dan lebih mudah dibaca. Async/menunggu menawarkan teknik untuk membuat kode asinkron dengan tampilan dan perilaku sinkron.

Fungsi asinkron ditentukan oleh kata kunci " async ". Fungsi asinkron kemudian dapat menghasilkan janji dan menggunakan kata kunci " menunggu " untuk menunda eksekusi kode sambil menunggu janji dipenuhi.

Contoh ditunjukkan di bawah ini:

Dalam kode di atas, " fetch " adalah fungsi asinkron yang mengembalikan janji dan kata kunci " menunggu " digunakan untuk menunggu janji diselesaikan sebelum mem-parsing data JSON.

Menggunakan async/menunggu membuat kode Anda lebih mudah dipahami, dipelihara, dan lebih kuat. Dan dibandingkan dengan panggilan balik dan janji, ini adalah cara yang lebih modern, lebih jelas, dan efektif untuk menulis kode asinkron.

Karena itu, penting untuk dicatat bahwa async/await melengkapi janji, bukan menggantikannya. Sederhananya, itu adalah sintaks yang berbeda untuk melakukan operasi yang sama. Itu masih bergantung pada janji untuk menangani aliran async secara internal.

3. Penutupan

Dalam JavaScript, fungsi dalam dapat mengakses variabel dan ruang lingkup fungsi luarnya berkat konsep kunci yang disebut penutupan. Ketika suatu fungsi didefinisikan di dalam fungsi lain dan fungsi dalam mempertahankan akses ke variabel dan cakupan eksekusi dari fungsi luar bahkan setelah fungsi luar menyelesaikan eksekusinya, sebuah penutupan dihasilkan.

Pertimbangkan kode berikut:

Dalam contoh ini, variabel x dapat diakses oleh fungsi dalam innerFunction dari cakupan fungsi luar karena ia didefinisikan di dalam fungsi luar outerFunction . Fungsi luar mengembalikan fungsi dalam, yang kemudian ditugaskan ke variabel myClosure. Fungsi dalam masih memiliki akses ke nilai x dan dapat mengembalikannya saat dipanggil bahkan ketika eksekusi fungsi luar selesai.

Penutupan dalam JavaScript biasanya digunakan untuk berbagai tugas, termasuk pembuatan variabel pribadi, penerapan paradigma pemrograman fungsional, dan pembuatan penutupan dalam loop. Dengan mengaktifkan fungsi untuk membawa data bersamanya, penutupan juga dapat digunakan untuk membuat kode yang kuat dan ekspresif. Juga dalam JavaScript, ini dapat digunakan untuk mengimplementasikan pola pemrograman berorientasi objek.

Meskipun demikian, penutupan juga dapat menyebabkan kebocoran memori jika tidak digunakan dengan tepat, karena fungsi dalam terus mempertahankan referensi ke variabel dan ruang lingkup fungsi luar dan pengumpul sampah tidak dapat melepaskan memori.

4. Warisan Prototypal

Berbeda dengan model pewarisan berbasis kelas yang digunakan dalam bahasa seperti Java dan C#, JavaScript menggunakan model pewarisan berbasis prototipe. Dalam JavaScript, objek mewarisi properti dan metodenya dari objek lain, bukan dari kelas.

Setiap objek JavaScript memiliki properti internal yang disebut __proto__ (atau [[Prototipe]]), yang menunjuk ke objek berbeda yang dikenal sebagai "objek prototipe". Saat properti atau metode objek diakses, JavaScript pertama-tama menentukan apakah objek itu sendiri memiliki properti atau metode yang ditentukan langsung di atasnya. Jika tidak, JavaScript memeriksa objek prototipe objek dan terus mencari melalui rantai prototipe hingga menemukan properti atau metode atau mencapai akhir rantai.

Mari kita lihat contoh di bawah ini:

Anda akan mengamati dari kode di atas bahwa objek " anjing " dalam contoh ini mewarisi atribut " makan " dari " binatang ", objek prototipenya, daripada menentukannya langsung di atasnya. Beginilah cara kerja warisan prototipe. Ini adalah mekanisme di mana objek dapat mewarisi properti dan metode dari objek lain.

Penting untuk dicatat di sini bahwa pewarisan dalam konteks ini bersifat dinamis dan tidak statis, artinya Anda dapat memodifikasi objek prototipe dengan menambahkan atau menghapus properti dan metode, dan objek yang diturunkan darinya akan diperbarui untuk mencerminkan perubahan.

Meskipun paradigma pewarisan berbasis prototipe dalam JavaScript memiliki potensi untuk menjadi lebih fleksibel dan kuat daripada pewarisan berbasis kelas, ini juga bisa menjadi lebih rumit dan sulit untuk dipahami. Untuk menggunakan dan membuat objek dengan benar dalam JavaScript, seseorang harus memiliki pemahaman yang kuat tentang pewarisan berbasis prototipe.

5. Kari

Currying dalam JavaScript adalah teknik yang memungkinkan aplikasi sebagian dari suatu fungsi dengan mengisi beberapa argumennya terlebih dahulu. Ini memungkinkan panggilan fungsi untuk digunakan kembali dan fleksibel.

Pertimbangkan fungsi yang menerima dua argumen x dan y dan mengembalikan totalnya sebagai contoh.

Dengan menggunakan closure, kita dapat mengubah fungsi ini menjadi fungsi kari yang menerima argumen yang tersisa.

Dalam ilustrasi ini, penggunaan awal add(2) menghasilkan fungsi baru yang menerima argumen terakhir, y. Karena nilai x dan y masing-masing sudah diatur ke 2 dan 3, ketika add2(3) dipanggil, hasilnya adalah 5.

Fungsi spread operator dan panah juga dapat digunakan untuk mencapai kari. Mari kita lihat contoh di bawah ini:

Dalam ilustrasi ini, pemanggilan pertama ke add(2) menghasilkan fungsi panah baru yang menambahkan x dan y ke argumen yang tersisa, terlepas dari nomornya.

Currying dapat meningkatkan kegunaan kembali dan keterbacaan kode sekaligus memungkinkan pemanggilan fungsi menjadi lebih fleksibel.

6. Fungsi Tingkat Tinggi

Fungsi tingkat tinggi dalam JavaScript adalah fungsi yang menerima satu atau lebih fungsi sebagai argumen dan/atau mengembalikan fungsi lain sebagai keluarannya. Karena dapat digunakan sebagai variabel atau nilai lain, fungsi ini juga disebut sebagai "fungsi kelas satu". Istilah "tingkat tinggi" menunjukkan tingkat abstraksi yang lebih tinggi daripada fungsi JavaScript biasa.

Beberapa contoh fungsi tingkat tinggi adalah:

Saya. Array.prototype.map(): Fungsi ini menerapkan fungsi callback ke setiap elemen array yang diterimanya sebagai argumen, mengembalikan array baru dengan hasilnya.

ii. Array.prototype.filter(): Fungsi ini menerima fungsi callback sebagai argumen dan menerapkannya ke setiap elemen array, mengembalikan array baru hanya dengan elemen yang lulus ujian.

aku aku aku. Array.prototype.reduce(): Fungsi ini menggunakan fungsi callback sebagai argumen dan menerapkannya ke setiap elemen array, mengumpulkan hasilnya menjadi satu nilai.

iv. Array.prototype.forEach(): Fungsi ini adalah metode iteratif , dan memanggil fungsi callback yang disediakan satu kali untuk setiap elemen dalam array dalam urutan indeks menaik.

v. setTimeout(): Fungsi ini menerima fungsi callback sebagai input dan menjadwalkan eksekusinya untuk jangka waktu tertentu di masa mendatang.

vi. Promise.then(): Fungsi ini menerima fungsi panggilan balik sebagai masukan dan menjadwalkan eksekusinya saat janji diselesaikan.

Fungsi tingkat tinggi ini menawarkan mekanisme untuk mengabstraksi logika dan fungsionalitas dengan meneruskannya sebagai variabel atau argumen, memungkinkan kode yang lebih mudah beradaptasi dan dapat digunakan kembali. Misalnya, jika Anda ingin array angka hanya mengembalikan angka genap, Anda dapat menggunakan metode urutan tinggi filter().

Fungsi filter() dalam contoh ini menerima fungsi anonim sebagai panggilan balik dan menggunakannya untuk menentukan apakah setiap elemen dalam larik genap sebelum mengembalikan hanya bilangan genap.

7. Generator

Ini adalah jenis fungsi khusus dalam JavaScript yang memungkinkan jeda eksekusi dan memulai ulang. Mereka sangat membantu saat bekerja dengan iterator dan program asinkron karena memungkinkan Anda membuat urutan nilai dari waktu ke waktu.

Fungsi generator didefinisikan menggunakan kata kunci function* dan menggunakan kata kunci hasil untuk menjeda eksekusi dan mengembalikan nilai. Saat fungsi generator dipanggil, ia menghasilkan objek iterator yang dapat digunakan untuk mengontrol eksekusi generator.

Dengan asumsi kita ingin membuat fungsi generator yang mengembalikan angka berikutnya dalam deret Fibonacci:

Pada contoh di atas, kata kunci function* digunakan untuk mendeklarasikan fungsi generator fibonacci(). Ini menggunakan kata kunci hasil untuk mengembalikan nilai a saat ini dan memperbarui nilai a dan b menggunakan tugas penghancuran. While loop memastikan bahwa generator akan terus menghasilkan nilai baru tanpa batas.

Fungsi generator, saat dipanggil, mengembalikan objek iterator yang dapat digunakan untuk mengontrol eksekusi generator. Metode next() digunakan untuk melanjutkan eksekusi dan mengembalikan nilai berikutnya.

Kumpulan data besar, kode asinkron, iterator, dan urutan tak terbatas semuanya dapat diimplementasikan dengan bantuan generator. Tanpa harus memuat semua data ke dalam memori sekaligus, mereka memungkinkan Anda menghasilkan rangkaian nilai dari waktu ke waktu.

8.WeakMaps dan WeakSets

Mirip dengan Map di JavaScript, WeakMap adalah tipe pengumpulan data yang memungkinkan Anda menyimpan key-value pair. Perbedaan penting adalah bahwa kunci dalam WeakMap direferensikan dengan lemah, yang berarti mereka dapat menjadi sampah yang dikumpulkan jika tidak ada referensi lain untuk mereka. WeakMap dapat digunakan untuk menyimpan data yang tidak ingin Anda simpan di memori jika tidak lagi digunakan.

Di sisi lain, WeakSet mirip dengan Set tetapi menunjukkan perilaku referensi lemah yang sama untuk komponennya. Ini berarti bahwa jika tidak ada referensi lain ke elemen di WeakSet, itu bisa menjadi sampah yang dikumpulkan.

Berikut adalah contoh penggunaan WeakMap di JavaScript:

Dalam contoh di atas, kami membuat WeakMap dan menyimpan key-value pair dengan objek yang berfungsi sebagai kuncinya. Kami kemudian menggunakan objek sebagai kunci untuk mendapatkan nilai. Pasangan kunci-nilai juga dihilangkan dari WeakMap saat kita menyetel objek ke null, membuatnya cocok untuk pengumpulan sampah.

Namun, contoh dari WeakSet ditunjukkan di bawah ini:

Dalam contoh ini, dua objek ditambahkan ke WeakSet yang telah dibuat. Metode has() kemudian digunakan untuk menentukan apakah objek tertentu ada di set. Objek pertama dikeluarkan dari WeakSet dan memenuhi syarat untuk pengumpulan sampah setelah kita menyetelnya ke null.

Baik WeakMap dan WeakSet berguna untuk mengelola penggunaan memori JavaScript karena memungkinkan Anda menyimpan informasi tanpa menyimpannya di memori secara permanen.

9. Proksi

Objek yang berfungsi sebagai perantara antara kode yang mengaksesnya dan objek dasar yang diwakilinya dikenal sebagai proxy. Mereka memberi Anda kemampuan untuk memodifikasi dan mencegat operasi yang dilakukan pada objek yang mendasarinya, seperti pemanggilan metode, konstruktor, dan akses properti.

Kode berikut adalah contoh bagaimana proxy dapat digunakan untuk mencegat akses properti:

Dalam contoh ini, objek bernama obj dibungkus dengan objek Proxy. Untuk menangani akses dan penugasan properti, kami mendefinisikan dua fungsi "handler", " get " dan " set ". Kami dapat mencegat dan mengubah perilaku objek yang mendasarinya menggunakan fungsi-fungsi ini. Fungsi “ get ” akan dipanggil, pesan akan dicatat, dan nilai properti “ nama ” dari objek asli akan dikembalikan saat kita mengakses properti name dari objek proxy.

Proxy dapat digunakan untuk berbagai keperluan, seperti:

• Menerapkan pengakses properti khusus
• Menerapkan pemanggilan metode kustom
• Menerapkan konstruktor khusus
• Menerapkan perilaku khusus untuk objek "virtual".
• Menerapkan perilaku khusus untuk objek yang ada
• Menerapkan penanganan kesalahan khusus
• Menerapkan fitur keamanan khusus

10. Refleksikan API

Mirip dengan cara Anda menggunakan operator dan fungsi bawaan JavaScript, JavaScript Reflect API menawarkan sejumlah metode yang memungkinkan Anda melakukan berbagai tindakan pada objek. Perbedaan utama adalah bahwa operator dan fungsi bawaan sering mengembalikan hasil operasi, sedangkan metode Reflect API biasanya mengembalikan Boolean yang menunjukkan keberhasilan atau kegagalan operasi.

Mari kita lihat contoh di bawah ini:

Dalam contoh ini, properti “nama” pada objek obj disetel ke nilai “John” menggunakan metode Reflect.set(). Ketika operasi menjadi sukses, metode kembali benar.

Berikut adalah contoh lain cara menggunakan Reflect API untuk menentukan apakah suatu objek dapat diperluas atau tidak:

Contoh ini menunjukkan cara memeriksa ekstensibilitas objek menggunakan metode Reflect.isExtensible(). Karena sifatnya yang dapat diperluas secara default, ini awalnya mengembalikan true. Setelah itu, kami menggunakan Object.preventExtensions(obj) untuk menghentikan perpanjangan objek. Selanjutnya, kita menggunakan Reflect.isExtensible(obj) sekali lagi, yang mengembalikan false untuk menunjukkan bahwa objek tidak lagi dapat diperluas.

Reflect API menyediakan sejumlah metode, seperti:

• Refleksikan.dapatkan()
• Reflect.set()
• Reflect.has()
• Reflect.deleteProperty()
• Reflect.defineProperty()
• Reflect.getOwnPropertyDescriptor()
• Reflect.getPrototypeOf()
• Reflect.setPrototypeOf()
• Reflect.preventExtensions()
• Reflect.isExtensible()
• Reflect.apply()
• Reflect.construct()

Kesimpulannya, menguasai JavaScript memerlukan pemahaman yang kuat tentang berbagai konsep dan teknik. Konsep yang dibahas dalam artikel ini, seperti penutupan, prototipe, fungsi tingkat tinggi hanyalah beberapa dari sekian banyak yang penting untuk memahami cara kerja JavaScript dan cara menulis kode yang efisien dan efektif. Selain itu, memahami cara menggunakan fitur modern seperti Promises, async/await, WeakMap dan WeakSet, Proxies, dan Reflect API, yang juga dibahas di sini, dapat membantu Anda menulis kode JavaScript yang lebih modern dan kuat. Dengan meluangkan waktu untuk sepenuhnya memahami konsep-konsep ini dan cara kerjanya, Anda bisa menjadi pengembang JavaScript yang lebih mahir dan percaya diri.