MENJADI JAVASCRIP

T
JAVASCRIPT
DEVELOPER
DEVELOPER
Bahrul Rozak

FROM
ZERO TO MASTER Menjadi JavaScript Developer - Bahrul Rozak
Daftar Isi

Pendahuluan ..............................................................................................................................................4
Penulisan Kode JavaScript ......................................................................................................................... 5
Komentar Pada JavaScript ......................................................................................................................... 7
Tipe Data Number ..................................................................................................................................... 8
Tipe Data Boolean ..................................................................................................................................... 8
Tipe Data String ......................................................................................................................................... 9
Apa itu Variabel? ....................................................................................................................................... 9
Operator Matematika ..............................................................................................................................12
Operator Logika ....................................................................................................................................... 13
Operator Perbandingan ...........................................................................................................................15
Console .................................................................................................................................................... 15
Template Literal .......................................................................................................................................16
String to Number ..................................................................................................................................... 17
Array ........................................................................................................................................................ 19
Object ...................................................................................................................................................... 21
If Expression .............................................................................................................................................22
Pop Up ..................................................................................................................................................... 23
Undefined ................................................................................................................................................ 26
Null ...........................................................................................................................................................26
Switch Expression .................................................................................................................................... 27
Operator Typeof ...................................................................................................................................... 28
In Operator .............................................................................................................................................. 28
Ternary Operator .....................................................................................................................................29
Nullish Coalescing ....................................................................................................................................30
Optional Chaining Operator .................................................................................................................... 31
Thruthy dan falsy .....................................................................................................................................33
Operator Logika Non Boolean ................................................................................................................. 34
For Loop ...................................................................................................................................................36
While Loop ...............................................................................................................................................38
Do While Loop ......................................................................................................................................... 38
Break dan Continue ................................................................................................................................. 39
Label ........................................................................................................................................................ 41
For In ........................................................................................................................................................43
For Of ....................................................................................................................................................... 44
With Statement ....................................................................................................................................... 44
Function ................................................................................................................................................... 46
Function Parameter .................................................................................................................................47
Function Return Value .............................................................................................................................49
Optional Parameter ................................................................................................................................. 50
Default Parameter ................................................................................................................................... 51
Function Sebagai value ............................................................................................................................51
Anonymous Function ...............................................................................................................................52
Function di dalam Function ..................................................................................................................... 53
Scope ....................................................................................................................................................... 54
Recursive Function .................................................................................................................................. 55
Function Generator ................................................................................................................................. 55
Arrow Function ........................................................................................................................................56
Closure .....................................................................................................................................................58
Object Method ........................................................................................................................................ 59
This ...........................................................................................................................................................60

Menjadi JavaScript Developer - Bahrul Rozak

Arrow Function pada Object ................................................................................................................... 61
Getter dan Setter .....................................................................................................................................61
Mengapa Var Hilang? .............................................................................................................................. 63
Destructuring ...........................................................................................................................................64
Strict Mode .............................................................................................................................................. 67
Spread Operator ...................................................................................................................................... 67
Map ..........................................................................................................................................................68
Set ............................................................................................................................................................70
Splicing Array ........................................................................................................................................... 72
Sorting Array ............................................................................................................................................73
Joining Array ............................................................................................................................................ 74
Apa itu Object Oriented Programming? ..................................................................................................74
Constructor Function ...............................................................................................................................77
Property di Constructor Function ............................................................................................................79
Method di Constructor Function .............................................................................................................80
Parameter di Constructor Function .........................................................................................................81
Constructor Inheritance .......................................................................................................................... 82
Prototype .................................................................................................................................................83
Prototype Inheritance ............................................................................................................................. 85
Keyword Class ..........................................................................................................................................85
Constructor pada Class ............................................................................................................................87
Property pada Class ................................................................................................................................. 87
Method di Class ....................................................................................................................................... 88
Class Inheritance ......................................................................................................................................89
Super Constructor ................................................................................................................................... 90
Super Method ..........................................................................................................................................91
Getter dan Setter di Class ........................................................................................................................92
Public Class Field ......................................................................................................................................93
Private Class .............................................................................................................................................94
Private Method ........................................................................................................................................95
Operator Instaceof .................................................................................................................................. 96
Static Class Field ...................................................................................................................................... 97
Static Method .......................................................................................................................................... 98
Error .........................................................................................................................................................99
Error Handling ....................................................................................................................................... 100
Manual Class Error .................................................................................................................................101
Built in Class ...........................................................................................................................................102
Mengenal Functional Programming ......................................................................................................103
Pure Function ........................................................................................................................................ 104
Immutability .......................................................................................................................................... 105
Recursive ............................................................................................................................................... 105
High Order Function .............................................................................................................................. 106
JavaScript Module ................................................................................................................................. 107
Melakukan Import & Export Module .................................................................................................... 111
Pembuatan Variable untuk Module ...................................................................................................... 113
Pembuatan Class suatu Module ............................................................................................................114
Export Multiple suatu Module .............................................................................................................. 114
Pembuatan Alias suatu Module ............................................................................................................ 115
Module Object .......................................................................................................................................117
Aggregating Module .............................................................................................................................. 118
Dynamic Module Loading ......................................................................................................................118
Document Object Model ....................................................................................................................... 119
Tipe data pada DOM ..............................................................................................................................120
Lebih Banyak Tipe Data DOM ................................................................................................................123
NamedNodeMap ................................................................................................................................... 127
TextNode ............................................................................................................................................... 128
Event Handler ........................................................................................................................................ 129

Menjadi JavaScript Developer - Bahrul Rozak

Event ......................................................................................................................................................130
Style ....................................................................................................................................................... 131
InnerText dan InnerHTML ..................................................................................................................... 131
Window ................................................................................................................................................. 133
Query Selector .......................................................................................................................................134
NodeType .............................................................................................................................................. 137
HTML Element ....................................................................................................................................... 137
HTML Form Element ..............................................................................................................................138
HTML Element Table ............................................................................................................................. 139
JavaScript Async .................................................................................................................................... 139
Apa itu Promise? ................................................................................................................................... 144
Promise Method ....................................................................................................................................146
Fetch API ................................................................................................................................................148

Menjadi JavaScript Developer - Bahrul Rozak

Pendahuluan

JavaScript atau biasa disingkat JS adalah salah satu bahasa pemrograman yang kerap kali digunakan di
sisi client untuk membuat website menjadi lebih interaktif, namun kini JavaScript bukan hanya
berjalan di sisi client saja (browser), akan tetapi setelah kemunculan Nodejs kini JavaScript dapat
berjalan di luar lingkungan nya (browser).

Sekedar informasi Nodejs adalah sebuah runtime environment untuk meng eksekusi kode Javascript
diluar Browser, dengan kemampuan nya kini hanya dengan bermodalkan satu bahasa yaitu JavaScript
Anda sudah bisa menjadi seorang Fullstack Developer wah keren ya! Kemudian bagi Anda yang ingin
mempelajari bahasa pemrograman, Javascript patut masuk ke dalam list daftar bahasa yang akan
Anda pelajari. Mengapa? Karena resource atau sumber belajar JavaScript itu banyak sekali termasuk
di blog ini hehehe.

Kemudian kita tidak perlu melakukan banyak konfigurasi untuk mempelajari JavaScript, mengapa?
Karena dia adalah bahasa scripting language artinya JavaScript cukup memerlukan penerjemah atau
interepreter saja dalam hal ini interpreter nya adalah Browser, anda bisa menggunakan Browser
apapun dan yang menariknya adalah semua browser sudah disupport oleh EcmaScript yang mana
semua Browser akan mengacu pada standar EcmaScript tersebut, sehingga antar Browser tidak akan
menjalankan kode JavaScript dengan versi yang berbeda-beda. Berbeda kalau kita mempelajari Java
kita harus melakukan konfigurasi SDK barulah kita bisa membuat kode Java dan menjalankannya.

Page 4 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Penulisan Kode JavaScript

Langkah awal untuk mempelajari suatu bahasa pemrograman yaitu menulis syntax. Mengapa? Karena
pada dasarnya untuk memberikan instruksi kepada komputer, satu satunya cara yang paling umum
adalah dengan menulis perintah atau instruksi sesuai dengan yang kita kehendaki Langsung saja,
silahkan teman-teman buat folder dengan nama learn-js. Folder ini nantinya akan berfungsi sebagai
tempat atau wadah untuk menampung segala macam module, file, asset dan sebagainya

Setelah itu silahkan kamu buka dan import folder tersebut ke dalam kode editor favorite atau yang
biasa yang sering digunakan, disini saya menggunakan Visual Studio Code.

Setelah itu mari kita buat file ber extensi atau berformat .html. Selanjutnya kita masukkan generic
structure dari HTML seperti berikut.

Kemudian kita masukkan script JavaScript nya. Et! Sebelum menulis script JavaScript nya ada rule,
aturan atau SOP yang harus kita ikuti. Menulis kode pada JavaScript dapat kita lakukan dengan dua

Page 5 of 150 Menjadi JavaScript Developer - Bahrul Rozak

cara yaitu internal dan external. Lantas apa sih perbedaanya? Menulis kode JavaScript internal secara
sederhana artinya kita menuliskan kode JavaScript langsung di dalam file HTML nya. Contohnya
seperti berikut.

Perintah [Link](“JavaScript Internal”) secara sederhana akan menampikan tulisan

JavaScript internal yang berinteraksi pada dokumen HTML dan akan muncul pada Browser. Ketika kita
jalankan pada Browser maka akan seperti berikut.

Selamat! Anda telah berhasil membuat dan menampilkan file JavaScript secara internal. Akan tetapi
ketika kita menuliskan file JavaScript secara internal ada beberapa kekurangan diantaranya kode yang
kita buat akan sangat sulit dilakukan maintenance dan tentu saja hal ini akan mengurangi
produktivitas kita sebagai pengembang. Oleh karena itu penulisan file JavaScript secara internal
sebisa mungkin dihindari, namun karena kita masih belajar tidak masalah

Lalu solusinya bagaimana? Gunakanlah JavaScript External, cara ini sangat direkomendasikan karena
kita membuat file JS diluar file HTML alias terpisah, dengan cara ini kita akan mendapatkan file JS yang
mudah di maintenance dan biasanya pada kasus dilapangan kita akan memisahkan file menjadi
beberapa module sehingga produktivitas kita sebagai pengembang akan meningkat dan tentu saja
membuat kita bahagia

Silahkan buat file bernama [Link] kemudian tambahkan script berikut.

Setelah itu jangan lupa untuk include file JS ke dalam file HTML dengan perintah <script
src=”lokasifilenya”></script>. Maka seperti ini keseluruhan kode pada HTMLnya.

Page 6 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kita jalankan dan akan tampil seperti berikut.

Komentar Pada JavaScript

Komentar merupakan fitur yang hampir ada disemua bahasa pemrograman. Dengannya kita bisa
menonaktifkan sebuah fungsi, membuat informasi tambahan tanpa harus menggangu alur dari
aplikasi yang sedang kita buat

Pada JavaScript membuat komentar dilakukan dengan 2 cara yaitu inline dan multiline, kira-kira apa
sih perbedaanya?

Untuk membuat inline komentar pada JavaScript kita letakkan tanda // kemudian komentar yang kita
inginkan contoh

Sedangkan multiline komentar merupakan kebalikan dari inline komentar, untuk membuatnya kita
letakkan komentar yang ingin kita buat di dalam tanda /* */. Contohnya seperti berikut

Page 7 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Oke! Tadi sempat saya ulas sedikit bahwa dengan komentar kita dapat menonaktifkan sebuah fungsi
atau program, sekarang coba tuliskan script berikut.

Tipe Data Number

Sebelum kita lanjut, mari kita bahas tentang Tipe Data terlebih dahulu. Tipe data secara sederhana
adalah bentuk representasi dari sebuah data. Dalam bahasa pemrograman ada banyak sekali tipe
data mulai dari bilangan bulat, desimal dan sebagainya. Namun uniknya JavaScript, beliau ini
merepresentasikan semua tipe data tersebut ke dalam satu tipe data yang sama yaitu Number. Hal ini
dikarenakan JavaScript memiliki sifat dynamically language artinya JavaScript tidak terpaku pada jenis
tipe data yang digunakan. Contohnya sebagai berikut.

Tipe Data Boolean

Tipe Data Boolean merupakan tipe data yang berisi nilai kebenaran yaitu true dan false, benar
direpresentasikan dengan nilai true dan salah direpresentasikan dengan nilai false. Walaupun tipe
data ini sangat sederhana sekali, nyatanya akan sangat banyak digunakan ketika kita membuat alur
aplikasi program yang kompleks.

Page 8 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Tipe Data String

Tipe data string sering juga disebut sebagai tipe data teks, tipe data ini tanpa kita sadari sudah
digunakan pada materi sebelumnya yaitu [Link](“JavaScript Internal”); Lantas yang mana
tipe datanya? Tipe data string pada JavaScript dibuat dengan menggunakan tanda kutip satu atau dua,
namun disarankan konsisten

Selain itu pada tipe data string kita bisa melakukan operasi bernama string concatenation, secara
sederhana yaitu melakukan penggabungan nilai string menggunakan operator plus (+). Contohnya
seperti ini.

Fun fact!
JavaScript mengaibakan semicolon atau titik koma,jadi kita bisa tidak harus menggunakan titik koma
diakhir statement, namun disarankan konsisten.

Apa itu Variabel?

Sebelum kita mengenal konsep variabel, mari simak sebuah kasus menarik. Katakanlah kita ingin
menampilkan teks atau tulisan “Hello Bahrul Rozak” sebanyak 10 kali. Maka cara yang paling
sederhana yang akan kita lakukan adalah sebagai berikut.

Page 9 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Ternyata berhasil! . Akan tetapi tiba-tiba kita hendak mengganti nilai-nilai tersebut, menjadi nama lain
misalkan “John”. Tentulah kita harus menggantinya satu persatu, ini masih mending! karena cuma 10
kali. Tapi kalau banyak bagaimana? Pasti kita akan ketar-ketir. Oleh karena itu dalam kasus ini kita
bisa memanfaatkan variabel.

Hmm kalau gitu, jadi apa itu variable?

Variabel secara sederhana adalah sebuah tempat atau wadah untuk kita menampung nilai atau data.
Nilai atau data ini bisa apa saja, misalkan angka, nama dan lain-lain. Dengan menggunakan variabel
kita bisa gunakan data tersebut berulang kali sesuai kehendak kita hanya dengan menyebutkan nama
variabelnya. Untuk membuat variabel pada JavaScript kita mengggunakan kata kunci var kemudian
diikuti dengan nama variabelnya. Contohnya sebagai berikut.

Di atas kita telah berhasil membuat variabel dengan nama username. proses pembuatan nama
variabel ini disebut sebagai deklarasi. Kemudian setelah kita deklarasi variabel, langkah selanjutnya
adalah mengisi atau memasukkan nilai ke dalam variabel tersebut dengan menggunakan operator
sama dengan =.

Sampai tahap ini kita telah mengisi (inisialisasi) nilai ke dalam variabel userName dengan nilai John
dengan tipe data string. Langkah selanjutnya untuk menggunakan variabel tersebut, kita cukup
panggil nama variabelnya saja. Contohnya sebagai berikut.

Selain itu variabel dapat kita update nilainya. Mengupdate nya kita tidak perlu deklarasi kembali nama
variabelnya, cukup inisialisasi nilainya saja. Contoh sebagai berikut.

Sekarang tugas kamu coba implementasikan hal yang telah kita pelajari pada studi kasus sebelumnya.

Ternyata ketika kita deklarasi variabel menggunakan kata kunci var, ada suatu masalah yang dapat
membuat developer kebingungan. Apa itu? Kita bisa deklarasi ulang variabel dengan nama yang sama
berkali-kali! Bahkan tidak terjadi error!.

