JAVASCRIPT (ES6) OLEH: AHMAD FAISOL, ST.

,
ARROW FUNCTION, PROMISE, MT.
MODULE
ARROW FUNCTION
ES6 MEMPERKENALKAN FUNGSI BARU DENGAN NAMA ARROW
FUNCTION EXPRESSION ATAU LEBIH DIKENAL SEBAGAI ARROW
FUNCTION
SECARA PERILAKU, ARROW FUNCTION MIRIP SEPERTI REGULAR
FUNCTION, HANYA CARA PENULISANNYA YANG JAUH BERBEDA
FUNGSI INI DIDEFINISIKAN DENGAN MENGGUNAKAN TANDA PANAH
(=>)
REGULAR FUNCTION VS
ARROW FUNCTION
REGULAR FUNCTION VS
ARROW FUNCTION
SELAIN PERBEDAAN DARI SEGI SINTAKS,
TERDAPAT JUGA PERBEDAAN PERILAKU
ANTARA KEDUANYA.
REGULAR FUNCTION DAPAT BERUPA
FUNCTION DECLARATION ATAU FUNCTION
EXPRESSION, NAMUN ARROW FUNCTION
HANYA BERUPA FUNCTION EXPRESSION SA JA.
ITU SEBABNYA ARROW FUNCTION MEMILIKI
NAMA LENGKAP “ARROW FUNCTION
EXPRESSIONS”.
FUNCTION PARAMETER
PADA PENGGUNAAN ARROW FUNCTION, VARIABEL YANG DILETAKKAN
SEBELUM TANDA PANAH (=>) ADALAH PARAMETER DARI FUNGSI
JIKA TERDAPAT LEBIH DARI SATU VARIABEL / PARAMETER, MAKA
HARUS DIBUNGKUS DI DALAM TANDA KURUNG
JIKA TIDAK MEMBUTUHKAN PARAMETER, BIARKAN SAJA TANDA
KURUNG TERSEBUT KOSONG
BODY FUNCTION
PADA CONTOH ARROW FUNCTION SEBELUMNYA, HANYA MENULISKAN
SATU BUAH EXPRESSION SEHINGGA PENULISANNYA BISA SANGAT
RINGKAS.
NAMUN BAGAIMANA JIKA DALAM SEBUAH FUNGSI TERDAPAT BANYAK
LOGIKA DI DALAMNYA? APAKAH BISA DITULISKAN MENGGUNAKAN
ARROW FUNCTION?
SAMA SEPERTI REGULAR FUNCTION, PADA ARROW FUNCTION TANDA
KURUNG KURAWAL BERFUNGSI SAMA SEPERTI REGULAR FUNCTION YAKNI
MENAMPUNG BODY FUNCTION DI MANA TEMPAT LOGIKA FUNGSI
DITULISKAN (LEBIH DARI SATU BARIS)
PENULISAN TANDA KURUNG KURAWAL MENJADI OPSIONAL KETIKA BODY
FUNCTION HANYA TERDIRI DARI SATU EXPRESSION ATAU STATEMENT SAJA
BODY FUNCTION

TERKADANG, KEYWORD RETURN JUGA PERLU DITULISKAN KEMBALI

