Catatan Belajar JavaScript (Ryamizard)

1. Hello World
Terdapat 2 Cara untuk menuliskan code JavaScript :
• Di tulis langsung di dalam file .html

• Di tulis terpisah dari file .html (include)

2. Komentar
Terdapat 2 jenis penulisan komentar pada bahasa pemrograman JavaScript :
• Komentar 1 Baris (bagian atas)
• Komentar lebih dari 1 baris (bagian bawah)
3. Tipe Data
1. Tipe Data: String
Tipe data string atau text adalah tipe data yang berikan kumupulan kosong atau lebih karakter.
Contoh tipe data String sudah digunakan pada penulisan “Hello World”. Tipe data String ditulis
dengan diawali tanda kutip diawal dan diakhir, tanda kutip bisa menggunakan tanda kutip 1 (‘)
ataupun kutip 2 (“). Contoh penulisan kode tipe data String :

*note : Tanda kutip bisa juga digunakan untuk menuliskna tag HTML didalam file .js

2. Escape Squence (karakter spesial)

Ada beberapa karakter spesial yang didukung oleh JavaScript, diantaranya adalah :

3. Tipe Data: Number

Pada JavaScript hanya mendukung 1 tipe data number, yang dimana bisa berupa bilangan bulat
ataupun desimal. Biasanya pada bahasa pemrograman lain tipe data bilangan bulat dan desimal
dibedakan, namun di JavaScript itu semua disatukan menjadi 1 Tipe Data Number.
Contoh kode pada tipe data number sebagai berikut :
 JavaScript mendukung number notation, defaultnya ada basis 10, JavaScript juga mendukung
Hexadesimal (0xFF), Binary (0b10101), dan Octal (0o10).

4. Tipe Data: Boolean

Tipe data Boolean adalah tipe data yang biasanya disebut tipe data Kebenaran. Dikarenakan
hanya ada dua data, yaitu “True” dan “False”.
True : Benar
False : salah
Contoh penulisan kode pada penulisan tipe data number :

4. Variable
Variable adalah tempat untuk menyimpan data. Jika data sudah disimpan pada variable, dan ketika
ingin menggunakan data tersebut kita hanya perlu memanggil nama variable nya saja. Untuk
membuat variable pada JavaScript bisa menggunakan kata kunci variable (var, let, dan const) lalu
diikuti dengan menuliskan nama variable nya. Contoh kode variable :

*note : fullname diatas berperan sebagai “nama variable”.

Penulisan variable terdapat 3 model :

1. Var

*note : “Annisa Aprillia Putri” disini berperan sebagai ‘value’.

Setelah variable dinyatakan (deklarasikan), value yang berada di dalam variable dapat di ubah
dengan cara menuliskan nama variable yang sama dengan diikuti tanda sama dengan (=) dan
diikuti dengan value yang akan menggantikan value yang lama. Contoh :
Dengan ini nama variable yang berada diatas tidak akan di eksekusi, melainkan yang akan di
tampilkan adalah yang bawah. Untuk melihat hasilnya bisa ketik document.writeln(fullname);
Maka hasil yang akan tampil seperti ini :

Namun ketika fullname = “kina”; kita hapus, maka hasilnya :

Pada JavaScript bisa menyatakan variable, langsung dengan isi value nya. Caranya dengan
mengetikkan kata kunci var, diikuti nama variable, lalu tanda sama dengan (=), dan diikuti
dengan value nya. Contoh kode penulisan sebaagi berikut :

*note : tanda plus (+) berguna untuk perhitungan dan juga untuk menggabungkan data
seperti contoh diatas. Pada nama variable fullname, terdapat tipe data string yang
ditulis terpisah namun dengan menggunakan tanda plus maka akan
menggabungkan “Eko Kurniawan”, “ “ (spasi), dan “Khannedy”.

Salah satu keuntungan memakai variable adalah mempermudah ketika akan menggunakan data
berkali-kali, hanya dengan memanggil nama variable nya saja. Contoh kode pemanggilan :
2. Let
JavaScript sekarang tidak direkomendasikan lagi menggunakan kata kunci var untuk membuat
variable, namun diganti dengan let, hal ini dikarenakan ada masalah dari desain awal var (akan
kita bahas di chapter tersendiri). Sama seperti var, kata kunci let juga dapat diubah-ubah
valuenya.
Contoh penulisan kode menggunakan kata kunci let :

3. Const
Const berbeda dengan var dan let, kata kunci Const tidak dapat diubah-ubah value nya. Maka
dari itu kata kunci Const dapat dikatakan juga sebagai Constant. Contoh penulisan kode :

Seperti contoh diatas, nama variable yang berada di bawah menjadi bergaris bawah warna
merah, dimana itu menandakan bahwa kode itu error.
5. Operator Matematika
JS mendukung banyak operator aritmatika untuk tipe data number, seperti :
• Operator Aritmatika
• Operator Augmented Assignments
• Operator Unary
• Dll