Page 10 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Jika fenomena ini dibiarkan, maka code yang kita buat akan mengalami ambiguitas. Lantas solusinya
bagaimana?

Gunakanlah kata kunci let!

Let merupakan kata kunci, yang tersedia pada JavaScript mulai versi ES6. Bisa dikatakan let
merupakan penyempurna dari var. Sekarang coba kita lakukan hal yang sama namun dengan
menggunakan kata kunci let.

Sekilas tidak ada error, akan tetapi ketika kamu membuka fitur console, barulah pesan error muncul
disana. Mantap

Let secara otomatis akan berkata “Hei! variabel userName udah di deklarasi, kenapa kau deklarasi
ulang!” Kurang lebih seperti itu

Sama halnya seperti var, kita pun bisa mengupate nilai variabelnya

Selain let pada JS mulai versi ES6, kita bisa gunakan const untuk deklarasi variabel.

Berbeda dengan var dan let, const tidak bisa kita update nilainya. Karena const berarti constant yang
mana nilanya merupakan tetap.

Page 11 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Const pun berkata Macam mana pula kau ini? Masa const mau kau update nilainya.

Maka muncul pesan error bahwa variabel const tidak bisa kita lakukan assignment (update atau
masukkan nilai baru).

Best Practice

Ketika membuat variabel pada JavaScript ada beberapa best practice yang umumnya sudah menjadi
hal lumrah (conventional) dikalangan developer JavaScript yaitu sebagai berikut.

Membuat nama variabel menggunakan format camelCase contoh userName, userData,

phoneNumber dan lain-lain

Jangan membuat nama variabel menggunakan angka di awal contoh 1userName, 2userData

Jangan membuat nama variabel yang tidak mengandung makna, kasus ini biasanya terjadi ketika
masih tahap belajar dan itu wajar. Tapi usahakan jangan dilakukan lagi contohnya x, y. Kita tidak tahu
variabel x dan y itu merepresentasikan data apa. Berbeda dengan userName kita tahu oh ini berisi
nilai userName!.

Udah gitu aja

Operator Matematika

Di JavaScript kita bisa melakukan operasi matematika, seperti penjumlahan (+), pengurangan (-),
pembagian (/), perkalian (*) dan sisa bagi atau modulus (%).

Page 12 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Operator Logika

Merupakan operator untuk tipe data Boolean yang menghasilkan nilai Boolean kembali yaitu true dan
false. Operator ini terdiri dari Dan (&&) , Atau (||), Kebalikan (!)

Dan (&&)

Contohnya, Anda mendapatkan nilai ujian sebesar 80 dan nilai absensi sebesar 80, untuk memenuhi
kriteria lulus ujian minimal nilai yang harus Anda peroleh adalah 75, begitu pun dengan nilai Absen.
Jika kedua kriteria tersebut lolos alias bernilai benar maka Anda dinyatakan lulus ujian.

Atau (||)

Page 13 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Contoh, Tahukah Anda? Nama lain ponsel adalah gawai dalam bahasa Indonesia. Jadi Tidak salah jika
kita sebut nama lain dari ponsel adalah gawai hehe.

Kebalikan (!)

Contoh, silahkan kamu explore sendiri hehe.

Page 14 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Operator Perbandingan

Merupakan operator yang digunakan untuk melakukan perbandingan dari kedua nilai dan
menghasilkan nilai true dan false. Ada banyak sekali operator perbandingan yang dapat kita gunakan
yaitu.

Console

JavaScript memiliki fitur untuk melakukan logging bernama console logging adalah mekanisme yang
dilakukan oleh programmer untuk menampilkan informasi dari aplikasi yang sedang berjalan, tanpa
harus menggangu alur kerja aplikasi dan juga interaksi user untuk melakukan ini, kita bisa
menggunakan fitur bernama console untuk melakukan console, cukup gunakan perintah console. Ada
banyak sekali perintah console, diantaranya sebagai berikut.

[Link](…) Memberitahu informasi

[Link](…) Memberitahu informasi peringatan
[Link](…) Memberitahu informasi error
[Link](…) Memberitahu informasi dalam bentuk table

Contoh

Page 15 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Template Literal

Pada beberapa module atau pelajaran sebelumnya, kita sudah mengetahui bahwa tipe data string
pada JavaScript dapat dilakukan operasi concatenation atau penggabungan menggunakan operator
plus. Akan tetapi cara seperti ini, akan terasa menyulitkan dan memacu adrenaline apabila yang kita
lakukan melibatkan banyak sekali variabel

Sungguh sangat beradnaline bukan? untung variabel yang ditambah-tambah cuman 3 yaitu firstName
+ middleName + lastName, kalau banyak? Auto ketar-ketir

Sejak hadirnya JavaScript modern, yang dimana ditandai dengan awalnya penjelajahan bangsa eropa
#eh. Maksudnya, untuk membuat string pada JavaScript kita tidak selalu harus menggunakan cara-
cara konvensional yaitu dengan kutip satu maupun kutip dua melainkan menggunakan template
literal. Untuk membuat template literal pada JavaScript dilakukan dengan menggunakan tanda
backtick (``).

String template juga bisa dilakukan operasi concatenation dengan menggunakan ${nameVariableNya}
dan tentu saja code yang kita buat akan enak dibaca, karena terhindar dari banyaknya penggunaan
operator plus.

Page 16 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Mantap! Selanjutnya, untuk mengambil, atau menggunakan string template kita cukup panggil nama
variabelnya saja!

Selain itu pada string template, kita juga bisa tambahkan expression.

Di string template kita juga bisa membuat multiline string, caranya cukup tambahkan enter saja untuk
membuat baris baru.

String to Number

Ketika kita membuat aplikasi, kadang input dari pengguna selalu dalam bentuk string. Padahal kita
ingin mengelola data input dari pengguna dalam bentuk number. Contoh anggaplah firstValue
merupakan input dari pengguna yaitu nilai string.

Page 17 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Lantas bagaimana solusinya? Lakukanlah konversi terlebih dahulu dari string ke Number . Caranya
input dari user yang berupa string kita ubah dulu ke dalam bentuk number menggunakan function
parseInt( ) kemudian baru deh kita lakukan penjumlahan, .

Ada beberapa function yang dapat kita gunakan diantaranya sebagai berikut.

parseFloat(string) -> Mengkonversi dari string ke number (bilangan pecahan)

Number(string) -> Mengkonversi dari string ke number (bilangan bulat atau pecahan)
[Link]() -> Mengkonversi dari number ke String

Lalu bagaimana jika input dari pengguna benar-benar adalah string misalkan teks? Fenomena ini
disebut sebagai NaN. NaN merupakan sebuah keadaan yang menyebutkan bahwa ini bukanlah
number (Not a Number). Contoh

Nah lho wkwk. Misalkan kita lakukan konversi dari string ke number, apakah bisa?

Hasilnya adalah NaN, tentu karena John itu teks bukan number. Adakah solusinya? Ya tentu saja ada!
Yaitu kita cek dan pastikan bahwa input dari pengguna bukanlah merupakan nilai yang menghasilkan
NaN. Caranya gunakan function isNan( ).

Page 18 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Array

Kita tahu bahwa variabel digunakan untuk menampung nilai, akan tetapi variabel ini hanya bisa
menampung satu nilai saja. Lantas bagaimana jika kita ingin menampung lebih banyak nilai? Apakah
seperti ini?

Tentu saja! Akan tetapi kalau user nya ada banyak gimana. Akan sangat ber adrenaline dan membuat
kita ingin berkata “kasar”. Kasar! Maka dari itu gunakanlah Array. Dengan array kita bisa menampung
banyak sekali nilai dan untuk membuat Array kita cukup letakkan nilainya dalam tanda kurung siku [ ].

Lebih efisien dan praktis. Kemudian katankalah kita ingin mengambil value dari user yaitu John.
Bagaimana caranya? Kita bisa gunakan index. Perlu kita ketahui bahwa array ini menyimpan data
dalam urutan yaitu index. Index dari Array ini dimulai dari 0. Jadi cukup panggil indexnya saja

Page 19 of 150 Menjadi JavaScript Developer - Bahrul Rozak

John berada pada urutan ke tiga berarti john memiliki index nomor 2. Maka untuk mengambil nilai
John yaitu

Jika Anda bingung tentang urutannya. Bisa gunakan [Link]( )

Pada tipe data Array kita bisa melakukan berbagai operasi diantaranya

[Link](value) Menambah data ke Array

[Link] Untuk mendapatkan panjang Array
array[index] Mendapat data di posisi index
array[index] = value Mengubah data di posisi index
delete array[index] Menghapus data di posisi index, namun index tidak bergeser

Perlu diketahui bahwa ketika kita menambahkan value pada Array, maka value baru akan berada di
urutan terakhir

Array juga tidak tergantung pada jenis tipe data, kita bisa sesuka hati menambahkan beragam banyak
tipe data

Page 20 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Object

Selain Array di JavaScript ada juga tipe data Object. Yang membedakan adalah index pada tipe data
object menggunakan string dan index, pada object ini berisi attribute atau properties yang terdiri dari
key dan value. Membuat tipe data object kita menggunakan kurung kurawal { }.

Untuk mengaksesnya, cukup panggil nama objectnya

Lalu jika kita ingin mengambil emailAddress, kita panggil nama propertiesnya.

Page 21 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Pada object kita pun bisa melakukan operasi layaknya array, misalkan menambah data ke dalam
object yang masih kosong. Akan tetapi jangan lupa karena object berdasarkan attribute atau
properties untuk men setting key dan valuenya juga.

If Expression

Hidup adalah pilihan, begitulah kata-kata yang terucap dari berbagai motivator dunia. Di
pemrograman pun sama, ada saatnya kita lakukan sesuatu jika kondisi tersebut terpenuhi dan jika
tidak maka jangan dilakukan. Dalam kasus ini kita bisa gunakan kata kunci if. Block pada if akan
berjalan ketika kondisi terpenuhi.

Akan tetapi karena hidup adalah pilihan, jika ada kondisi lain, jalankan kondisi lain tersebut
menggunakan kata kunci else if.

Page 22 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Jika tidak ada kondisi lain yang terpenuhi ya tentu saja pasrah, pasrah artinya mengerahkan segala
kemampuan sampai titik batas, jadi definisi pasrah bukan berleha-leha. Dalam pemrograman kita bisa
gunakan kata kunci else.

Pop Up

kita telah mengetahui bahwa JavaScript digunakan untuk membuat website menjadi lebih interaktif
dan dinamic dengan pengguna. Sebelum itu, apakah teman-teman familiar dengan fitur berikut?

Tentu saja! Dan fitur ini tidak akan hilang, sampai kita menekan tombol Oke . Fitur ini bernama popup,
popup secara sederhana adalah sebuah box yang menampilkan informasi dan membutuhkan interaksi
dari pengguna (Misalkan menekan tombol ). Pada JavaScript popup dapat kita buat dengan 3 cara
yaitu alert, prompt dan confirm. Hmm mari kita diskusikan satu persatu.

Page 23 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Alert merupakan sebuah popup yang digunakan untuk memberikan peringatan di browser. Untuk
membuat Alert kita bisa menggunakan cara seperti berikut

Prompt merupakan sebuah popup yang digunakan untuk meminta input dari pengguna

Dalam hal ini kita terlebih dahulu membuat sebuah variable bernama userName yang akan menerima
input prompt dari pengguna dan akan ditampilkan dalam bentuk alert seperti berikut ini

Page 24 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Confirm merupakan sebuah popup yang digunakan untuk meminta input dari pengguna berupa nilai
boolean (true dan false) jika iya maka akan jalankan sebuah aksi, jika tidak ya tidak ada aksi

Jika kita klik oke maka tentu saja akan bernilai true dan block if pada kode akan dijalankan

Jika tidak, maka kode yang di dalam block else lah yang akan dieksekusi

Page 25 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Undefined

Terkadang kita lupa untuk menginisialisasi nilai variabel. Akibatnya variabel yang kita buat tentu saja
akan kosong nilainya. Akan tetapi JavaScript akan menghasilkan dan membalikan respon berupa
undefined. Amazing!

Pada [Link] kita menggunakan function typeof yang berguna untuk melihat tipe data dari suatu
variable dan inilah hasilnya

Null

Null adalah kebalikan dari undefined, kalau undefined kita benar-benar gak lakukan inisialisasi nilai
pada variabel . Sedangkan null kita inisialisasi nilainya menggunakan keyword null itu sendiri. Biasanya
null kita gunakan, untuk nilai sementara aja. Misalkan teman-teman bingung, value apa sih yang harus
diisi ke dalam variabel ini? dari pada bingung ya teman-teman bisa inputkan null saja.

Page 26 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Switch Expression

Kita tahu bahwa untuk melakukan perbandingan pada JavaScript bisa menggunakan if expression
yang terdiri dari if, else if dan else. Namun ada satu kondisi dimana kita hanya benar-benar
membutuhkan if saja. Dalam kasus ini kita bisa gunakan switch expression. Switch adalah statement
percabangan yang sama dengan if, namun lebih sederhana cara pembuatannya dan kondisi di switch
statement hanya untuk perbandingan == (sama)

Pada kasus ini let lamp bernilai merah, maka kondisi (case) yang sesuai haruslah merah juga dan akan
menjalankan kata Berhenti. Default pada kasus ini sama dengan fungsi else, yang akan berjalan jika
memang tidak ada kondisi (case) yang benar-benar sesuai

Fun Fact!
Setiap case jangan lupa untuk memberikan keyword break, agar code yang dibawahnya tidak ikut-
ikutan dieksekusi

Page 27 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Operator Typeof

Pada bahasan beberapa menit yang lalu, kita sudah menggunakan operator typeof untuk mengecek
tipe data dari sebuah variabel. Pada JavaScript hal ini penting untuk kita lakukan, karena JavaScript ini
merupakan dynamic language, artinya tidak terpaku pada satu jenis data saja

In Operator

In operator merupakan sebuah operator yang digunakan untuk mengecek apakah sebuah object
memiliki attribute atau properties dan akan mengembalikannya dalam bentuk nilai boolean (true dan
false). Dalam hal ini true merepresentasikan bahwa object memiliki properties dan false
merepresentasikan bahwa object tidak memiliki properties

Pada contoh di atas kita memiliki sebuah object bernama student, kemudian kita ingin mengecek
apakah object student memiliki properties id? Maka kita membuat sebuah variable check student

Page 28 of 150 Menjadi JavaScript Developer - Bahrul Rozak

yang berisi in operator sebagai berikut “id” in student, artinya kita ingin mengecek apakah id ada di
dalam student? Jika iya maka dia akan mereturn nilai true

Tidak hanya pada object, in operator dapat kita gunakan untuk mengecek apakah sebuah index
tersedia pada array atau tidak.

Hasilnya false, karena tidak ada index ke 5. Hanya sampai index ke 4 saja.

Ternary Operator

Ternary operator merupakan bentuk lain dari if statement yang dibuat dengan lebih sederhana.
Ternary operator terdiri dari kondisi yang dievaluasi, jika menghasilkan true maka nilai pertama
diambil, jika false, maka nilai kedua diambil. Contoh kode if statement

Menggunakan ternary operator

Page 29 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Nullish Coalescing

Merupakan sebuah operator logika yang mirip dengan ternary operator, yang membedakan adalah
pada kondisi, jika bernilai null atau undefined, baru value default nya yang diambil.

Maka yang akan diambil adalah “Nilai Default” Karena variabel parameter berkondisi undefined,
bagaimana jika null? ya Sama aja

Page 30 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Optional Chaining Operator

Optional chaining operator (?) merupakan operator yang digunakan untuk mengamankan ketika kita
ingin mengakses property sebuah object dari data nullish (null, undefined). Jika kita mencoba
mengakses property dari sebuah object dari data nullish (null, undefined) tanpa menggunakan
optional chaining operator, maka akan terjadi error.