AGAR FUNGSI TERSEBUT MENGEMBALIKAN SEBUAH NILAI
DEFAULT PARAMETERS
DEFAULT PARAMETERS PADA FUNGSI BERGUNA AGAR NILAI PADA
PARAMETER TIDAK AKAN MENGHASILKAN UNDEFINED WALAUPUN
KITA TIDAK MEMBERIKAN NILAI KETIKA FUNGSI TERSEBUT
DIPANGGIL.
DEFAULT PARAMETER DAPAT DIGUNAKAN PADA REGULAR FUNCTION
ATAUPUN ARROW FUNCTION.
PROMISE
SYNCHRONOUS VS ASYNCHRONOUS
DALAM SYNCHRONOUS PROGRAM, JIKA KITA MENULISKAN DUA BARIS KODE
MAKA BARIS KODE YANG KEDUA TIDAK BISA DIEKSEKUSI SEBELUM KODE PADA
BARIS PERTAMA SELESAI DIEKSEKUSI
DALAM ASYNCHRONOUS PROGRAM, JIKA KITA MENULISKAN DUA BARIS KODE,
KITA DAPAT MEMBUAT BARIS KODE KEDUA DIEKSEKUSI TANPA HARUS MENUNGGU
KODE PADA BARIS PERTAMA SELESAI DIEKSEKUSI
URUTAN DI MANA SEBUAH KODE DIEKSEKUSI, TIDAK MEMILIKI JAMINAN BAHWA
KODE TERSEBUT SELESAI TERLEBIH DAHULU. BISA SAJA EKSEKUSI KODE
TERSEBUT LEBIH LAMA DARI KODE YANG LAIN.
JADI, DALAM PROGRAM YANG DIJALANKAN SECARA ASYNCHRONOUS, TASK YANG
KECIL AKAN LEBIH DAHULU SELESAI DIBANDINGKAN DENGAN TASK YANG BESAR,
MESKIPUN TASK YANG BESAR LEBIH DAHULU DIJALANKAN
DEFINISI PROMISE
PROMISE MERUPAKAN SALAH SATU FITUR PENTING DARI ES6 YANG MENGGUNAKAN
FUNGSI .then() UNTUK MEMBUAT JANJI
MARI KITA ANALOGIKAN DALAM DUNIA NYATA. KETIKA KITA MEMESAN KOPI KEPADA
PELAYAN, MAKA SECARA TIDAK LANGSUNG PELAYAN TERSEBUT BERJANJI KEPADA
KITA UNTUK MEMBUATKAN KOPI KEMUDIAN MENGHIDANGKANNYA PADA KITA.
NAMUN JANJI BISA HANYA TINGGAL JANJI. DALAM DUNIA NYATA PUN, JANJI BISA
JUGA TIDAK TERPENUHI, ENTAH ITU KARENA KOPI PESANAN KITA SEDANG KOSONG,
ATAU MESIN PEMBUAT KOPI ITU SEDANG RUSAK.
NAH, PROMISE MEMILIKI PERILAKU YANG SAMA DENGAN ANALOGI YANG
DIGAMBARKAN TADI.
DALAM PROMISE TERDAPAT 3 (TIGA) KONDISI :
 PENDING (JANJI SEDANG DALAM PROSES)
 FULFILLED (JANJI TERPENUHI)
 REJECTED (JANJI GAGAL TERPENUHI)