1. Operator Aritmatika
A. Operator Aritmatika

B. Kode Operator Aritmatika

2. Operator Augmented Assignments

A. Operator Augmented Assignments
 B. Kode Operator Augmented Assigment

3. Operator Unary
A. Operator Unary

B. Kode Operator Unary

4. Operator Perbandingan
Fungsi dari operator ini adalah untuk membandingkan dua data. Operasi ini adalah operasi yang
menghasilkan nilai Boolean (true of false). Jika hasil operatornya benar, maka hasil dari nilai
Booleannya adalah true. Jika hasil operatornya salah, maka hasilnya akan false.
 A. Operator Perbandingan

B. Kode Operator Perbandingan

5. Operator Logika
Operator Logika adalah operator untuk dua buah data Boolean. Hasil dari operator ini adalah
Boolean lagi (true or false).
1. Operator Logika
 a) Operator &&

b) Operator ||

c) Operator Unary (!)

2. Kode Operator Logika

6. Console
Console adalah fitur yang ada pada JS untuk melakukan Logging. Apa itu logging? Logging ada;ah
mekanisme yang biasanya dilakukan oleh programmer untuk menampilkan informasi (mirip seperti
inspect) dari aplikasi yang sedang berjalan tanpa harus mengganggu alur kerja aplikasi dan interaksi
user. Untuk melakukan logging dapat menggunakan fitur console ini pada JS.
 1. Console Methods (perintah pada console)

2. Kode Console

*hasil inspect pada Google Chrome

*note : mirip dengan perintah echo yang ada pada PHP atau Laravel. Yang dimana perintah itu
dipanggil ketika ingin mengetahui informasi apakah program berjalan dengan seharusnya atau
tidak.