karena kita mencoba mengakses properties yang undefined. Lalu bagaimana solusinya? Tentu saja
kita harus melakukan pengecekan terlebih dahulu, apakah properties yang akan kita akses bernilai
nullish yaitu null dan undefined?

Check menggunakan if statement

Page 31 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Disini kita mencoba mengakses properties information, namun sebelum itu kita pastikan apakah
information bukanlah berisi nilai nullish. Ternyata information berisi nilai undefined, karena tidak ada
propertiesnya dalam object student.

Check menggunakan optional chaining

Sangat simple sekali , bukan!

Page 32 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Thruthy dan falsy

Merupakan fitur unique yang ada pada JavaScript. Jadi di JavaScript, kondisi itu tidak hanya harus
berupa nilai boolean, tapi diluar boolean pun bisa, namun kita harus tahu beberapa data falsy, atau
dianggap false dan beberapa data truthy atau dianggap true.

Falsy merupakan value yang ketika dalam konteks boolean, dia dianggap false

Truthy merupakan value yang ketika dalam konteks boolean, dia dianggap true.

Page 33 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Operator Logika Non Boolean

kita telah mengetahui bahwa operator logika seperti AND (&&) OR (||) digunakan pada tipe data
Boolean. Namun pada JavaScript operator-operator logika tersebut yakni AND, OR dapat kita gunakan
diluar data non Boolean. Mari kita bahas satu persatu.

Operator AND (&&) pada Tipe Data Non Boolean

Operator logika AND, akan membaca dari kiri ke kanan. Operator ini akan mengambil nilai pertama
yang falsy. Falsy merupakan value yang ketika dalam konteks boolean, dia dianggap false. Jika tidak
ada satupun yang bernilai falsy, maka yang terakhir yang akan diambil.

Anda Bingung? Saya juga bingung. Oke mari kita bahas mendetail

Disini kita memiliki value string “Dexamethasone” bernilai truthy dan satu string kosong ( ‘ ‘ ) bernilai
falsy. Seperti yang kita telah pelajari pada module falsy. Bahwa tipe data string kosong (‘ ‘) itu bernilai
false. Maka otomatis logika yang dihasilkan adalah true dan false maka akan menjadi false. Dalam
konteks logika pada non boolean nilai yang diambil adalah jika tidak ada satupun yang bernilai falsy,
maka yang terakhir yang akan diambil. Namun pada kasus ini falsy yaitu string kosong. Jadi string
kosong yang diambil

Page 34 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Nah selanjutnya yang ini aja deh. Disini kita memiliki value number yaitu 500 dan string
“Paracetamol”. Disini 500 merupakan truthy (true) kemudian “Paracetamol” juga true. Maka otomatis
logika yang dihasilkan adalah true dan true maka akan menjadi true. Ingat pada pasal 1 disebutkan
bahwa “jika tidak ada satupun yang bernilai falsy, maka yang terakhir yang akan diambil”. Dalam
konteks ini karena tidak ada satu pun yang bernilai falsy maka yang diambil yang terakhir yaitu
“Paracetamol” .

Operator OR (||) pada Tipe Data Non Boolean

Operator logika OR, akan membaca dari kiri ke kanan. Operator ini akan mengambil nilai pertama
yang truthy. Jika tidak ada satupun yang bernilai truthy, maka yang terakhir yang akan diambil.

Disini kita memiliki value string “Dexamethasone” bernilai truthy dan satu string kosong ( ‘ ‘ ) bernilai
falsy. Seperti yang kita telah pelajari pada module falsy. Bahwa tipe data string kosong (‘ ‘) itu bernilai
false. Maka otomatis logika dalam OR yang dihasilkan adalah true atau false maka akan menjadi true.
Dalam konteks logika pada non boolean nilai yang diambil adalah jika tidak ada satupun yang bernilai
truthy, maka yang terakhir yang akan diambil. Namun pada kasus ini truthy yaitu string
“Dexamethasone”. Jadi string “Dexamethasone” yang diambil

Nah selanjutnya yang ini aja deh. Disini kita memiliki value number yaitu 500 dan string
“Paracetamol”. Disini 500 merupakan truthy (true) kemudian “Paracetamol” juga true. Maka otomatis
logika yang dihasilkan adalah true atau true maka akan menjadi true. Ingat pada pasal 1 disebutkan
bahwa “jika tidak ada satupun yang bernilai truthy, maka yang terakhir yang akan diambil”. Dalam
konteks ini karena tidak ada satu pun yang bernilai truthy maka yang diambil yang terakhir yaitu
“Paracetamol”

Page 35 of 150 Menjadi JavaScript Developer - Bahrul Rozak

For Loop

Bayangkan! pada hari itu Anda berangkat sekolah, kemudian Anda datang terlambat dan sebagai
konsekuensi atas perbuatan Anda, Anda diminta oleh Bapak Guru untuk menuliskan “Saya tidak akan
terlambat ke sekolah lagi” sebanyak 200 kata. Jika dengan pengerjaan secara konvensional Anda pasti
akan ketar-ketir.

Lantas apakah ada solusi? Tentu di setiap permasalahan pasti ada solusi, jika tidak ada solusi artinya
tidak ada permasalahan — quotes.

Kita dapat menggunakan for loop. For loop ini terdiri dari 2 kata yaitu for berarti untuk dan loop
berarti perulangan, jika ditarik hipotesis sementara maka for loop di definisikan sebagai suatu kondisi
yang menyebabkan kegiatan harus diulang-ulang #eh

Pada JavaScript untuk membuat perulangan kita menggunakan kata kunci for. Tapi sebelum ke sana
mari kita pahami struktur dari sebuah perulangan.

Keterangan

Initial statement merupakan kondisi awal yang ditetapkan sebelum terjadinya perulangan.
Conditional merupakan kondisi untuk melakukan pengecekan dalam setiap perulangan, jika true
perulangan akan dilakukan, jika false perulangan akan berhenti.
Post statement merupakan kondisi yang akan dieksekusi setiap kali diakhir perulangan.

Seperti ini hasil dari implementasi for loop pada studi kasus

Page 36 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kode di atas adalah sebuah perulangan menggunakan loop `for` yang bertujuan untuk menuliskan
kalimat “Saya tidak akan terlambat ke sekolah lagi” sebanyak 200 kali pada halaman web. Pertama,
variabel “kalimat” dideklarasikan dengan nilai awal 1. Selanjutnya, loop akan berjalan selama nilai
“kalimat” kurang dari atau sama dengan 200 dengan menggunakan operator perbandingan kurang
dari atau sama dengan (<=) pada kondisi loop. Setiap kali loop dijalankan, akan dituliskan kalimat
“Saya tidak akan terlambat ke sekolah lagi” menggunakan fungsi [Link]() pada halaman
web. Kemudian, nilai variabel “kalimat” akan diincrementkan dengan menggunakan operator
increment (++) sehingga pada setiap iterasi loop, nilai variabel “kalimat” akan bertambah 1. Loop akan
terus berjalan sampai nilai “kalimat” mencapai atau melebihi nilai 200.

Page 37 of 150 Menjadi JavaScript Developer - Bahrul Rozak

While Loop

While loop adalah versi perulangan yang lebih sederhana dibanding for loop. Di while loop, hanya
terdapat kondisi perulangan, tanpa ada init statement dan post statement

Do While Loop

Do While loop adalah perulangan yang mirip dengan while. Perbedaannya hanya pada pengecekan
kondisi. Pengecekan kondisi di while loop dilakukan di awal sebelum perulangan dilakukan, sedangkan
di do while loop dilakukan setelah perulangan dilakukan. Oleh karena itu dalam do while loop,
minimal pasti sekali perulangan dilakukan walaupun kondisi tidak bernilai true

Page 38 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Break dan Continue

Pada switch statement, kita sudah mengenal kata kunci break, yaitu untuk menghentikan case dalam
switch. Sama dengan pada perulangan, break juga digunakan untuk menghentikan seluruh
perulangan. Namun berbeda dengan continue, continue digunakan untuk menghentikan perulangan
saat ini, lalu melanjutkan ke perulangan selanjutnya

Perulangan di atas adalah sebuah program JavaScript yang terdiri dari satu variabel kalimat yang
diberi nilai awal 1. Selanjutnya, program akan mengeksekusi loop while yang berjalan terus-menerus
(true) sampai kondisi pada if statement terpenuhi. Setiap kali loop dijalankan, program akan
menampilkan teks “Saya tidak akan datang terlambat” pada halaman web dengan menggunakan
method [Link]( ). Setelah itu, nilai dari variabel kalimat akan ditambah 1. Ketika nilai dari
variabel kalimat mencapai 10, maka program akan keluar dari loop menggunakan statement break,
sehingga program akan berhenti mengeksekusi loop tersebut

Page 39 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kode di atas adalah sebuah program JavaScript yang menggunakan loop for untuk melakukan iterasi
dari 1 hingga 10. Pada setiap iterasi, program akan mengecek apakah nilai i merupakan bilangan
genap atau ganjil. Jika nilai i merupakan bilangan genap, maka program akan melewati langkah
selanjutnya dalam loop menggunakan statement continue, sehingga perintah yang berada di bawah if
tidak akan dieksekusi. Namun jika nilai i merupakan bilangan ganjil, maka program akan
mengeksekusi perintah [Link]( ) untuk menampilkan teks Merupakan Angka ganjil pada
halaman web. Dengan demikian, kode di atas digunakan untuk menampilkan teks “x Merupakan
Angka ganjil” pada halaman web untuk setiap bilangan ganjil dari 1 hingga 10 dengan menggunakan
loop for dan statement continue untuk melewatkan bilangan genap

Page 40 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Label

Terkadang ketika membuat sebuah program kita ingin menambahkan sebuah identifier (pengenal)
agar program yang dibuat hanya menjalankan atau mengekseksusi code berdasarkan identifier saja.
Pada JavaScript telah disedikan fitur bernama label. Label merupakan keyword untuk membuat
identifier suatu blok pada JavaScript. Membuat label, kita bisa gunakan nama label dan diikuti dengan
tanda titik dua :

namalabel:

Script di atas digunakan untuk menunjukkan bahwa kita dapat memberikan suatu label pada suatu
blok perintah dalam JavaScript. Pada saat kita jalankan dengan menggunakan browser, label tidak
akan mempengaruhi jalannya program (error), sampai dengan adanya perintah break atau continue
yang mengacu kepada label tersebut.

Menggunakan break pada label

Kita telah mengetahui bahwa break digunakan untuk menghentikan case dari suatu block
pengulangan. Akan tetapi jika diikuti dengan label, maka program akan berhenti pada label tersebut.

Page 41 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Script di atas merupakan script yang digunakan untuk menghitung bilangan dari 1 sampai dengan 5,
tetapi pada saat variabel i memiliki nilai 3, maka program akan berhenti, keluar dari blok perulangan.
Dengan adanya perintah break pada saat variabel i sama dengan 3, maka yang dijumlahkan hanya 1
dan 2. Label yang dituju harus berada setelah break. Jika label yang dinyatakan setelah break, maka
nama label tersebut tidak berpengaruh dan dianggap bahwa pada perintah break tersebut tidak
diikuti dengan nama label.

Menggunakan continue pada label

Continue digunakan untuk menghentikan perulangan, lalu melanjutkan kembali. Perintah continue
pada label dapat digunakan untuk memaksa program untuk mengeksekusi perintah setelah suatu
label yang berada di atasnya.

Page 42 of 150 Menjadi JavaScript Developer - Bahrul Rozak

For In

For In merupakan perulangan for yang digunakan untuk mengiterasi seluruh data pada property di
object atau index di array. Walaupun for in bisa digunakan untuk Array, namun tidak
direkomendasikan untuk Array, karena biasanya kita jarang sekali butuh data index untuk Array, kita
bisa menggunakan For Of

Dalam hal ini variabel userDetail akan melakukan iterasi properties dari sebuah object user, sehingga
di dapatkan hasil seperti berikut

Kemudian jika kita ingin mengambil sekaligus dengan valuenya, maka dapat kita gunakan seperti
berikut ini.

Page 43 of 150 Menjadi JavaScript Developer - Bahrul Rozak

For Of

Jika For In digunakan untuk melakukan iterasi property pada object, maka pada Array kita bisa
menggunakan for of, ini digunakan untuk melakukan iterasi terhadap isi value dari iterable object,
seperti Array, String dan lain-lain. For of tidak bisa digunakan untuk melakukan iterasi data di object,
karena object bukanlah iterable

Dalam hal ini variabel userDetail akan melakukan iterasi isi value dari sebuah Array user, sehingga di
dapatkan hasil seperti berikut

With Statement

Pada JavaScript ada sebuah fitur unique bernama with statement. Dengan with statement kita bisa
mengakses properties dalam sebuah data object tanpa menyebutkan nama objectnya. Tapi sebelum
itu mari kita lihat perbedaan antara menggunakan with statement dan tanpa menggunakan with
statement

Page 44 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Tanpa menggunakan with statement, untuk mendaptkan atau mengakses properties, kita harus
melakukannya satu per satu dan ini akan sangat membuat kita ketar-ketir. Berbeda jika kita
menggunakan with statement maka akan seperti ini

Dengan menggunakan with statement kita bisa melakukan groupping atau pengelompokkan kepada
sebuah object yang masih sama, dan kita tidak perlu bersusah-susah untuk mengakses propertiesnya,
cukup sebutkan propertiesnya saja

Akan tetapi menggunakan with statement saat ini, tidak direkomendasikan kembali, karena code yang
kita buat akan menimbulkan ambiguisitas. Contohnya seperti berikut ini

Page 45 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Misalkan kita ingin membuat sebuah variabel const username dengan value Ethan lawdonsky, akan
tetapi ketika kita lihat kembali dalam keseluruhan code username ini ada 2 akibatnya kita menjadi
bingung, hmm sebenarnya username punya siapa?

Function

Function secara etimologi adalah sebuah program kecil yang dapat kita gunakan secara berulang-
ulang. Dengan function code yang kita buat akan menjadi lebih bersih dan tentu saja akan
meningkatkan produktivas pengembang. Berikut ini merupakan struktur untuk membuat function
pada JavaScript.

untuk membuat function, kita menggunakan keyword function kemudian diikuti dengan
namaFunctionya setelah itu kita berikan parameter, namun disini kita tidak akan membahas
parameter dahulu. Kita akan bahas konsep dasar dari function mulai dari membuat dan memanggil
saja.

Di sini kita membuat sebuah function bernama saySalam yang berisi perintah untuk menampilkan
“Assalamualaikum” pada browser. Langkah selanjutnya untuk menggunakan function, kita cukup
panggil namaFunctionnya saja

Page 46 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Karena function bisa di re-use alias digunakan berulang-ulang, maka kita bisa panggil sebanyak yang
kita mau

Function Parameter

Pada materi tentang function, kita sudah sedikit membahas tentang parameter. Disini kita akan
membahas maksud dari parameter tersebut secara seksama dan dalam tempo yang sesingkat-
singkatnya.

Page 47 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Dalam kasus ini kita memiliki sebuah function yang akan mengeksekusi sebuah script sederhana untuk
menampilkan teks “Assalamualaikum!” Pertanyaan nya bisakah kita membuatnya, menghasilkan nilai
bahkan mengirimkan informasi? Misalkan “Assalamualaikum john!” kemudian “Waalaikumussalam
Ethan!” Tentu saja bisa, disinilah peran dari parameter. Sebelum menambahkan parameter alangkah
lebih baiknya perhatikan struktur dari function terlebih dahulu

Parameter ditempatkan di dalam kurung () di deklarasi method (namaFunctionnya). Parameter bisa

lebih dari satu, jika lebih dari satu, harus dipisah menggunakan tanda koma