OBJECT PROMISE
UNTUK MEMBUAT OBJEK PROMISE, GUNAKAN KEYWORD NEW DIIKUTI
DENGAN CONSTRUCTOR DARI PROMISE
DI DALAM CONSTRUCTOR PROMISE, HARUS DITENTUKAN RESOLVER
FUNCTION ATAU BISA DISEBUT EXECUTOR FUNCTION DI MANA FUNGSI
TERSEBUT AKAN DIJALANKAN SECARA OTOMATIS KETIKA CONSTRUCTOR
PROMISE DIPANGGIL.
OBJECT PROMISE (EXAMPLE)
OBJECT PROMISE (EXECUTOR
FUNCTION)
EXECUTOR FUNCTION DAPAT MEMILIKI DUA PARAMETER, YANG BERFUNGSI
SEBAGAI resolve() DAN reject() FUNCTION
resolve() ADALAH PARAMETER PERTAMA PADA EXECUTOR FUNCTION. PARAMETER INI
MERUPAKAN FUNGSI YANG DAPAT MENERIMA SATU PARAMETER, BIASANYA
DIGUNAKAN UNTUK MENGIRIMKAN DATA KETIKA PROMISE BERHASIL DILAKUKAN.
KETIKA FUNGSI INI TERPANGGIL, KONDISI PROMISE AKAN BERUBAH
DARI PENDING MENJADI FULFILLED
reject() ADALAH PARAMETER KEDUA PADA EXECUTOR FUNCTION. PARAMETER INI
MERUPAKAN FUNGSI YANG DAPAT MENERIMA SATU PARAMETER YANG DIGUNAKAN
UNTUK MEMBERIKAN ALASAN MENGAPA PROMISE TIDAK DAPAT TERPENUHI. KETIKA
FUNGSI INI TERPANGGIL, KONDISI PROMISE AKAN BERUBAH
DARI PENDING MENJADI REJECTED
EXECUTOR FUNCTION AKAN BERJALAN SECARA ASYNCHRONOUS HINGGA AKHIRNYA
KONDISI PROMISE BERUBAH DARI PENDING MENJADI FULFILLED/REJECTED.
FUNGSI ONFULFILLED DAN
ONREJECTED
UNTUK MENANGANI NILAI YANG DIKIRIMKAN OLEH resolve() KETIKA
PROMISE onFulfilled atau onRejected, GUNAKAN METHOD .then() PADA
OBJEK PROMISE YANG DIBUAT DENGAN PARAMETER BERUPA
FUNCTION YANG BERGUNA SEBAGAI HANDLE CALLBACK
ONREJECTED MENGGUNAKAN
CATCH METHOD
METHOD .catch() MIRIP SEPERTI .then(), NAMUN METHOD INI HANYA
MENERIMA SATU PARAMETER FUNCTION YANG DIGUNAKAN
SEBAGAI REJECTED HANDLER.
METHOD .catch() AKAN TERPANGGIL BILAMANA OBJEK PROMISE
MEMILIKI KONDISI onRejected
ASYNC/AWAIT
SEJAK ES8 (ECMAScript 2017) KITA DAPAT
MENULISKAN ASYNCHRONOUS PROCESS LAYAKNYA SYNCHRONOUS
PROCESS DENGAN BANTUAN KEYWORD async dan await
MENANGANI ONREJECTED
MENGGUNAKAN ASYNC/AWAIT
PERLU JADI CATATAN BAHWA AWAIT
HANYA AKAN MENGEMBALIKAN
NILAI JIKA PROMISE BERHASIL
DILAKUKAN (ONFULFILLED).
LANTAS BAGAIMANA JIKA PROMISE
GAGAL DILAKUKAN (ONREJECTED)?
KEMBALI LAGI KEPADA
PRINSIP SYNCHRONOUS CODE. KITA
DAPAT MENANGANI SEBUAH EROR
ATAU TOLAKAN DENGAN
MENGGUNAKAN TRY...CATCH.
MODULE
DENGAN APLIKASI YANG TERUS BERKEMBANG, DIMANA SELURUH
KODE JAVASCRIPT TIDAK MUNGKIN DITULIS HANYA PADA SATU
BERKAS SAJA.
DI SINILAH PERLU MEMBUAT SEBUAH MODUL JAVASCRIPT, YANG
TUJUANNYA UNTUK MENGHUBUNGKAN BERKAS JAVASCRIPT YANG
TERPISAH AGAR DAPAT SALING DIGUNAKAN SATU SAMA LAIN
DENGAN MENGGUNAKAN MODULE, KITA DAPAT
MELAKUKAN IMPORT MAUPUN EXPORT VARIABEL, CLASS, OBJECT,
ARRAY, ATAU DATA APAPUN.
JAVASCRIPT MODULE BERSIFAT REUSABLE SEHINGGA DAPAT
DIGUNAKAN PADA BANYAK APLIKASI YANG KITA BUAT.
EKSPOR DAN IMPOR MODUL
PADA NODE.JS
DALAM ENVIRONMENT NODE.JS,
UNTUK
MELAKUKAN IMPORT DAN EXPORT M
ODULE, HARUS
MENGGUNAKAN MODULE.EXPORTS.
SETIAP BERKAS JAVASCRIPT YANG
BERJALAN PADA NODE, MEMILIKI
OBJEK MODULE LOKAL YANG
MEMILIKI PROPERTI EXPORTS
PROPERTI TERSEBUT DIGUNAKAN
UNTUK MENDEFINISIKAN NILAI APA
YANG AKAN DIEKSPOR DARI BERKAS
TERSEBUT.
EKSPOR BANYAK NILAI
SEBENARNYA NILAI YANG DIEKSPOR TETAP SATU, NAMUN JIKA TERDAPAT KASUS
AKAN MENGEKSPOR LEBIH DARI SATU NILAI, MAKA BISA MENGGUNAKAN OBJECT
LITERALS {}
ES6 MODULE
JIKA KITA BERADA DI LUAR ENVIRONMENT NODE.JS, SEPERTI BROWSER, KITA TETAP
BISA MELAKUKAN IMPOR DAN EKSPOR MODULE JAVASCRIPT DENGAN
MENGGUNAKAN KEYWORD IMPORT DAN EXPORT YANG TERSEDIA MULAI DARI ES6
SEBELUM ADANYA FITUR INI, KITA HANYA MENGGUNAKAN TAG <script> PADA HTML
UNTUK MENGGUNAKAN BERKAS JAVASCRIPT
SEMAKIN BANYAK BERKAS JAVASCRIPT YANG DIGUNAKAN, SEMAKIN BANYAK PULA
TAG <SCRIPT> DITULISKAN. NAH, DENGAN MENGGUNAKAN FITUR EXPORT DAN
IMPORT, KITA CUKUP MENGGUNAKAN SATU TAG <script> YANG MERUPAKAN BERKAS
JAVASCRIPT UTAMA (BIASANYA DIBERI NAMA main.js, app.js, ATAU index.js).
PADA SAAT INI, FITUR ES6 MODULE STANDARNYA TIDAK DIAKTIFKAN PADA BROWSER.
NAMUN KITA DAPAT MENGAKTIFKAN FITUR INI DENGAN MUDAH, YAKNI DENGAN
MENAMBAHKAN ATTRIBUTE type=”module” PADA TAG <script> YANG KITA GUNAKAN.
EKSPOR IMPOR ES6 MODULE
EKSPOR IMPOR ES6 MODULE
(BANYAK NILAI)