7. String Template
Sama halnya dengan operator + (plus) yang dimana kita tahu dari atas bahwa operator + (plus) dapat
menambahkan string dengan data lain. Namun dalam kasus tertentu metode plus s angat
menyusahkan, apalagi jika dalam jumlah banyak. Berbeda jika kita menggunakan fitur String
Template. Cara penulisan String Template harus menggunakan backtict ( ` ), bukan petik 1 (‘) atau
petik 2 (“).
1. Kode Penulisan String Template :

2. Mengambil Data Variable Pada String Template

3. Kode Expression Pada String Template

4. String Multiline
Pada String Template kita juga bisa menggunakan multiline. Sama fungsi nya seperti tag
<pre></pre> pada HTML, yang dimana kita bisa membuat garis baru dituliskan didalam kode
editor nya hanya dengan menggunakan Enter, tanpa perlu menggunakan tag <br> lagi.
Contoh penulisan String Multiline :
8. Konversi String and Number
Pada saat membuat aplikasi, kadang kita input dari user selalu dalam bentuk string. Sedangkan kita
ingin mengelola datanya menggunakan tipe data number. Maka sangat disanrankan sebuah aplikasi
memakai konversi data.
Contoh kode tanpa konversi data :

*note : Hasil kode yang ada diatas adalah 11, bukan 2. Karena pada variable value1 bertipe data
string dan sedangkan value2 bertipe number. Maka program akna membaca nya huruf (1) disatukan
dengan angka (1), maka hasilnya 11.

Contoh kode yang memakai Konversi String : Hasil ketika dijalankan ke browser :

Syntax (kode) untuk Melakukan Konversi String ke Number :

Contoh lain kode konveris String ke Number :

 A. NaN
Bagaimana jika datang String yang akan di kinversi bukanlah data yang valid? Jika data string
yang akan konversi bukanlah data yang valid, maka hasil konversi tersebut adalah NaN (Not a
Number).
Kode NaN :

Kode Operasi Pada NaN :

B. IsNaN() Function
Untuk tahu bahwa sebuah number itu NaN atau tidak adalah dengan cara melakukan pengecekan
tersebut, kita dapat mengguanakan function IsNaN(number). Hasilnya berupa data Boolean (true
or false). True jika NaN, dan false jika bukan.

9. Tipe Data Array

Array adalah tipe data yang berisikan kumpulan data. Array di JS memiliki sifat dinamin, yang
dimana datanya dapat berubah sewaktu-waktu ketika kita menambahkan data ke Array.
A. Operasi Pada Array
B. Diagram Array :

C. Kode Untuk Membuat Array

Pada baris pertama Kita membuat Array yang dimana isi nya kosong tanpa ada nilai apapun yang
dimasukan. Kemudian di baris ke-2 Kita membuat Array dengan nama variable ‘arrayNama’ yang
dimana berisikan value 4 nama seperti gambar diatas. Lalu pada baris ke-4 Kita meminta untuk
ditampilkan hasilnya di browser, dan disini Kita hanya meminta untuk memperlihatkan hasil
untuk baris ke-2 saja, karena kita tahu bahwa baris pertama tidak mengeluarkan value apapun.
Maka hasilnya seperti ini: Ryamizard, Annisa,Yozi,kina

D. Cara Kerja Array

Setiap array akan disimpan secara berurutan, dimulai dari angka 0. Setiap kali menabahkan data
baru ke array, maka otomatis data yagn baru ditambahkan akan berada di urutan terakhir. Dan
urutan di Array kita sebut dengan Index.
E. Kode Menambahkan Array

Jika diatas value array langsung dituliskan didalam tanda kurung[], saat ini kita akan coba
menambahkan value array dengan cara yang berbeda. Pada baris k-1 kita membuat array kosong,
lalu pada baris ke-2 dan 3 kita menambahkan value dengan cara memanggil nama variablenya
(names), lalu “.push”. Sesuai dengan fungsi operasi yang sudah kita ketahui diatas, push
berfungsi untuk menambahkan data pada array.
Lalu pada baris ke-5 dan 6 kita tuliskan karena kita ingin melihat hasil dari kode yang telah kita
tuliskan. Ada dua cara untuk melihat hasil nya.
1. Document.writeln() , untuk melihat hasil pada halaman website:

2. Console.table , melihat hasil dengan cara di inspect pada browser, lalu ke tab Console:

F. Kode Operasi di Array

Pada baris ke-1 sampai 6 itu sama seperti yang diatas. Baris ke-8 itu sama saja kita menuliskan
fungsi tag <br> pada HTML namun saat ini dituliskan menggunakan JS. Jadi pada baris ke-10
diatas kita bermaksud untuk mengganti value “Muchamad” dengan “Annisa” dengan cara
memanggil nama variablenya (nama), lalu memanggil index(nomor urut Array) ke -0
(Muchamad), lalu dilanjutkan dengan = dan “Annisa”. Maka haslnya: Annisa,Ryamizard
10. Tipe Data Object
A. Associative Array
Pada bahasa pemrograman lain seperti PHP, kita bisa mengisi index array dengan semua tipe data.
Namun pada JavaScript fitur itu tidak didukung, dan jika kita memaksakan untuk memasukan tipe
data lain selain number ke index Array, maka JS akan secara otomatis merubah tipe data tersebut
menjadi object, dan itu berbahaya. Karena beberapa operasi Array bisa berbeda hasilnya.

B. Tipe Data Object

Tipe data object adalah tipe data yang mirip dengan data Array, yang membedakan adalah index
di tipe data object bisa menggunakan string. Index di tipe data object biasa disebut atributes atau
properties, bukan index.
Kode membuat Object kosong:

Dari sini kita tau cara untuk membuat Object adalah dengan menggunakan kurung{}. Jadi disini
kita punya 1 buah variable object yang tidak ada value nya, kosong. Bagaimana cara mengisinya?

Kode Menambahkan atau Merubah Properti di Object:

Untuk menambahkan value kedalam object ialah dengan cara memanggil nama variable(orang2)
yang sudah dibuat, lalu buka kurung isku[] dan didalamnya masukan data yang diperlukan, dan
dilanjuti dengan tanda sama dengan =, terakhir ketik value nya. Pada baris ke -9, unutk
menghapus vallue yang telah dibuat adalah dengan ketik ‘delete’ lalu panggil nama
variable(orang2) yang ingin kita hapus value nya, dan kemudian ketik value penyebutnya. Baris
ke-11 dan 12 untuk menampilkan hasil kode yang telah di tulis. Baris ke-11 menampilkan pada
halaman browser, dan 12 dengan cara di inspect lalu pilih tab Console.
1. Hasil melalui halaman browser:

Jika dilihat melalui halaman website secara langsung hasilnya akan berbeda dengan yang
seharusnya. Untuk kendala ini nanti akan teratasi pada materi selanjutnya.
2. Hasil memalui inspect:
Kok bagian umur nya enggak ada
sih? Jangan lupa ya kalau di kode
tadi kita menghapus suatu value
dari variable nya, dan yang kita
hapus itu adalah value dari
“umur”. Jika perintah ‘delete’ nya
ditiadakan maka akan muncul kok
untuk value Umur nya.

Kode Membuat Object dengan Properties:

Kalau diatas kita memberikan value dengan cara memanggil variable nya terlebih dahulu, kali ini
langsung didalam kurung kurawal nya. Berikut cara melihat hasilnya dengan 2 cara yang sama
seperti cara sebelumnya yang kita pakai diatas.
1. Hasil dari halaman Browser:

2. Hasil dari inspect:

Hasilnya sebetulnya sama saja ya dengan yang sebelumnya, namun cara penulisannya yang
berbeda.

Mengakses Property Object:

 Baris ke-1 sampai ke 4 sama seperti sebelumnya, yang membedakan disini adalah cara penulisan
saat kita ingin melihat hasil dari kode yang telah kita buat, sekaligus ini adalah solusi ketika kita
melihat hasil melalui halaman browser yang tampil adalah (object Object). Caranya adalah
dengan cara menggunakan tanda dolar $, lalu buka kurung kurawal dan didalamnya kita panggil
nama variable(orang4) titik . dan panggil judul value nya, itu semua ditulis tanpa spasi.

11. If Expression
A. If Expression
If adalah salah satu kata kunci yang digunakan untuk melakukan percabangan. Apa itu
percabangan? Percabangan adalah kita dapat meng-eksekusi suatu kondisi jika kondisi itu sudah
terpenuhi. Contohnya, ketika kamu sedang mencari suatu makanan dan me njumpai jalan
bercabang, lalu kamu bertanya kependuduk setempat, “Pak, yang menjual makanan ABC itu di
sebelah kanan ya?”. Jika penduduk berkata “Ya, disana ada yang menjual makanan yang kamu
cari” maka kamu akan belok kanan dan membeli makanan yang kamu cari.
Kode If Expression:

Pada baris ke-1 telah dibuat variable yang bernama nilaiUjian yang dimana dia memiliki value
number sebesar “90”. Lalu di baris ke-3 dibaca seperti ini, jika(if) value(90) yang ada di dalam
variable(nilaiUjian) lebih besar daripada 80, maka akan muncul di halaman website tulisan “kerja
bagus!”. Kurung kurawal berfungsi sebagai “maka” nya, jadi ketika suatu kondis i sudah
terpenuhi, maka kurung kurawal berfungsi sebagai dampak dari kondisi yang sudah terpenuhi itu.
Masih kurang paham? Hubungi nomor ini 08811158811.

B. Else Expression

Masih dengan perumpamaan yang sama dengan If diatas, namun kali ini ketika penduduk
setempat sudah bilang diawal sudah berkata, “Kalau kamu belok kanan, kamu enggak akan
menemukan pedangang makanan yang kamu cari” maka kamu akan mengambil jalur kiri karena
sudah pasti jika kekanan tidak ada yang menjual makanan yang kamu cari. Jadi bisa di simpulkan
bahwa Else itu adalah kondisi kedua ketika kondisi pertama salah.
 C. ElseIf Expression
Terkadang di dalam if kita membutuhkan beberapa kondisi. Dengan ElseIf ini membuat if
menjadi mempunyai lebih dari satu kondisi.
Contoh kode ElseIf Expression:

12. Popup
A. Alert
Digunakan untuk memberikan peringatan berupa popup di Browser.
Kode Alert:

Hasil dari kode diatas:

B. Prompt
Digunakan untuk meminta input String dari pengguna browser dalam bentuk input text.
Kode Prompt:

Hasil dari kode diatas:

C. Confirm
Digunakan untuk meminta input Boolean dari pengguna browser dalam bentuk popup input
pilihan.
Kode Confirm:

Hasil dari kode diatas:

13. Undefined
Sesuai dengan namanya. Fitur ini berguna ketika mencari sebuah data namun data tersebut tidak ada.
A. Undefined Variable
Contoh kode:

Pada baris pertama kita membuat variable kosong bernama “name”. Pada abris kedua kita
menggunakan operator perbandingan? Jika lupa silahkan kembali ke halaman atas, kita
menggunakan “===” yaitu sama dengan sama tipe. Baris kedua dibaca seperti ini, jika di dalam
variable tidak ditemukan data > baris tiga, maka munculkan aler yang berisi “Nama Tidak
Ditemukan” > baris ke-4, jika data yang di cari ada > baris ke-5 maka akan muncul alert “Nama
Ditemukan” > untuk baris ke-7 dan 8 untuk menampilkan kontent text selamat datang dan juga
data nama nya.
Hasil:

B. Undefined Array
C. Undefined Object
14. Null
15. Switch Expression
16. Operator Typeof
17. In Operator
18. Ternary Operator
19. Nullish Coalescing Operator
20. Optional Chaining
21. Falsy dan Truthy
22. Operator Logika di Non Boolean
23. For Loop
24. Whila Loop
25. Do While Loop
26. Break and Continue
27. Label
28. For In
29. For Of
30. With Statement
31. Function
32. Function Parameter
33. Function Return Value
34. Optional Parameter
35. Default Parameter
36. Rest Parameter
37. Function Sebagai Value
38. Anonymous Function
39. Function Dalam Function
40. Scope
41. Recursive Function
42. Function Generator
43. Arrow Function
44. Closure
45. Object Method
46. Kata Kunci This
47. Arrow Function di Object
48. Getter and Setter
49. Masalah Variable Var
50. Destructuring
51. Strict Mode
52. Debugger