Untuk mengirimkan informasi ke parameter yaitu username, ketika kita memanggil function jangan
lupa untuk memberikan argument. Argument secara sederhana adalah nilai yang dikirimkan kepada
parameter. Argument ini disesuiakan dengan panjang dari parameter dan pastikan urutannya benar

Page 48 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Sehingga code yang kita buat menjadi seperti berikut

Function Return Value

Secara default, function itu tidak menghasilkan value apapun, namun jika kita ingin, kita bisa
membuat sebuah function mengembalikan value. Agar function bisa menghasilkan value, kita bisa
menggunakan kata kunci return di dalam functionnya. Dan di dalam block function, untuk
menghasilkan nilai tersebut, kita harus menggunakan kata kunci return, lalu diikuti dengan data yang
ingin kita hasilkan. Function hanya bisa mengembalikan satu data, jika kita ingin mengembalikan
beberapa data sekaligus, kita bisa menggunakan Array sebagai return value nya

Page 49 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Optional Parameter

Parameter pada JavaScript sebenarnya bersifat optional, artinya kita bisa sesuka hati ingin
menambahkan argumen atau tidak

Disini kita hanya menambahkan argumen untuk id, dan itu tidak masalah

Page 50 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Default Parameter

Sebenarnya parameter pada JavaScript dapat kita berikan nilai default. Hal ini bisa saja terjadi ketika
kita lupa memberikan argumen ke pada parameter, dan default value lah yang akan mengisi
parameter tersebut

Di atas kita hanya sebatas mengirim argumen untuk id dan fullname saja, akan tetapi walupun seperti
itu address akan tetap terisi dengan default valuenya yaitu Indonesia

Function Sebagai value

Function tidak hanya bisa digunakan sebagai kode program yang dieksekusi, tapi bisa juga sebagai
value. Artinya, function bisa disimpan di variable, bisa juga dikirim melalui parameter ke function
lainnya

Page 51 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Anonymous Function

Pada materi-materi function sebelumnya, untuk membuat function kita harus memberikan nama
functionnya. Namun semenjak hadirnya JavaScript versi modern, maka untuk membuat function kita
tidak harus menggunakan nama function. Function tanpa nama ini disebut sebagai anonymous
function. Kita bisa buat anonymous function dalam sebuah variable atau bisa juga kita buat ketika
mengisi parameter.

Page 52 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Function di dalam Function

Pada JavaScript untuk membuat function tidak ada batasan. Kita bisa dengan sesuka hati membuat
function di manapun kita mau. Tidak hanya itu di JavaScript kita juga dapat membuat function di
dalam function atau istilah kerennya mah inner function. Akan tetapi inner function ini hanya hanya
bisa diakses di tempat kita membuat function nya, tidak bisa diakses dari luar function nya

Page 53 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Scope

Saat kita membuat function, otomatis dan secara default maka kita akan membuat local scope untuk
function tersebut. Scope secara sederhana adalah sebuah area yang dapat di akses data atau nilainya.
Scope dibagi menjadi dua yaitu local scope dan global scope. Data di global scope bisa diakses dari
local scope, namun data di local scope hanya bisa di akses dilocal scope tersebut atau di scope local
dibawahnya (dalam kasus function dalam function) atau inner function yang sudah kita bahas
sebelumnya

Page 54 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Recursive Function

Kemampuan function untuk memanggil dirinya sendiri disebut dengan istilah recursive function. Pada
contoh ini kita akan menerapkan recursive function pada factorial

Function Generator

Function generator adalah function yang digunakan untuk membuat data generator. Generator
adalah data yang bisa di interasi seperti Array. Untuk membuat function generator, kita perlu
menggunakan tanda * (bintang) setelah kata function. Dan untuk mengembalikan data di tiap iterasi,
kita bisa gunakan kata kunci yield diikuti datanya

Page 55 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Arrow Function

Pada JavaScript kita dapat membuat function menjadi lebih sederhana dengan menggunakan arrow
function. Perlu diketahui bahwa arrow function ini tidak dapat digunakan disemua keadaan.
Dinamakan arrow function karena menggunakan tanda => (seperti panah). Walaupun arrow function
terlihat menarik, namun ada beberapa kekurangan ketika kita menggunakan arrow function yaitu
sebagai berikut

Tidak memiliki fitur arguments object

Tidak bisa menggunakan function generator
Tidak bisa mengakses this
Tidak bisa mengakses super

Page 56 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Jika arrow function hanya berisi satu baris saja atau lebih sederhana, kita bisa membuatnya tanpa
menggunakan block

Selain itu arrow function juga dapat mereturn value, return value secara sederhana yaitu
mengembalikan nilai, misalkan 5 + 5 maka return valuenya adalah? 10 bukan min? Tepat sekali!. Akan
tetapi Jika menggunakan block, maka kita perlu menggunakan kata kunci return. Jika tidak
menggunakan block, kita tidak perlu menggunakan kata kunci return

Page 57 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Arrow function juga bisa digunakan sebagai parameter. Jadi kita juga bisa menggunakan arrow
function sebagai parameter di function lain

Closure

Pada materi scope, kita sudah tahu bahwa local scope itu tidak bisa diakses dari luar scopenya.
Kemudian apakah ada solusi?. Tentu! Kita bisa menggunakan closure. Dengan kemampuan closure,
kita bisa membuat sebuah function di local scope dan referensi ke data di sekitar local scope tersebut,
keluar dari scope nya

Page 58 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Object Method

Pada materi tipe data object, kita sudah membahas tentang property pada object. Karena sebenarnya
function juga merupakan salah satu tipe data, jadi function pun sebenarnya bisa ditambahkan sebagai
property di object Function di object kadang disebut juga sebagai Object Method. Cara
pembuatannya pun sama dengan function sebagai value

Page 59 of 150 Menjadi JavaScript Developer - Bahrul Rozak

This

Kata kunci “This” merujuk pada objek yang menjalankan bagian kode saat ini. Kata kunci ini merujuk
pada objek yang menjalankan fungsi saat ini. Jika fungsi yang direferensikan adalah fungsi biasa, “this”
mereferensikan objek global. Jika fungsi yang direferensikan adalah method dalam sebuah objek,
“this” mereferensikan objek itu sendiri. Kata kunci JavaScript “this” adalah salah satu kata kunci yang
paling banyak digunakan. Pada awalnya mungkin terlihat rumit, namun setelah kita mulai
menggunakan kata kunci “this”, semuanya akan menjadi jelas

Pada contoh di atas “this” akan mereferensikan objectnya sendiri yaitu person (names) karena “this”
berada di dalam method. Sehingga code yang dijalankan akan seperti berikut.

Page 60 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Arrow Function pada Object

Pada JavaScript, ternyata Arrow function dapat kita gunakan sebagai object. Akan tetapi …….., apa
hayo? Ternyata! Arrow Function tidak bisa kita gunakan untuk mengakses arguments pada object,
function generator, kata kunci this dan kata kunci super. Oleh karena itu, gunakanlah selalu #eh
maksudnya gunakanlah Arrow Function hanya memang ketika kita tidak butuh fitur-fitur diatas.

Getter dan Setter

Getter dan Setter adalah kemampuan untuk membuat function yang berbeda untuk mengambil data
(Getter) dan mengubah data (Setter) pada sebuah property di Object. Dengan menggunakan Getter
dan Setter, kita bisa melakukan hal apapun dalam function sebelum sebuah property di akses atau
diubah, misal menambah validasi dan lain-lain

Page 61 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Page 62 of 150 Menjadi JavaScript Developer - Bahrul Rozak
Mengapa Var Hilang?

Semenjak JavaScript modern hadir, penggunaan keyword var untuk membuat variabel tidak
direkomendasikan kembali, hal ini dikarenakan var tidak memiliki block scope, artinya dia tidak
mengikat ke local scope yang sebelumnya sudah kita bahas. Karena masalah ini, var bisa tidak
terprediksi

Sekarang kita bandingkan, jika menggunakan keyword let

Page 63 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Destructuring

Dahulu, ketika kita hendak menampilkan data baik dari array (index) atau pun object (properties) kita
harus melakukan pemanggilannya satu-persatu. Contoh

Oleh karena itu kita bisa menggunakan fitur destructuring untuk solusi tersebut. Destructuring adalah
fitur yang bisa digunakan untuk membongkar value-value di array atau object ke dalam variable-
variable. Fitur ini sangat mempermudah kita ketika ingin mengambil data dari array atau object tanpa
harus melakukan pengambilan data satu persatu.

Page 64 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Disini kita menyimpan properties yang hendak kita panggil ke dalam sebuah variabel bernama person.
Sehingga variable id akan berisikan [Link], kemudian variable firstName akan berisikan
[Link] dan begitu seterusnya. Mantap

Selain itu kita juga bisa melakukan desctructuring bersarang atau nested

Destructuring tidak hanya bisa dilakukan di variable, tapi juga bisa dilakukan di function parameter.
Hal ini membuat kita mudah ketika ingin mengambil nested data dalam array atau object dalam
function

Page 65 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Yang paling menarik di destructuring adalah, kita bisa menambahkan default value. Jadi misal kita kita
melakukan destructuring terhadap array, ternyata tidak ada datanya, maka kita bisa menambahkan
default value. Begitu juga pada object, jika ternyata property nya tidak ada, maka kita bisa
menambahkan default value.

Pada destructuring kita juga bisa menggunakan alias untuk variabel

Page 66 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Strict Mode

Saat kita menjalankan kode program JavaScript, secara default kode program kita berjalan dalam
mode tidak strict, atau istilahnya sloppy mode. Pada ECMAScript 5, diperkenalkan mode strict,
dimana ketika strict mode dijalankan, maka akan merubah beberapa cara kerja di JavaScript, seperti :

Merubah beberapa JavaScript error dari yang tadinya silent error, menjadi throw error (terlihat)
Memperbaiki beberapa kesalahan engine JavaScript untuk optimisasi
Menolak beberapa kode perintah yang kedepannya akan digunakan di ECMAScript

Untuk menyalakan strict mode, kita bisa menambahkan `use strict` pada baris awal file javascript kita
atau bisa juga ditambahkan di awal function kita.

Spread Operator

Masih terkait dengan array, ES6 memiliki fitur menarik untuk membantu pengelolaan array menjadi
lebih mudah, yaitu spread operator. Sesuai namanya “spread”, fitur ini digunakan untuk menyebarkan
nilai array atau lebih tepatnya iterable object menjadi beberapa elemen. Spread operator dituliskan
dengan tiga titik (…). Mari kita lihat contoh kode berikut:

Pada kode tersebut hasil yang dicetak adalah sebuah array (ditunjukkan dengan tanda [ ]), karena
memang kita mencetak nilai favorites itu sendiri. Nah, dengan menggunakan spread operator kita
dapat menyebarkan nilai-nilai dalam array tersebut.

Page 67 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Spread operator dapat digunakan untuk menggabungkan dua buah array ke dalam array baru. Jika
tidak menggunakan spread operator ini maka hasilnya akan seperti ini:

Nilai array tidak akan tergabung. Alih-alih menggabungkan nilainya, variabel allFavorites menjadi
array baru yang menampung dua array di dalamnya. Nah, lantas bagaimana jika kita mencoba
menggunakan spread operator?

Map

Kita tahu bahwa object pada JavaScript menyimpan data dalam bentuk key dan value. Namun pada
JavaScript key dan value tidak hanya berada di object saja. Lantas dimana kah itu? Jawabannya
adalah …… Map!. Map ini sama dengan object, namun untuk Map pada bagian key kita bisa mengisi
dengan tipe data apapun, berbeda dengan object yang hanya bisa berisi key berupa string

Page 68 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kemudian jika kita ingin mengisi nilai secara langsung pada map. Kita bisa menggunakan array
multidimensi, contohnya seperti ini

Selayaknya menggunakan object secara convensional, kita pun dapat mengambil nilai sesuai dengan
yang kita inginkan

Disini kita akan mengambil value “Bahrul” seperti yang kita amati dengan cara seksama, bahwa
“Bahrul” berada di key “1" otomatis yang kita get adalah value “1”

Page 69 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Tentu saja di Map kita dapat melakukan manipulasi data, misalkan menambah beserta key dan value

Set

Selama ini kita mengetahui, bahwa data yang kita simpan pada variabel itu pastilah memiliki urutan
atau index. Namun ternyata tidak ! . Perkenalkan beliau adalah Set! Beliau ini memang berani
berbeda, bagaimana tidak? Disaat struktur data lain menyimpan data dalam urutan, index, beliau
tidak melakukan itu! Bahkan yang membuat beliau terlihat cool lagi beliau tidak suka duplikasi dan
menjadi unik adalah jalan pilihannya.

Untuk mengisi nilai ke dalam set, kita tidak perlu mengisi key dan value. Lagi-lagi beliau nampak keren
dengan hal tersebut!

Page 70 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Lantas bagaimana dengan manipulasi data? Tentu saja, pada set kita melakukan tambah (add)

Dan hapus data (delete)

Page 71 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Splicing Array

Terkadang kita butuh melakukan operasi pada Array, misalkan menghapus, mengganti element yang
ada atau menambahkan element baru diantara index. Dalam hal ini kita bisa menggunakan method
splice( ).

Pada kasus ini kita menambahkan element baru yang terletak sebelum index 0 dan 1 yaitu “feb”
Sehingga output yang dihasilkan seperti ini

Kita juga bisa mengganti isi elementnya, misalkan dari feb menjadi februari

Page 72 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Sorting Array

Pada Array kita pun bisa melakukan sorting, sorting secara sederhana artinya mengurutkan.
Menggunakan method sort( ) kita bisa melakukan hal tersebut. Contohnya kita akan mengurutkan
cars berdasakan urutan abjad

Jika ingin mengubah urutannya dari Z-A kita bisa gunakan method reverse( ).

Page 73 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Joining Array

Pada Array kita pun dapat menggabungkan nilai dari kedua array yang berbeda menggunakan method
concat( )

Disini pada variabel listMenu kita akan menampung nilai yang merupakan isi dari daftarMakanan
digabungkan dengan daftarMinuman.

Apa itu Object Oriented Programming?

Sebelum kemunculan JavaScript versi modern, JavaScript awalnya dibuat sebagai bahasa
pemrograman berbasis prototype. Namun kini JavaScript menjadi bahasa yang multiparadigm, salah
satunya ialah OOP. OOP atau Object Oriented Programming atau Pemrograman Berorientasi Object
merupakan sebuah paradigma yang digunakan dalam pembuatan aplikasi. Di OOP, objek merupakan
sebuah entitas yang terdiri dari dua komposisi atau bahan dasar, yaitu properties dan methods

Page 74 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Method merupakan fungsi yang menggambarkan aksi yang dapat dilakukan oleh objek tersebut.
Sedangkan Properti merupakan nilai di dalam objek yang menyimpan informasi tentang objek
tersebut.

Paradigma OOP kerap digambarkan atau diterminologikan (Asik wkwk) dengan kehidupan dunia nyata.
Objek di dalam OOP, bisa kita anggap seperti objek yang ada di dunia nyata. Kita ambil contoh yang
paling sederhana adalah Kucing. Dalam OOP, seekor Kucing dapat dilihat sebagai objek yang memiliki
beberapa properti seperti warna bulu, berkaki empat dan lain-sebagainya. Objek tersebut memiliki
kemampuan atau method seperti makan, minum dan meow meow meow

Lalu, seperti apa bentuk objek Kucing dalam bentuk JavaScript? Objek kucing dibuat dengan
menggunakan tanda kurung kurawal dan untuk method-nya, kita cukup buat properti yang
merupakan sebuah fungsi, contohnya seperti ini.

Di JavaScript untuk membuat sebuah objek terlihat mudah, bukan? Namun, masalah yang dipecahkan
oleh paradigma OOP tidak hanya sebatas membuat objek sederhana saja. Seiring berkembangnya
aplikasi, pembuatan objek akan semakin banyak dan saling berinteraksi satu dengan yang lainnya.
Sehingga, kita harus mengetahui cara efektif mengelola objek termasuk cara membuatnya ☺.

Page 75 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Mari kita angkat sebuah masalah baru dari contoh kode di atas. Bagaimana jika kita ingin membuat
objek dua yaitu kucing hitam dengan nilai yang berbeda? Haruskah kita mendefinisikan properti dan
method yang sama secara berulang seperti contoh kode di bawah ini? Tentu saja Tidak!

Dan tentunya akan sangat merepotkan kembali dan membuat kita ketar-ketir. Oleh karena itu kita
memerlukan OOP. OOP menawarkan kemudahan yakni dengan membuat object blueprint. Melalui
object blueprint, kita bisa membuat cetakan untuk membuat objek yang sudah terdefinisikan macam-
macam properti dan method-nya. Sehingga kita cukup menggunakan cetakan tersebut untuk
membuat objek yang serupa, tetapi kita bisa menentukan nilai-nilai properti yang berbeda. Di dalam
OOP, object blueprint tersebut bernama class. Class adalah blueprint, prototype atau cetakan untuk
membuat Object. Class berisikan deklarasi semua properties dan functions yang dimiliki oleh Object.
Setiap Object selalu dibuat dari Class dan sebuah Class bisa membuat Object tanpa batas.

Contohnya, kita bisa membuat sebuah blueprint bernama Kucing. Di dalam blueprint tersebut,
kemudian kita bisa definisikan properti-properti dan method yang ingin dimiliki objek kucing nantinya.
Setelah membuat sebuah blueprint, kita bisa dengan mudah membuat banyak objek kucing
contohnya kucingHitam, kucingPutih, kucingOrange dengan lebih mudah.

Page 76 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Constructor Function

Misalkan, kita ingin membuat dua buah object Kucing, yaitu kucingHitam dan kucingOrange. Maka
yang biasanya kita lakukan adalah seperti berikut.

Kemudian, kita tambah lagi misalkan kucing putih maka akan seperti berikut.

Kemudian, kita tambah lagi. Auto ketar-ketir lah. Nah untuk menangani permasalahan tersebut kita
bisa menggunakan class. Dengan class kita bisa membuat blueprint (cetakan) dan mencetak object
dari class (instance) sebanyak-banyaknya.

Namun! Sebelum kita membahas class lebih mendetail, mari kita tengok abad sebelumnya! Dulu
sebelum bangsa portugis dan spanyol #eh. Maksudnya sebelum adanya JavaScript modern atau
orang-orang sebut sebagai ES6. Untuk membuat class, kita menggunakan constructor function.
Mengapa? Seperti yang sudah kita bahas pada module OOP, bahwa JavaScript bukanlah benar-benar
OOP melainkan prototype-based. Oleh karena itu class pada JavaScript tidak begitu powerfull, lain hal
nya dengan saudaranya yaitu Java.

Berikut ini adalah cuplikan pidato oleh Pak RT tentang constructor function. “Para warga yang saya
hormati, kita saat ini dihadapkan dengan problematika yang begitu kompleks, ada banyak hal yang
sebenarnya dapat kita efisiensikan untuk mengejar produktivitas dan efektivitas tanpa harus
melakukan kegiatan yang sama berulang kali”. Dari sini dapat kita simpulkan bahwa efisiensi
berbading lurus dengan tingkat produktivitas dan efektivitas. Hal inilah yang ditawarkan oleh
constructor function, jadi kita tidak perlu membuat object-object yang banyak lagi dan kalau kata dia
adalah …

Page 77 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kemudian pak RT pun berlanjut “Membuat constructor function caranya seperti ini”,

“Ketika membuat constructor function, pastikan untuk membuat namanya diawali dengan huruf
kapital, hal ini lah yang menjadi dasar mengapa ketika pembuatan object pada class pun sedemikian
rupa. Bagaimana para bapak dan ibu, apa sudah jelas? Alhamdulillah …”, sambung pak RT.

Sekarang mari kita implementasikan ke dalam object kucing.

Pertama kita identifikasikan, kira-kira karakteristik yang sama pada Kucing apa ya? Nah kemudian
untuk membuat object dari function Kucing kita bisa menggunakan kata kunci new.

Kemudian untuk menambah properties? Silahkan simak pembahasan berikut

Page 78 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Property di Constructor Function

Setelah kita membuat object Kucing, kita bisa dengan mudah menambahkan property ke dalam
object Kucing tersebut hanya dengan menggunakan nama variable nya, diikuti tanda titik dan nama
property.

Namun jika seperti itu, alhasil, constructor function yang sudah kita buat tidak terlalu berguna, karena
property nya hanya ada di object yang kita tambahkan property. Untuk menambahkan property di
dalam semua object yang dibuat dari constructor function, kita bisa menggunakan kata kunci this lalu
diikuti dengan nama property nya.

Page 79 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Method di Constructor Function

Selain properties, kita juga bisa lho menambahkan method di constructor function. Jika kita
tambahkan method di constructor function, secara otomatis object yang dibuat akan memiliki
method tersebut.

Page 80 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Parameter di Constructor Function

Karena constructor function merupakan benar-benar function, maka kita bisa menambahkan
parameter. hal ini membuat ketika kita membuat object, kita bisa mengirim langsung data lewat
parameter di constructor function tersebut.

Page 81 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Constructor Inheritance

Dalam constructor kita biasanya membuat property baik itu berisi value ataupun function. Di dalam
constructor, kita bisa memanggil constructor lain, dengan begitu kita bisa mewarisi (inheritance)
semua property yang dibuat di constructor lain tersebut. Untuk memanggil constructor lain, kita bisa
menggunakan [Link](this, parameter)

Page 82 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Prototype

Pada pembahasan-pembahasan sebelumnya, kita sudah mengetahui secara singkat bahwa JavaScript
merupakan bahasa protype based. Namun prototype based itu apaan sih? . Nah prototype based ini
merupakan suatu mekanisme yang cukup unique dari JavaScript. Bagaimana tidak unique?

Ketika kita membuat sebuah object dari constructor function, atau bahasa kerennya yaitu object
instance. Semua property yang berada di dalam object instance tersebut yakni value dan methodnya,
akan secara otomatis membuat prototype pada object instance nya atau bisa kita sebut sebagai
prototype inheritance

Misalkan, kita membuat constructor function yaitu Kucing, maka kita secara tidak langsung akan
membuat prototype yaitu, [Link]

Page 83 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kemudian untuk mengakses prototype tersebut kita bisa menggunakan keyword __proto__

Kemudian, bisakah kita menambahkan nilai ke dalam prototype? Tentu saja bisa dengan cara
[Link]

Page 84 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Prototype Inheritance

Pada bahasan di atas, kita sudah sedikit membahas prototype inheritance. Namun mari kita bahas
lebih detail disini. kita sudah tahu, bahwa prototype selalu memiliki parent, artinya dia adalah
turunan, parent tertinggi adalah Object prototype. Pertanyaannya bagaimana jika kita ingin
melakukan inheritance ke Prototype lain?

Hal ini juga bisa dilakukan, namun agak sedikit tricky, karena hal ini, sebenarnya untuk JavaScript
modern, tidak direkomendasikan lagi praktek OOP menggunakan Prototype, karena di ES6 sudah
dikenalkan kata kunci class yang akan kita bahas nanti

Keyword Class

Membuat class dengan constructor function, merupakan hal yang sangat-sangat tricky. Namun
semenjak kehadiran JavaScript versi modern, untuk membuat class pada JavaScript, kita bisa
menggunakan kata kunci class.

Page 85 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Page 86 of 150 Menjadi JavaScript Developer - Bahrul Rozak
Constructor pada Class

Karena bentuk constructor function mirip dengan function, jadi kita bisa menambah parameter pada
constructor function, lantas bagaimana dengan class? Pada class juga kita bisa menambah constructor,
dimana dengan menggunakan constructor, kita juga bisa menambah parameter saat pertama kali
membuat object nya. Untuk membuat constructor di class, kita bisa menggunakan kata kunci
constructor

Property pada Class

Sama seperti pada constructor function, dalam class pun kita bisa menambahkan property. Karena
hasil akhirnya adalah sebuah object, jadi menambahkan property di class bisa juga dilakukan di
instance object

Page 87 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Dengan adanya keyword class, ini sangat membantu kita, ketika ingin membuat object baru dari class
nya (instance) sebanyak-banyaknya, tanpa harus melakukan hal yang sama berulang-ulang

Method di Class

Sama halnya seperti pada constructor function, di dalam class kita juga bisa menambahkan method.
Contohnya seperti ini

Page 88 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Ketika kita lihat dengan cara seksama, maka method kemampuanKucing berada pada prototype, hal
dikarenakan pada JavaScript modern, ketika kita menambahkan method ke dalam class, maka secara
otomatis akan ditambahkan ke dalam prototype

Class Inheritance

Keuntungan lain yang didapatkan ketika kita menggunakan class, adalah kita cukup membuat satu
blueprint, maka otomatis dari blueprint tersebut dapat kita cetak menjadi class-class baru. Hal ini
dikarenakan class mendukung inherintance atau pewarisan. Sebuah class bisa melakukan pewarisan
dari class lainnya dengan menggunakan kata kunci extends. Di JavaScript, class inheritance sama
seperti prototype inheritance, hanya bisa memiliki satu parent class

Page 89 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Pada diagram diatas, kita memiliki sebuah blueprint dari object Kucing, maka properties atau method
yang berada pada blueprint tersebut, dapat kita turunkan pada class-class lainnya

Pada kasus ini kita menurunkan method kemampuanKucing, kepada class object yang lain yaitu
KucingPutih, jika kita lihat maka method tersebut akan terwarisi (inherintace) pada class baru yaitu
KucingPutih, mantap

Super Constructor

Sebenarnya Constructor Inheritance hanyalah melakukan eksekusi constructor lain dengan tujuan
agar property di constructor lain bisa ditambahkan ke instance object. Dalam kasus ini, jika kita ingin
mencapai hasil yang sama, kita bisa menggunakan kata kunci super di dalam constructor. Kata kunci
super digunakan untuk memanggil constructor super class. Jika di child class kita membuat
constructor, maka kita wajib memanggil parent constructor, walaupun di parent tidak ada constructor

Page 90 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Super Method

Selain digunakan untuk memanggil constructor milih parent class, kata kunci super juga bisa
digunakan untuk mengakses method parent class. Caranya bisa menggunakan super titik nama
function nya

Page 91 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Getter dan Setter di Class

Pada Class kita juga bisa melakukan Getter dan Setter. Getter dan Setter adalah kemampuan untuk
membuat function yang berbeda untuk mengambil data (Getter) dan mengubah data (Setter) pada
sebuah property di Object

Page 92 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Public Class Field

Seperti yang telah kita ketahui bahwa, ketika kita ingin menambahkan property yang berisi value
(field) di constructor. Kita harus memperhatikan yang namanya access modifier, access modifier
secara ssederhana yaitu sebuah konsep dalam OOP yang mengontrol akses dan visibilitas dari sebuah
variabel, method, atau kelas dalam sebuah program. Ada banyak access modifier dalam OOP
diantaranya yaitu public, private dan lain-lain. Namun disini kita akan terlebih dahulu membahas
tentang public. Public artinya bisa diakses dari luar class, dan private hanya bisa diakses dari dalam
class saja. Untuk membuat public class field, kita bisa langsung buat nama field dengan value nya
selevel dengan method. Jika kita tidak memasukkan value ke dalam field tersebut, artinya field
tersebut memiliki value yaitu undefined

Page 93 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Private Class

Berbeda dengan public class, private class hanya dapat diakses dari dalam kelas itu sendiri. Variabel,
method, atau kelas ini tidak dapat diakses dari kelas lain. Jika kita ingin membuat field yang bersifat
private (hanya bisa diakses di dalam class), kita bisa menggunakan tanda # sebelum nama field nya

Page 94 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Private Method

Dengan fitur ini, kita dapat menandai sebuah method sebagai “private” dengan menambahkan tanda
“#” di awal method. Hal ini akan membuat method tersebut hanya bisa diakses dari dalam kelas atau
objek yang sama. Namun, fitur ini masih dalam tahap usulan dan belum menjadi standar resmi dari
JavaScript. Sehingga, tidak semua browser atau lingkungan pemrograman JavaScript mendukung fitur
ini

Page 95 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Operator Instaceof

kadang-kadang kita butuh ngecek nih, apakah sebuah objek itu dibuat dari suatu class tertentu atau
nggak. Tapi kita nggak bisa pake operator “typeof” karena kalau objek itu dibuat dari class, hasilnya
bakal jadi “object” aja. Solusinya, kita bisa menggunakan operator “instanceof” untuk ngecek apakah
objek itu beneran instance dari class yang kita cari atau nggak. Hasilnya bakal jadi boolean, true kalau
beneran instance-nya, atau false kalau nggak

Page 96 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Static Class Field

biasanya ketika kita bikin field atau method di sebuah class, secara otomatis field-nya jadi properti di
instance object, dan method-nya jadi function di prototype object. Tapi, kadang-kadang kita pengen
bikin field atau method yang ga terikat dengan object-nya, artinya ga jadi properti atau function di
prototype. Nah, untuk bikin field atau method yang ga terikat dengan object, kita bisa pake kata kunci
“static”. Kalo kita tambahin “static” di depan field atau method, maka field atau method itu ga akan
jadi properti atau function di prototype object. Jadi, bisa dipanggil langsung dari class-nya aja tanpa
harus bikin instance object dulu

Namun, kalau kita tambahkan “static” di class field, maka field tersebut bukan lagi milik instance
object, tapi jadi milik class-nya sendiri. Nah, biasanya “static” digunakan kalo kita ingin bikin field atau
function yang bukan bergantung sama instance object. Misalnya, kalau kita bikin function untuk
ngitung luas atau keliling, kan tidak ada hubungannya sama objek-objek yang dibuat. Terus, cara
mengakses static class field juga beda dari biasanya. Kalo biasanya kita akses lewat objek yang dibuat
dari class, kalau yang static ini kita akses langsung lewat class-nya. Yang penting diingat dan perlu kita
perhatikan ialah, kalau field atau function yang dijadikan static itu bisa dianggap sebagai global.
Artinya, hasilnya akan sama, tidak peduli dari mana yang akses

Page 97 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Static Method

Suatu hari pak RT dengan pidatonya mengatakan bahwa “Para warga yang saya hormati, “static” itu
gak cuma bisa dipake di field di dalam suatu class, tapi juga bisa dipake di method. Kalau di method
dipake “static”, artinya method itu jadi punya class nya langsung, bukan punya objek yang dibuat dari
class itu. Kalau udah dipake “static” di method, gak perlu lagi bikin objek dari class itu buat akses
method-nya, para bapak atau ibu bisa langsung akses method nya dari class nya aja. Jadi, lebih mudah
dan praktis gitu.”

Tapi, perlu diperhatikan lagi bahwa, method yang udah dipake “static” itu gak bisa akses variabel atau
method yang bukan “static” di class yang sama. Jadi, kalo mau akses variabel atau method yang bukan
“static”, harus bikin objek dulu dari class-nya

Page 98 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Error

Saat kita membuat aplikasi, pasti tidak bisa menghindari adanya error. Di JavaScript, error memang
sudah menjadi hal yang biasa. Terdapat banyak class error di JavaScript, namun semuanya berakhir di
class Error sebagai superclass untuk semua jenis error di JavaScript. Beberapa contoh class error di
JavaScript adalah SyntaxError, TypeError, EvalError, dan masih banyak lagi. Kalau kita bikin objek dari
kelas Error, belum tentu ada error yang terjadi langsung. Kita harus memberitahu program kita kalau
kita bakal bikin sebuah error, atau dalam bahasa programmingnya, melempar error (throw error). Kita
bisa lempar error pake kata kunci “throw” diikuti sama objek errornya. Kalau terjadi error, program
kita bakal berhenti dan kita bisa lihat detil errornya di console di aplikasi browser kita

Page 99 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Error Handling

Error Handling terdiri dari dua suku kata yaitu Error dan Handling, artinya penanganan error :v, jadi
gini Kadang-kadang kita gak mau program kita langsung berhenti kalo ada error di kode program
JavaScript. Nah di JavaScript, kita bisa nangkep kalo ada errornya. Caranya kita pake statement try-
catch. Di block try, kita coba akses kode program yang bisa bikin error. Kalo ada error, blok try bakal
berhenti dan langsung masuk ke block catch. Tapi kalo gak ada error, block catch yak gak bakal
dieksekusi

Selain try-catch ada juga kata kunci finally. Apa itu bang Mes? Eh:v . Jadi Kadang-kadang kita mau
ngelakuin sesuatu, entah kalo terjadi error atau enggak. Nah, di statement try-catch, kita bisa
nambahin block “finally”. Block “finally” ini bakal selalu dieksekusi setelah try-catch selesai, tanpa
peduli kalo ada error atau enggak

Page 100 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Manual Class Error

JavaScript sudah menyediakan kelas standar yang bernama “Error” untuk menangani kesalahan atau
error pada program. Kelas ini memungkinkan kita untuk membuat sebuah objek error dan
menambahkan pesan yang dapat memberikan informasi lebih rinci tentang kesalahan yang terjadi
pada program. Namun, walaupun JavaScript sudah memiliki kelas standar “Error”, sebaiknya kita
membedakan jenis-jenis error yang terjadi pada program kita. Untuk membuat sebuah error sendiri
secara manual di JavaScript, caranya sangat mudah, yaitu dengan membuat kelas turunan dari kelas
“Error”. Dalam membuat kelas turunan ini, kita dapat menentukan jenis error yang ingin kita tangani
pada program. Misalnya, jika kita ingin menangani kesalahan karena penggunaan tipe data yang salah
pada suatu fungsi, kita dapat membuat kelas turunan “TypeError”. Selain membuat kelas turunan
“Error”, kita juga harus memberikan parameter pesan yang jelas pada objek error yang kita buat. Hal
ini sangat penting agar pesan error dapat memberikan informasi yang cukup jelas dan dapat
membantu kita dalam menemukan penyebab kesalahan yang terjadi pada program. Parameter pesan
ini biasanya dikirimkan ke konstruktor kelas “Error” yang kita turunkan. Dengan membedakan jenis-
jenis error dan memberikan pesan error yang jelas, kita dapat dengan mudah menangani dan
memperbaiki kesalahan yang terjadi pada program kita

Page 101 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Built in Class

Di JavaScript sudah terdapat built-in class atau class bawaan, seperti Date, Object, Array, Math, dan
String. Sebagai contoh kita tidak perlu lagi menuliskan kode program yang rumit untuk mengatur dan
memanipulasi tanggal dan waktu. Kita dapat menggunakan built-in class Date yang sudah tersedia di
dalam bahasa pemrograman JavaScript. Class ini sangat membantu untuk memudahkan pengolahan
terkait dengan tanggal dan waktu

Page 102 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Mengenal Functional Programming

Seperti yang telah kita ketahui bahwa mamang JavaScript ini sungguh sangat fleksibel sekali
orangnya :v Bagaimana tidak fleksibel? beliau ini bahkan dijuluki orang yang sangat

Multipurpose -> Pernah dengar fullstack JS? Itu jawabannya

Multiparadigm -> OOP? iya, Prototype? juga iya, Functional Paradigm?mari kita bahas
Dan masih banyak multi-multi lainnya :v
Kembali ke topik, lantas apa sih functional programming itu? Menurut pidato yang disampaikan oleh
bapak RT pekan lalu. Beliau berkata bahwa

“konsep functional programming pada JavaScript ini sebenernya tentang cara nulis kode yang fokus
ke fungsi-fungsi matematika yang “murni”. Artinya, fungsi-fungsi ini nggak berubah-ubah nilainya
tergantung sama hal-hal di luar fungsi itu sendiri. Di samping itu, kalau bapak, ibu atau warga sini
pake konsep functional programming, nantinya juga lebih sering nggak pake variabel yang berubah-
ubah nilainya. Sebaliknya, kita ngasih input ke fungsi dan diharapkan balikannya itu konsisten dan
nggak berubah-ubah tergantung sama inputnya. Contohnya gini misalkan bapak atau ibu ingin
menjumlahkan 1 + 1 ya maka hasil yang diharapkan adalah 2. Banyak orang juga bilang, pake konsep
functional programming itu bisa bikin kode kita lebih mudah dipahami sama orang lain, karena
fungsinya lebih spesifik dan terisolasi dari bagian-bagian lain di program kita.”

Untuk lebih jelasnya mari kita lihat perbedaan antara menggunakan pendekatan imperatif dengan
functional programming.

Sekarang bandingkan dengan menggunakan pendekatan functional programming.

Page 103 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Dalam contoh tersebut, kita membuat dua fungsi yaitu absoluteValue() dan calculateTriangleArea().
Kedua fungsi tersebut hanya menerima input sebagai argumen dan mengembalikan nilai yang terkait
dengan input tersebut. Fungsi absoluteValue() menggunakan fungsi [Link]() untuk mengambil nilai
absolut dari input yang diberikan. Kita bisa pastikan bahwa nilai yang dikembalikan dari fungsi
absoluteValue() selalu bernilai positif dan tidak bergantung pada hal-hal di luar input. Fungsi
calculateTriangleArea() juga hanya menggunakan input base dan height untuk menghitung luas
segitiga. Tanpa memodifikasi variabel di luar fungsi, fungsi ini mengembalikan hasil yang konsisten
sesuai input yang diberikan. Dalam kedua contoh tersebut, kedua fungsi tersebut diimplementasikan
dengan prinsip-prinsip functional programming yaitu fokus pada fungsi-fungsi yang “murni” dan
hanya mengambil input dari argumen fungsi.

Berbeda dengan menggunakan pendekatan imperatif :v Dalam contoh tersebut, kita menggunakan
variabel untuk menampung data dan menggunakan kondisi if-else untuk mengubah nilai variabel
number menjadi nilai absolut. Dalam kasus penghitungan luas segitiga, kita menggunakan variabel
base dan height untuk menghitung luas segitiga. Perbedaan utama antara kedua pendekatan tersebut
adalah pada konsep fokus. Pada pendekatan functional programming, kita fokus pada fungsi-fungsi
yang “murni” dan hanya menggunakan input yang diberikan sebagai argumen. Sedangkan pada
pendekatan imperatif, kita menggunakan variabel sebagai wadah untuk data dan melakukan operasi
pada variabel tersebut. Pendekatan functional programming dianggap lebih mudah untuk dibaca dan
dimengerti oleh orang lain karena kode yang dibuat lebih terisolasi dan fungsi-fungsinya lebih spesifik.
Selain itu, dengan fokus pada fungsi-fungsi yang “murni”, kita dapat lebih mudah melakukan
pengujian dan debugging pada kode. Bagaimana? menarik bukan hehe.

Pure Function

Nah salah satu konsep dari functional programming ini adalah Pure Function. Pure Function itu apa
sih? Pure Function adalah konsep untuk membuat fungsi yang seharusnya tidak bergantung sama nilai
di luar fungsi atau parameter yang diberikan ke fungsi. Jadi, walaupun kondisi di luar atau parameter
yang diberikan beda-beda, tapi fungsi yang dibuat selalu menghasilkan nilai yang sama. Untuk lebih
jelasnya mari kita simak study case berikut.

Misalnya kamu punya fungsi untuk menghitung luas lingkaran. Nah, fungsi ini cuma butuh jari-jari
lingkaran sebagai parameter, dan nggak butuh variabel atau nilai dari luar fungsi. Jadi, fungsi ini bisa
dibuat sebagai Pure Function.

Page 104 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Berbeda jika kita punya fungsi untuk mengambil data dari sebuah API, dan API ini mungkin akan
berubah-ubah nilainya tiap kali dipanggil. Nah, fungsi ini bergantung pada nilai di luar fungsi (yaitu
data dari API), sehingga fungsi ini tidak bisa dijadikan Pure Function. Mantap :v

Immutability

Selain Pure Function ada juga immutability pada Functional Programming. Hmm kira-kira apaan ya?
Mari kita simak pidato Pak RT lagi :v

“Para bapak, ibu dan warga. Jadi begini, Immutable itu artinya para bapak, ibu, kakak-kakak, adik-adik
nggak bisa mengubah objek setelah objek itu dibuat. Sedangkan Mutable artinya kita boleh
mengubah objek itu setelah objek itu dibuat. Gitu aja sih. Oke”

Untuk lebih jelasnya mari kita simak contoh immutable dan mutable.

Contoh Immutable:

Misalnya kita mempunyai variabel name yang isinya adalah string "John". Kita tidak bisa mengubah
variabel name ini setelah dideklarasikan, karena string pada dasarnya bersifat Immutable. Kita hanya
bisa membuat variabel baru katakanlak dengan nama fullName`dengan nilai string yang berbeda.

Contoh Mutable:

Misalnya kita mempunyai array daftarBelanja yang berisi beberapa barang belanjaan. Kita bisa
menambah, menghapus, atau mengubah barang-barang di dalam array tersebut, setelah array
tersebut dibuat.

Recursive

konsep selanjutnya di Functional Programming adalah rekursif. Rekursif itu sendiri adalah teknik di
mana sebuah fungsi memanggil dirinya sendiri.

Page 105 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Misalnya kita mempunyai fungsi yang memanggil dirinya sendiri untuk menghitung faktorial. Faktorial
adalah hasil perkalian dari sebuah bilangan dengan semua bilangan di bawahnya. Contohnya, 5! sama
dengan 5 x 4 x 3 x 2 x 1.

High Order Function

High Order Function adalah sebuah konsep pada Functional Programming di mana sebuah fungsi
dapat menerima fungsi lainnya sebagai argumen dan/atau mengembalikan sebuah fungsi. Dengan
konsep ini, fungsi dapat dianggap sebagai nilai yang dapat diproses, sama seperti halnya variabel.
Contohnya seperti ini, kita mempunyai sebuah fungsi hitung, yang menerima dua argumen, yaitu
sebuah fungsi operasi dan dua angka a dan b.

Di dalam fungsi hitung, kita memanggil fungsi operasi dengan dua angka a dan b sebagai argumennya.
Ini artinya, kita bisa memberikan fungsi apa pun sebagai argumen operasi, selama fungsi tersebut
menerima dua angka sebagai argumennya dan mengembalikan hasil operasi. Sebagai contoh, kita bisa
membuat dua fungsi penjumlahan dan perkalian yang akan digunakan sebagai argumen untuk fungsi
hitung.

Page 106 of 150 Menjadi JavaScript Developer - Bahrul Rozak

JavaScript Module

JavaScript module merupakan suatu teknik keren yang dapat kita gunakan untuk membuat code
JavaScript menjadi lebih powerfull, maintenable, scalable dan meningkatkan produktivitas .
Maksudnya apa bang? Oke biar lebih mudah saya akan mencoba menjelaskan dengan ilustrasi saja ya
hehe.

Pada ilustrasi tersebut, katakanlah kita mempunyai satu buah file [Link] yang berisi kumpulan fungsi
(library) untuk melakukan operasi perhitungan matematika. Ada penjumlahan, pengurangan,
pembagian, perkalian dan lain-lain. Tapi seiring perkembangan waktu dan permintaan konsumen,
maka ditambahkanlah fitur-fitur lain. Tapi kok! Code yang kita buat malah jadi banyak bug! kemudian
kita pusing dan kesulitan membaca code, karena kodenya sudah banyak dan akhirnya produktivitas
kita menurun! Ya hal ini memang wajar dan dulu sewaktu saya masih bau kencur untuk management
file juga begitu hehe, santai saja! namanya ketika kita belajar dan salah itu tidak apa-apa. Take it Easy!

Sekarang bandingkan jika kita menerapkan JavaScript module.

Dengan hadirnya JavaScript module ini membawa era keemasan bagi JavaScript, karena mengapa?
berkat konsep ini tercipta banyak sekali library dengan sifat reusable component seperti ReactJS.

Page 107 of 150 Menjadi JavaScript Developer - Bahrul Rozak

JavaScript Modules diawali pada teknologi bernama NodeJS, selanjutnya banyak library yang
mengadopsi penggunaan JavaScript Modules di NodeJS agar bisa berjalan di Web Browser, seperti
library CommonJS, AMD, RequireJS, dan lain-lain. Namun untungnya, saat ini Browser modern sudah
banyak mendukung JavaScript Modules, kecuali jika masih menggunakan Internet Explorer.

Dengan menggunakan JavaScript module, kita dapat dengan mudah untuk melakukan maintenance,
scalable dan tentu saja meningkatkan produktivitas kita. Karena code yang sebelumnya ditulis dalam
satu file besar, kini dipecah-pecah menjadi module yang ter isolate sesuai dengan tujuannya dan ini
akan menjadi hal yang menyenangkan bukan?

Import dan Export pada JavaScript Module

Ketika kita mulai mempelajari dan menerapkan JavaScript module, ada dua kata kunci ajaib yang akan
sering kita gunakan, yaitu Export dan Module. Export merupakan kata kunci yang digunakan untuk
memberitahu module lain, bagian mana yang ingin kita ekspose keluar, sehingga bisa di-import oleh
module lain. Sedangkan untuk Import merupakan kata kunci yang digunakan untuk mengambil
sesuatu dari module lain. Jadi jangan lupakan import dan export ya hehe!.

Membuat Project

Tibalah saatnya kita untuk praktik menerapkan JS module, tapi sebelum itu mari kita lakukan
konfigurasi dan setup untuk development environtmentnya.

Silahkan buat satu buah folder bernama aplikasiMath. Kemudian di dalam folder tersebut buat satu
buah file [Link] dan satu buah file [Link]

Setelah itu, silahkan tuliskan code berikut pada [Link]

Dan pada file [Link]

Page 108 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Sekarang, mari kita lihat hasilnya pada browser.

Nah sekarang, mari kita ubah file [Link] tersebut ke dalam bentuk module-module sesuai dengan
tujuannya. Misalkan module [Link] berarti berisi fungsi untuk melakukan operasi
penjumlahan, gitu deh.

Jika bingung berikut isi dari file-file tersebut.

Page 109 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kemudian pada file [Link] kita ubah codenya menjadi seperti berikut.

Page 110 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Pada src kita menambahkan type="module" artinya kita memberitahukan bahwa sedang
menggunakan JS Module. Sekarang mari kita lihat hasilnya pada browser.

Sampai sini, artinya teman-teman sudah bisa dan paham bagaimana cara menggunakan JS Module,
tapi tenang saja masih ada part selanjutnya yang akan saya bagikan tentang JS Module.

Melakukan Import & Export Module

Jika pada pembahasan sebelumnya kita telah berhasil untuk memisahkan dan menerapkan module
pada project, tapi bagaimana jika kita hanya ingin menggunakan module tertentu saja, misalkan
hanya [Link]? Kita bisa menggunakan dua kata kunci ajaib yaitu import dan export bro!.

Export merupakan kata kunci yang digunakan untuk memberitahu module lain, bagian mana yang
ingin kita ekspose keluar, sehingga bisa di-import oleh module lain. Untuk penggunaan export sendiri
caranya cukup mudah ya teman-teman, contohnya seperti ini bro!

export namaFunction Jika kita terapkan pada project aplikasiMath, kita maka kira-kira seperti ini.

Page 111 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kemudian pada file [Link], kita bisa import module tersebut caranya yaitu dengan import
namaModule from blablabla contohnya ya seperti ini.

Ketika kita lihat pada browser, maka akan didapatkan hasil berikut.

Akan error, karena kita harus menggunakan export default, ini adalah fitur yang digunakan untuk
mempermudah untuk membuat default data di module, dan membantu JavaScript agar kompatibel
dengan CommonJS dan AMD module system. Sekarang mari kita sediki perbaiki file [Link]
dengan menambahkan default.

Maka akan tidak terjadi error.

Page 112 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Pembuatan Variable untuk Module

Selain function, kita juga bisa loh meng import dan meng export variable pada module, keren sekali
bukan? Misalkan kita mempunyai sebuah file bernama [Link] dalam file tersebut ada beberapa
variable terkait dengan user yaitu, username, emailAddress

Untuk mengexport variable-variable tersebut caranya seperti ini. Kita bisa menampung pada sebuah
object. Jadi lebih terlihat rapi bukan?

Kemudian pada file [Link] untuk mengimport variable-variable tersebut caranya cukup lakukan
seperti ini.

Memang mantap sekali bukan?

Page 113 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Pembuatan Class suatu Module

Selain function dan variable, kita juga bisa loh meng import dan meng export suatu class pada module!
Menarik sekali bukan? Contohnya ya seperti ini.

Export Multiple suatu Module

Sebenarnya kita bisa menggunakan export sekaligus beberapa data sekaligus, caranya cukup gunakan
perintah :

export {functionLagi, FunctionLagiLagi}

Page 114 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Kemudian pada file [Link]

Hasilnya adalah.

Pembuatan Alias suatu Module

Pas kita membuat aplikasi JavaScript yang makin lama makin canggih, kemungkinan modulenya juga
makin banyak bro. Nah, ada satu masalah nih, kadang-kadang ada nama variabel, fungsi, atau kelas
yang sama di beberapa module. Bikin bingung kan? Tapi untungnya, ada solusinya, bro! Module
punya fitur yang namanya “alias”. Jadi, kita bisa ganti nama variabel, fungsi, atau kelasnya biar gak

Page 115 of 150 Menjadi JavaScript Developer - Bahrul Rozak

bentrok antar module. Jadi lebih gampang deh buat ngatur dan nyusun module-module kita tanpa
ribet. Caranya menggunakan kata kunci as, lalu diikuti dengan nama alias :

export {variable as variableLain, function as functionLain}

Pada file [Link] caranya seperti ini bro!

import {namaAlias, namaAliasLagi} from blablabla

Page 116 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Module Object

Jadi begini, bayangkan kita mempunyai sebuah modul yang isinya banyak sekali data yang bisa diakses
dari luar. Nah, kalau kita harus mengimport satu persatu datanya, pasti bakal jadi kacau, ribet dan
membuat kita ketar-ketir. Oleh karena itu, menurut saran dari Pak RT, Kalau kita ingin mengimport
modul dengan banyak data, sebaiknya kita pakai Module Object. Jadi, Module Object itu sebenarnya
objek JavaScript yang berisi atribut-atribut hasil dari data yang di-export di modul tersebut.

Untuk menggunakanya sangat mudah sekali tidak ribet seperti ngurus KT* #eh , Kita tinggal import *
as NamaModule from “./[Link]”. Nah, setelah itu, kita bisa menggunakan NamaModule sebagai
objek untuk modul tersebut. Jadi, dengan begitu, kita bisa akses semua data yang di-export di modul
itu dengan lebih mudah, rapih dan meningkatkan produktivitas dan kebahagian hahaha

Page 117 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Aggregating Module

Terkadang kita ingin mengumpulkan beberapa modul jadi satu biar lebih mudah digunakan.
Bayangkan! Kalau module yang kita buat itu sudah banyak!, terus kita butuh banyak kode dari modul-
modul itu, kita harus sebutin satu per satu nama modulnya tiap kali kita import. Auto ketar-ketir, lah
min :v

Nah, solusinya ada nih! Kita bisa membuat module aggregate. Jadi, module ini isinya gabungan dari
export yang ada di modul-modul lain.

Caranya simpel banget, cukup gunakan perintah

export {a,b,c,d} from "./[Link]";

Nah, dengan melakukan hal tersebut, kita bisa menggabungkan export dari modul lain ke dalam
module aggregate kita.

Pokoknya, dengan bikin module aggregate, kita bisa ngatur semua export dari modul-modul itu jadi
lebih sederhana. Jadi, pas kita mau menggunakan banyak kode dari banyak modul, tinggal import
module aggregatenya aja. Sangat-sangat mantap sekali bukan? Bukan!

Dynamic Module Loading

Jadi pak RT pernah berkata seperti ini . “Kalau kita menggunakan module dengan cara import biasa,
semua module itu bakal langsung diload semua. Jadi, kayaknya ribet ya, kan bisa jadi module yang
kita butuhkan tidak semuanya kita gunakna. Terus, ini juga bisa menghabiskan anggaran #eh
maksudnya bandwith jaringan karena kita harus download semua module itu dari awal.

Tapi tenang, JavaScript punya solusinya! JavaScript mendukung dynamic module loading, jadi kita bisa
load module hanya ketika kita butuhkan aja. Jadi, kita tidak perlu load semua module sekaligus.

Page 118 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Caranya mudah, kita bisa pake function yang namanya import(). Nah, kalo kita menggunakan ini,
hasilnya bakal jadi Promise<ModuleObject>. Jadi, kita bisa menunggu Promisenya selesai, baru deh
kita bisa akses Module Object-nya. Mantap? Mantap min :v

Document Object Model

Document Object Model adalah representasi struktural dari dokumen HTML. DOM memungkinkan
code JavaScript untuk mengakses dan melakukan manipulasi terhadap elemen-elemen dalam
dokumen tersebut.

DOM dapat dipahami sebagai bentuk pohon berhierarki yang terdiri dari objek-objek. Setiap elemen,
atribut, dan teks dalam dokumen direpresentasikan oleh objek dalam DOM. Objek-objek ini memiliki
metode dan properti yang dapat digunakan untuk memanipulasi struktur dan konten dokumen.

Page 119 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Pada saat halaman web dimuat oleh browser, browser akan membangun model DOM dari dokumen
HTML. Model DOM ini terdiri dari serangkaian node-node yang saling berhubungan. Node-node ini
mewakili elemen-elemen dalam dokumen, seperti tag <div>, <p>, atau <a>, serta teks atau atribut
yang terkait.

Node-node dalam DOM memiliki hubungan hierarkis, di mana satu node dapat menjadi induk (parent)
dari node lainnya dan node tersebut dapat memiliki node-node anak (children). Selain itu, node-node
juga dapat memiliki node saudara (sibling) yang memiliki induk yang sama. Dengan menggunakan
hubungan hierarkis ini, kita dapat melakukan navigasi dan manipulasi elemen-elemen dalam
dokumen.

Dalam JavaScript, kita dapat menggunakan API DOM untuk berinteraksi dengan elemen-elemen
dalam dokumen. Misalnya, kita dapat menggunakan metode getElementById() untuk mengambil
referensi ke elemen dengan ID tertentu, lalu mengubah kontennya menggunakan properti innerHTML.
Kita juga dapat menambahkan atau menghapus elemen-elemen, mengubah atributte, dan melakukan
berbagai manipulasi lainnya

Tipe data pada DOM

DOM itu mempunya cara untuk merepresentasikan data. Misalnya, ketika kita melihat halaman
website, DOM ini bisa menggambarkan struktur dan isi dari halaman website tersebut. Misalnya,
gambar, teks, tombol, dan element-element lainnya di dalam halaman website bisa direpresentasikan
dalam DOM.

Nah, yang menariknya adalah, DOM itu sebenarnya tidak mempunyai terlalu banyak tipe data yang
berbeda. Jadi walaupun terbatas dalam tipe data, DOM ini tetap bisa kita gunakan, mantap sekali
bukan?. Bukan!

Tipe Data DOM — document

Document merupakan representasi object dari sebuah halaman website. Dalam satu halaman website,
terdapat satu document, dan kita tidak perlu membuatnya secara manual, karena otomatis secara
default akan ada di browser. Untuk mengakses Tipe data document, kita bisa gunakan object
document dengan keyword document udah gitu aja :v

Di dalam document ini akan ada banyak sekali document property, nah property dalam document
bisa kita gunakan untuk melihat semua data yang terdapat dalam document halaman website seperti
misalnya title, body dan images. Berikut ini contohnya.

Page 120 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Berbicara property pastilah kita teringat dengan yang namanya method. Nah di document ini juga ada
method loh, wah :v. Sama seperti property, method pada document juga ada banyak sekali.

Banyak method yang terdapat di document digunakan untuk memanipulasi data DOM, misalnya
untuk membuat Node, Element, Attribute atau mengambil dan menyeleksi Node di dalam document
dan masih banyak lagi :v

Contohnya seperti berikut

Tipe Data DOM — Node

Node adalah base class dari Document, Element dan Attr. Artinya semua fitur yang dimiliki di Node
dimiliki diturunannya. Node dalam DOM itu bentuknya adalah Tree (pohon) seperti yang sudah kita
bahas di atas, artinya dengan Node, kita bisa melihat Parent (node diatas nya), Children (node
dibawahnya), Sibling (node disebelahnya).

Page 121 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Di dalam Node juga terdapat banyak sekali property. Property di Node banyak berisi informasi
reference ke Node lain nya, seperti ke node parent nya, node children nya atau node sebelahnya
(sibling).

Selain property, Node juga memiliki banyak sekali method. Method di dalam Node bisa digunakan
untuk melakukan manipulasi data Node di dalam Node tersebut, misalnya menambah atau
menghapus Node children.

Page 122 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Lebih Banyak Tipe Data DOM

Jika pada materi sebelumnya kita sudah mengenal apa itu DOM

Bukan DOM yang itu:v Tapi yang disini dan juga tipe data Dom seperti document dan Node. Kini
saatnya kita membahas tipe data DOM lainnya.

Tipe Data pada DOM — Element

Element di dalam DOM (Document Object Model) merujuk pada object yang mewakili element-
element HTML dalam sebuah halaman website. Setiap elemen HTML seperti <div>, <p>, <h1> dan
lain-lain direpresentasikan oleh objek Element di dalam DOM.

Dengan menggunakan Element di DOM, kita dapat mengakses dan melakukan manipulasi struktur,
konten, dan perilaku element-element HTML dalam sebuah halaman website. Contohnya sebagai
berikut.

Page 123 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Element pada DOM memiliki banyak sekali property yang memungkinkan kita untuk memanipulasi
element tersebut. Properti seperti id, className tagNamememungkinkan kita untuk mengakses dan
mengubah isi, teks, dan gaya dari elemen. Dan karena Element adalah turunan dari Node, semua
property Node pun bisa digunakan di Element.

Selain property, element juga memiliki banyak sekali method. Method seperti querySelector,
appendChild, dan remove memungkinkan kita untuk mencari elemen, menambahkan element

Page 124 of 150 Menjadi JavaScript Developer - Bahrul Rozak

sebagai children atau menghapus element dari document seperti remove. Hal ini disebabkan karena
element adalah turunan dari Node, semua method Node pun bisa digunakan di element.

Kalau Sebelumnya kita hanya mengambil element menggunakan id, artinya kita perlu buat dulu
elementnya di HTML. Ternyata kita juga bisa membuat object element baru, dan menambahkannya
ke halaman website. Untuk membuat object element baru tersebut kita bisa menggunakan method
createElement(tag) pada Document. Contohnya seperti ini.

Page 125 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Tipe Data pada DOM — NodeList
Selanjutnya adalah NodeList, apa itu NodeList? Jika ditelusur asal katanya maka berarti kumpulan
node. Biasanya NodeList ini akan digunakan ketika kita menyeleksi banyak Node sekaligus, misal
ketika kita ingin mengambil semua children di Node.

Nodelist memiliki 2 type yaitu static dan live. Static artinya perubahan yang terjadi pada NodeList nya,
tidak akan merubah semua NodeList yang sama. Saat kita menggunakan [Link](),
NodeList tersebut bersifat Static. Sedangkan Live artinya perubahan yang terjadi pada NodeList nya,
akan merubah semua NodeList yang sama. Contohnya saat kita menggunakan [Link],
NodeList tersebut bersifat Live.

Tipe Data pada DOM — Attribute

Attribute merupakan representasi dari attribute sebuah element, atau singkatnya key-value, key nya
adalah nama attribute misalkan jika pada gambar maka nama attributenya adalah src, dan value nya
adalah value attribute, misalkan jika pada gambar maka valuenya adalah url dari gambar.

Namun terkadang kebanyakan programmer ingin langsung mendapatkan value attributenya. Jarang
sekali menggunakan object attributenya Nah untuk mendapatkan value secara langsung, kita bisa
menggunakan [Link](name)di Element.

Page 126 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Selain itu, kita juga bisa create attribute. Untuk membuat attribute, kita bisa menggunakan
[Link](name). kemudian untuk menambahkannya ke Element,
[Link](attribute)Atau kita juga bisa langsung membuat attribute langsung dengan
name dan value nya menggunakan [Link](name,value).

NamedNodeMap

NamedNodeMap merepresentasikan kumpulan object attribute. Object di dalam NamedNodeMap

tidak memiliki urutan tertentu, tidak seperti pada NodeList, meskipun mereka dapat diakses dengan
indeks seperti pada Array.

Page 127 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Objek NamedNodeMap bersifat live dan dengan demikian akan diperbarui secara otomatis jika ada
perubahan pada isinya baik secara internal maupun di tempat lain.

TextNode

Saat kita membuat dokumen HTML, kadang kita membuat teks tanpa tag Saat halaman web tersebut
direpresentasikan dalam DOM, text tanpa tag bukanlah merupakan Element, melainkan Node. Lebih
tepatnya adalah TextNode.

Namun kita juga bisa membuat textNode sendiri menggunakan method

[Link](string)Hasilnya berupa Text yang bisa kita tambahkan ke Node lain pada
dokumen HTML.

Page 128 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Event Handler

Node memiliki kemampuan bereaksi terhadap suatu event, misalkan event di klik mouse di atas node
tersebut dan lain-lain. Ada banyak sekali jenis event yang bisa kita buatkan aksinya ketika event
tersebut terjadi atau bahasa kerennya mah adalah Event Handler.

Nah ternyata! Ada dua cara untuk menambahkan Event Handler ke Node, menggunakan Event Target
atau Global Event Handler. Perbedaan tersebut ialah.

Jika kita menggunakan Event Target, kita bisa menggunakan method addEventListener(type, callback)
untuk menambahkan Event Handler. Event Target sendiri merupakan parent class dari Node, artinya
semua Node memiliki kemampuan dari Event Target.

Sebelum klik

Setelah diklik

Apabila, kita menggunakan Global event handler untuk menambahkan event handler, maka hanya
kontrak yang bisa kita gunakan untuk menambah event handler sesuai dengan type event nya. Hal ini
dikarenakan Global Event Handler bukanlah sebuah superclass.

Page 129 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Event

Dari tadi kita sudah berdiskusi tentang Event, tapi sampai sekarang kita belum berkenalan dengan apa
itu Event ? :v

Jadi DOM sendiri itu memiliki banyak sekali jenis event, tidak hanya click yang baru-baru ini kita
pelajari. Jenis event yang bisa kita gunakan biasanya disesuaikan dengan target event nya, misalkan
pada element video, ada event play, pause, sedangkan pada element button, tidak ada event play
atau pause.

Kemudian Saat kita membuat callback function untuk Event Handler, kita juga bisa menerima data
event yang memicu event itu terjadi atau bahasa kerennya mah trigger event :v . Data Event tersebut
bisa berbeda-beda, tergantung jenis Event nya, contohnya untuk click, data event nya berupa Mouse
Event (yang berisi lokasi mouse dan lain-lain.

Page 130 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Style

Seperti yang sudah kita ketahui bahwa, dengan DOM kita bisa manipulasi seluruh konten dalam
halaman website, salah satunya ialah attribute style.

Menariknya adalah Kita tidak perlu menggunakan setAttribute("style","value:) setiap ingin melakukan
manipulasi attribute style dari sebuah element, melainkan kita bisa menggunakan
[Link]=value Mantap sekali bukan? Bukan!

Namun yang perlu kita perhatikan ialah, saat mengubah sebuah style, penamaan style menjadi
berubah. Pada style css, rata-rata menggunakan format lowercase dan -, misalkan background-color.
Sedangkan pada DOM Style, menggunakan format pascalCase, misalkan backgroundColor. Oke:v

InnerText dan InnerHTML

Mari kita awali series ini dengan pembahasan innerText dan innerHTML. Selain textContent, terdapat
property lain bernama innerText untuk mendapatkan isi text dari sebuah element.

Memang tujuan antara textContent dan innerText itu sama, yaitu untuk mengambil atau mengubah
isi text konten dari sebuah element, namun walaupun keduanya sama ternyata ada perbedaan yang
sangat signifikan diantara keduanya.

Page 131 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Jika kita menggunakan textContent maka beliau ini akan mengembalikan semua isi dari konten text
sebuah element. Akan tetapi jika kita menggunakan innerText beliau ini sedikit lebih canggih yaitu
beliau bisa tahu, bagian text mana yang ditampilkan dan beliau hanya akan mengambil text yang
ditampilkan saja. Wah canggih sekali bukan? Bukan!

Terlihat sekali perbedaanya bukan? Jika kita menggunakan innerText maka hanya akan menampilkan
text saja, bukan keseluruhan kontennya seperti textContent padahal kan [Link](“hai”) harusnya
kan diterjemahkan menjadi string hai, ini malah ditampilkan bersama syntaxnya :v

Lantas bagaimana dengan InnerHTML?

Nah kalau inner HTML ini beliay akan mengambil seluruh element HTML nya sebagai text dalam
bentuk tipe data string. Beliau ini juga cocok jika kita ingin mengubah isi dari element menggunakan
text yang berisi tag HTML. Contohnya seperti ini

semua tag HTML akan diambil dan direturn dalam bentuk stringnya, mantap sekali bukan? Bukan!

Page 132 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Nah salah satu kemampuan dari innerHTML adalah, kita bisa mengubah isi dari children sebuah
element hanya dengan string. Tag yang terdapat di dalam String secara otomatis akan menjadi child
element.

Window

Window merupakan representasi window pada browser yang berisikan DOM Document, yaitu
struktur representasi dari halaman website yang terdiri dari element-element HTML.

Beberapa fungsi JavaScript sebenarnya berasal dari object Window, seperti alert(), confirm(), dan
prompt(). Fungsi-fungsi ini digunakan untuk menampilkan pesan, meminta konfirmasi atau menerima
input dari pengguna melalui jendela dialog.

Selain fungsi-fungsi tersebut, ada banyak sekali property, method dan event lain yang bisa kita
gunakan pada object Window. Property-property ini mencakup informasi tentang jendela, seperti
ukuran, posisi, URL halaman, dan lainnya. Method-method memungkinkan kita untuk melakukan
manipulasi terhadap jendela, seperti membuka atau menutup jendela, mengganti URL, dan lain-lain.
Sedangkan event adalah interaksi atau kejadian yang terjadi pada Window, seperti mengklik tombol,
menggeser Window, atau mengisi formulir.

Hal yang menarik adalah, untuk menggunakan Window, kita tidak perlu secara eksplisit membuat
object Window. Window adalah object global yang sudah tersedia secara default di dalam lingkungan
JavaScript pada browser. Kita dapat mengaksesnya dengan menggunakan kata kunci “window” tanpa
perlu mendeklarasikan object baru. Sebagai contoh, jika kita ingin mengakses property atau
memanggil method dari objek Window, kita dapat menggunakan syntax [Link] atau
[Link]

Page 133 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Query Selector

Sebelumnya kita telah menggunakan method querySelectorAll()pada object Document dan sekarang
kita akan membahas lebih detail tentang Query Selector.

Query Selector adalah method yang digunakan untuk melakukan seleksi terhadap node-node sesuai
dengan pola yang ingin kita cari.

Ada dua method yang dapat digunakan untuk Query Selector:

Yang pertama ialah, menggunakan method [Link]() method ini digunakan untuk
menyeleksi node pertama yang sesuai dengan pola yang ditentukan.

Yang kedua ialah, menggunakan method [Link]() method ini digunakan untuk
menyeleksi semua node yang sesuai dengan dengan pola yang ditentukan.

Kemudian pola untuk Query Selector adalah menggunakan CSS Selector. Penggunakan Pola nya mirip
ketika kita membuat Selector di CSS seperti universal selector, type selector, class selector, id selector,
attribute selector dan lain-lain.

Page 134 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Anda bingung? Apalagi saya :v

Oke mari kita jabarkan satu persatu saja.

Universal Selector

Universal Selector merupakan selector untuk menyeleksi semua element (*). Untuk menggunakan
universal selector kita bisa lakukan seperti ini querySelectorAll("*") .

Type Selector

Type Selector adalah selector yang digunakan untuk menyeleksi tag type HTML yang kita pilih. Untuk
menggunakan type selector, kita bisa langsung sebutkan nama tag nya seperti ini
querySelectorAll("tagHTML")

Class Selector

Class Selector merupakan selector untuk menyeleksi semua element yang memiliki class yang sesuai
selector. Untuk menggunakannya, kita bisa sebutkan nama class nya diawali dengan (“.namaClassnya”)
seperti ini querySelectorAll(“.namaClassnya”)

Page 135 of 150 Menjadi JavaScript Developer - Bahrul Rozak

ID Selector

ID Selector merupakan selector yang digunakan untuk menyeleksi id yang sesuai selector. Untuk
menggunakannya, kita bisa gunakan nama id diawali dengan karakter #. Contohnya seperti ini
querySelectorAll("#namaID"

Attribute Selector

Attribute Selector merupakan selector yang bisa kita gunakan untuk menyeleksi element berdasarkan
attribute nya. Kita bisa menggunakan selector [attribute] atau bisa juga untuk tag tertentu, misal
menggunakan selector div[attribute]. Seperti ini

querySelectorAll("[class]")

Page 136 of 150 Menjadi JavaScript Developer - Bahrul Rozak

NodeType

Saat kita menyeleksi Node menjadi NodeList, kadang kita ingin tahu tipe Node tersebut. Apakah
Element, TextElement atau yang lainnya. Nah pada Node sendiri memiliki property bernama
nodeType, dimana kita bisa melihat tipe dari node tersebut, ya fungsinya mirip-mirip lah dengan type
of

HTML Element

Element merupakan representasi dalam DOM. Namun, saat menggunakan HTML, implementasi
detailnya sebenarnya adalah HTML Element, yaitu turunan dari Element.

HTML Element memiliki banyak sekali property dan method tambahan selain dari Element DOM.
Kebanyakan HTML Element memiliki property yang sesuai dengan attribute yang ada pada tag HTML

Page 137 of 150 Menjadi JavaScript Developer - Bahrul Rozak

tersebut, oleh karena itu, kadang kita tidak perlu lagi menggunakan method setAttribute dan
getAttribute.

HTML Form Element

Mendengar istilah Form, maka perspektif kita akan tertuju pada sebuah tag html yang dapat
menerima input. Ya! Namun pada DOM ternyata Form ini adalah salah satu element yang memiliki
banyak sekali fitur diluar dari Element DOM.

Hal ini dikarenakan penggunaan Form memang lebih kompleks dibandingkan element HTML lainnya.
Ada banyak sekali property, method dan juga event yang terdapat pada HTML form element atau
input element.

Page 138 of 150 Menjadi JavaScript Developer - Bahrul Rozak

HTML Element Table

Jika tadi kita sudah berbicara Form Element, kini saat kita berdiskusi tentang Element Table. Table ini
juga merupakan element yang lebih kompleks dibandingkan dengan element-element lainnya. Pada
element Table ada banyak sekali method, property dan juga event.

JavaScript Async

Secara default program pada JavaScript akan dieksekusi secara baris per baris, atau tahap bertahap.
Misalkan kita punya 5 baris program, maka baris program yang paling awal yang akan dieksekusi
kemudian baru baris selanjutnya begitu seterusnya sampai 5 program tersebut tereksekusi.

Artinya dalam hal ini JavaScript melakukan proses Synchronous. Proses (thread) synchronous ini juga
biasa disebut sebagai blocking, mengapa dinamakan dengan blocking? Karena kita harus menunggu

Page 139 of 150 Menjadi JavaScript Developer - Bahrul Rozak

tiap proses selesai baru proses selanjutnya bisa dilakukan atau biasa disebut sebagai sequential
process.

Lantas apa itu Asynchronous?

Asynchronous ini kebalikan dari Synchronous, artinya kode JavaScript tidak harus menunggu proses
(thread) sebelumnya selesai, baru kemudian lanjut ke proses berikutnya. Asynchronous ini juga
disebut sebagai non blocking.

Apa itu Callback?

Ketika kita menjalankan program secara Asynchronous artinya program kita akan berjalan secara
mandiri tanpa harus menunggu proses sebelumnya selesai. Dalam hal ini program Async akan
menjalakan suatu mekanisme bernama callback.

Callback biasanya dibuat dalam bentuk function as parameter dan paramter function tersebut akan
dieksekusi saat proses async selesai. Dengan menggunakan callback, program bisa menerima
informasi yang dibutuhkan dari proses yang berjalan secara async.

Sebelum kita mempelajari proses yang ada di dalam Async, mari kita pelajari terlebih dahulu method
yang ada di Async. Method-method tersebut ialah

setTimeOut(callback, timeInMilisecond) , method ini digunakan untuk menjalankan proses Async

sekali dalam waktu tertentu. Method ini memiliki 2 parameter yaitu callback dan timeInMilisecond.
Misalkan kita memberikan 5000ms atau 5 detik pada parameter timeInMilisecond, artinya kita
memberikan function callback tersebut selama 5 detik untuk kemudian dipanggil.

Saat kita menjalankan function tersebut, seharusnya halaman kita masih kosong, kemudian setelah
interval 5 detik barulah muncul tulisan Tenaga Async dari callback (addElement).

setInterval(callback, timeInMilisecond) , method ini digunakan untuk menjalankan proses Async

secara periodik dalam waktu tertentu.

Page 140 of 150 Menjadi JavaScript Developer - Bahrul Rozak

callback ini akan dipanggil tiap detik.

Apa itu AJAX?

Mendengar istilah AJAX, apakah yang terbesit dalam pikiran Anda?

Tentu saja bukan itu hehe, AJAX ini merupakan kepanjangan dari Asynchronous JavaScript and XML,
walaupun ada istilah XML tapi nyatanya saat ini penggunaan XML tidak begitu terlalu populer.

AJAX ini biasanya digunakan untuk mengambil data atau mengirim data ke URL lain. Untuk membuat
AJAX kita bisa menggunakan class bernama XMLHttpRequest

Lantas bagaimana cara AJAX bekerja?

Saat kode program kita membuat AJAX, maka si AJAX akan mengirimkan request ke server,
selanjutnya server akan membalas atau merespon, maka nanti respon akan diterima kembali oleh si
mamang AJAX. Selanjutnya setelah respon kita terima, kita bisa melakukan sesuatu dari hasil
responnya.

Page 141 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Membuat AJAX

Menerima Data di AJAX

AJAX biasanya digunakan untuk mengirim data ke server atau menerima data dari server, tiap request
AJAX yang dilakukan, biasanya ingin mendapat informasi response yang diberikan oleh server. Akan
tetapi kita tidak bisa secara langsung mengambil response AJAX, karena proses AJAX adalah async,
sehingga kita perlu menunggu async nya selesai.

Untuk mendapatkan informasi AJAX, kita bisa menggunakan AJAX Callback, yang akan dieksekusi
setelah proses AJAX selesai. Untuk menambahkan AJAX Callback, kita bisa menambahkan pada event
addEventListener(“load”) atau onload dan untuk mengambil datanya dari server, kita bisa
menggunakan property responseText.

Page 142 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Response Status di AJAX
AJAX adalah proses komunikasi antara client dengan server. Dalam komunikasi ini, kita tidak bisa
selalu menggangap proses tersebut selalu berjalan semestinya. Akan ada banyak hal-hal yang bisa
menggangu proses AJAX sehingga menyebabkan error, seperti koneksi internet, error server, data dari
server tidak valid dan masih banyak yang lainnya.

Server ini biasanya akan mengirimkan HTTP status code yang sesuai dengan jenis responsenya. Nah
untuk mengetahui status response dari server kita bisa menggunakan property bernama status.

State di AJAX
AJAX memiliki tahapan state, dimana kita bisa mendapatkan banyak sekali state di AJAX. Untuk
mendapatkan state nya kita bisa menggunakan property readyState. Property ini akan
mengembalikan nilai number dimana tiap number merupakan representasi dari statenya.

Page 143 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Jika kita ingin me listen setiap perubahan yang terjadi pada state, kita bisa menggunakan
onreadystateChange.

Apa itu Promise?

Promise ini merupakan sebuah proxy untuk sebuah nilai yang belum diketahui saat pembuatan
promise tersebut. Biasanya promise digunakan sebagai proxy untuk thread async. Penggunaan
promise sangat mudah dan lebih mirip dengan code sync.

Page 144 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Saat kita mempelajari promise kita harus mengetahui 3 state yaitu pending, fullfiled dan rejected.
Pending ini artinya belum ada datanya, fullfiled artinya datanya sudah ada sedangkan rejected artinya
error atau kemungkinan datanya tidak ada. Promise ini dibuat untuk menghidar dari callback hell.

Untuk membuat promise kita cukup gunakan class Promise kemudian diikuti dengan parameter
resolve, rejected.

Page 145 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Promise Method

Jadi promise ini memiliki tiga method yaitu then() yang digunakan untuk mendapatkan atau
mengubah data ketika promise sukses, catch() digunakan untuk mendapatkan data error ketika
promise gagal, finally() akan dieksekusi ketika terjadi sukses atau gagal pada promise.

Page 146 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Bagaimana jika terjadi error misalkan product tidak ada, kita bisa tambahkan catch seperti berikut.

Bagaimana dengan finally? Finally tidak peduli mau sukses atau gagal.

Page 147 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Didalam promise juga ada yang namanya Promise Static Method.

[Link]( ) digunakan untuk mengeksekusi beberapa promise sekaligus dan menunggu semua hasil
promisenya

[Link]() digunakan untuk mengeksekusi beberapa promise sekaligus dan mengambil hasil
promise paling cepat.

Fetch API

Fetch API ini merupakan fitur baru sebagai alternatif dari AJAX, saat kita menggunakan AjAX, kita
perlu menggunakan callback untuk dapat menerima response atau data dari server.

Sedangkan ketika kita menggunakan Fetch API, bisa kita gunakan sebagai pengganti AJAX yang sudah
ada Promise, sehingga penggunaan Fecth API lebih mudah dibandingkan dengan AJAX. Apa yang bisa
kita lakukan di AJAX, bisa kita lakukan di Fetch API.

Page 148 of 150 Menjadi JavaScript Developer - Bahrul Rozak

Saat kita mengirim request menggunakan Fetch API, kita perlu membuat object class Request, lalu
dikirimkan menggunakan Fetch API dan saat kita membuat Request, kita bisa menentukan data apa
yang ingin kita kirimkan.

Page 149 of 150 Menjadi JavaScript Developer - Bahrul Rozak