Berbeda dengan html dan css yang outputnya berupa tampilan visual halaman

website, JavaScript berfungsi untuk menangani logika program yang dijalankan di

halaman website. Misal ketika suatu tombol diklik dan kemudian memunculkan
dialog, disitulah JavaScript bekerja dengan menerima event bahwa suatu tombol
telah diklik dan JavaScript memerintahkan dialog baru untuk muncul.

Layaknya bahasa pemrograman level tinggi lainnya seperti C, Java, dan Python,
Javascript memiliki beberapa sintaks dasar yang umum digunakan, seperti variable,
operator, pemilihan kondisi, array, perulangan, fungsi, string, dan lainnya. API
(Application Program Interface) dari JavaScript cukuplah lengkap, akan tetapi ia
tidak memiliki akses ke layer I/O, Network, Storage, dan Graphics dari suatu
environment.

Tiga komponen yaitu HTML, CSS, dan JavaScript adalah komponen dasar dalam
membuat suatu website. HTML sebagai elemen dasar halaman website, CSS
menangani formatting website, kemudian JavaScript membuat suatu website
menjadi interactive.

Di modul-modul selanjutnya, Anda akan diminta untuk membuka editor online di

platform glot.io. Di sini Anda dituntut untuk menjalankan kode program yang telah
disiapkan, kemudian ikuti perintah-perintah yang ada di bagian Praktek. Di dalam
praktek inilah Anda akan diberikan pertanyaan-pertanyaan yang hanya bisa
dijawab jika Anda mencobanya di editor online.

Baca blog di sini untuk lebih tahu tentang platform

glot.io, https://blog.dicoding.com/code-editor-dan-compiler-online-terbaik/

Belajar kode yang paling efektif adalah dengan melakukan praktek secara
langsung, Anda akan lebih cepat dalam memahami maksud-maksud dari konsep
maupun fitur yang ada di bahasa pemrograman tersebut.

Hello World in Javascript

Latihan
Contoh kode:
1. console.log("Hello World");
Output kode:
Hello World
Variabel adalah wadah untuk menyimpan suatu nilai. Pada Javascript, syarat
variabel di antaranya:
 Nama variabel dapat berisi huruf, angka, karakter underscores _, dan
karakter dollar $.
 Nama variabel harus diawali huruf.
 Nama variabel bisa diawali dengan karakter _ dan $.
 Nama variabel bersifat case-sensitive (misal, variabel y dan Y berbeda).
 Kata kunci bawaan milik Javascript tidak bisa dipakai untuk nama variabel.
Beberapa contoh penulisan variabel:
1. var nama = 'Fauziah';
2. var $ttl = 'Bandung, 23 September 1995';
3. var gend3r = 'Perempuan';
4. var _alamat = 'Jl Sirna galih No 32 Bandung';
5. var kd_ps = 40195;
6. var Pddkn_trkhr = 'S1';
Latihan
Contoh kode:
1. var nama = 'Fauziah';
2. console.log(nama);
Link ke editor:
https://glot.io/snippets/fbn3lop4cf/embed/
Praktek
 Pada editor terdapat contoh pembuatan variabel dan cara menampilkan
nilainya ke layar. Jalankan kode dan lihat output apa yang tampil.
 Coba ganti baris ke-1 dan ke-2, kode nama menjadi 1nama dan lihat pesan
error yang muncul. Mengapa muncul error?
 Coba ganti baris ke-1 dan ke-2, kode nama menjadi new dan lihat pesan error
yang muncul. Mengapa muncul error?

Bagaimana menampilkan hasil pemrograman Javascript? Banyak cara yang bisa

digunakan, antara lain:
 Mencetak output ke dalam elemen HTML dengan innerHTML.
 Mencetak output ke HTML dengan document.write().
 Mencetak output dengan alert box window.alert().
 Mencetak output ke konsol browser dengan console.log().
Latihan
Contoh kode
1. console.log('Ini output program via console log');
Link ke editor:
https://glot.io/snippets/fbn3pzhv1q/embed/
Praktek
 Jalankan program pada editor.
 Modifikasi isi string pada baris ke-1 sesuai keinginan Anda, kemudian jalankan
program lagi.

Tipe data adalah jenis dari data yang digunakan pada sebuah variabel. Javascript
mendukung tipe data berikut:
 String adalah susunan dari huruf, angka dan karakter lainnya, seperti "Halo
Coders!". String ditulis dengan diapit oleh tanda kutip " atau tanda petik '.
 Number adalah tipe data angka yang bisa ditulis dengan desimal maupun
tidak.
 Boolean adalah tipe data yang hanya memiliki dua nilai: true atau false.
 Array adalah tipe data yang ditulis dengan tanda siku [] dan isi array
dipisahkan dengan koma ,.
 Object adalah tipe data yang ditulis dengan kurung kurawal {} dan properti
object ditulis dengan sepasang nama:nilai yang kemudian dipisahkan dengan
tanda koma ,.
 null adalah nilai yang dapat digunakan untuk menunjukkan sesuatu yang
tidak ada, null memiliki tipe data object.
 undefined adalah nilai bawaan variabel yang ditulis tanpa isi.
Latihan
Contoh kode:
1. var nama = 'Manshour';
2. var umur = 32;
3. var sudah_menikah = true;
4. var nama_anak = ['Ghamidi','Fauziah'];
5. var perabotan = {'mobil':'Ferrari','jam':'rolex'};
6. var hutang = null;
7. var rumah;
8.
9. console.log(typeof nama);
Link ke editor:
https://glot.io/snippets/fbn3r0sfp0/embed/
Praktek
Pada kolom editor, Anda dapat melihat sejumlah variabel dengan tipe data yang
beragam. Gunakan perintah typeof untuk setiap variabel dan lihat bagaimana nilai
variabel tersebut ditampilkan. Misal pada baris ke-9, ganti typeof nama
menjadi typeof umur.
Konstanta adalah sebuah nama (seperti variabel) untuk menyimpan suatu nilai.
Berbeda dengan variabel, nilai dari konstanta tidak dapat diubah setelah dia
didefinisikan.
Membuat sebuah konstanta bisa menggunakan operator assignment (=) seperti
pada saat membuat variabel, namun di awal variabel tambahkan const.
Latihan
Contoh kode:
1. const PI = 3.14159265;
2. console.log(PI);
Link ke editor:
https://glot.io/snippets/fbn3s1hnke/embed
Praktek
Jalankan program yang ada di editor dan lihat output apa yang muncul.
Apakah muncul pesan error apabila pada baris ke-3, ditambahkan kode ini:
1. PI = 1;
2. console.log(PI);
Mengapa demikian?

Operator digunakan untuk melakukan operasi terhadap suatu nilai dan variabel.
Operator Aritmatika digunakan untuk melakukan operasi aritmatik terhadap nilai
numerik, seperti penjumlahan, pengurangan, perkalian, pembagian, dan
sebagainya.
Op Nama Contoh Keterangan
+ Penjumlahan x+y Penjumlahan nilai x dan y
- Pengurangan x-y Pengurangan nilai x oleh y
* Perkalian x*y Perkalian nilai x dan y
/ Pembagian x/y Pembagian nilai x oleh y
% Modulus x%y Sisa dari pembagian x oleh y
Latihan
Contoh kode:
1. var x = 29;
2. var y = 19;
3. var z = x + y;
4. console.log(z);
Link ke editor:
https://glot.io/snippets/fbn3t2e13w/embed/
Praktek
 Gantilah operator yang digunakan pada kode baris ke-3 dengan operator
lainnya, dan lihatlah hasilnya!

Operator penugasan (assignment) digunakan untuk menuliskan nilai pada suatu

variabel. Operator penugasan yang paling umum digunakan adalah operator =
(sama dengan). Operator ini digunakan untuk mengisi variabel yang ada di sebelah
kiri dengan nilai yang ada di sebelah kanan. Misalnya x = 3 berarti kita mengisi
variabel x dengan nilai 3. Atau x = y yang berarti kita mengisi variabel x dengan nilai
yang ada di dalam variabel y.
Selain itu, kita dapat menyisipkan operator aritmatika sebelum tanda =, yang berarti
mengisi variabel di sebelah kiri operator dengan hasil operasi dari variabel sebelah
kiri sebelum diisi dengan nilai di sebelah kanan. Agar lebih paham, perhatikan tabel
berikut:
Contoh Serupa Keterangan
x += y x=x+y x diisi dengan nilai dari x sebelumnya ditambah nilai y
x -= y x=x-y x diisi dengan nilai dari x sebelumnya dikurangi nilai y
x *= y x=x*y x diisi dengan nilai dari x sebelumnya dikali nilai y
x /= y x=x/y x diisi dengan nilai dari x sebelumnya dibagi nilai y
x %= y x=x%y x diisi dengan sisa nilai dari x sebelumnya dibagi nilai y
Latihan
Contoh kode:
1. var x = 29;
2. var y = 19;
3. console.log('Nilai x sebelum assignment: ' + x + '<br/>');
4. x += y;
5. console.log('Nilai x setelah assignment: ' + x + '<br/>');
Link ke editor:
https://glot.io/snippets/fbn423y26f/embed
PRAKTEK
 Gantilah operator yang digunakan pada kode baris ke-4 dengan operator
lainnya, dan lihatlah hasilnya!

Operator perbandingan digunakan untuk membandingkan dua buah nilai numerik

atau string. Output dari operasi ini adalah nilai true atau false.
Op Nama Contoh Hasil
== Sama dengan x == y TRUE bila nilai x sama dengan y
=== Identik x === y TRUE bila nilai x sama dengan y, DAN tipe data keduanya
sama
!= Tidak sama dengan x != y TRUE bila nilai x tidak sama dengan y
!== Tidak identik x !== y TRUE bila nilai x tidak sama dengan y, ATAU tipe data
keduanya berbeda
> Lebih dari x >y TRUE bila nilai x lebih dari y
< Kurang dari x < y TRUE bila nilai x kurang dari y
>= Lebih dari atau sama x >= y TRUE bila nilai x lebih dari atau sama dengan y
dengan
<= Kurang dari atau sama x <= y TRUE bila nilai x kurang dari atau sama dengan y
dengan
Latihan
Contoh kode:
1. var x = 29;
2. var y = 19;
3. console.log(x == y);
Link ke editor:
https://glot.io/snippets/fbn432imfv/embed
PRAKTEK
 Gantilah operator == pada kode di baris ke-3 dengan <, >, <=, >= dan !=, lalu
amati output masing-masing operasinya.
 Ganti nilai x dengan string '19' dan ganti operator pada kode di baris ke-3
dengan == dan === lalu amati outputnya. Apakah outputnya berbeda?
Mengapa berbeda?
 Ekplorasi lebih lanjut dengan mengganti nilai variabel x dan y dan juga
operator yang digunakan dan bandingkan masing-masing outputnya.

Operator increment-decrement adalah operator yang digunakan untuk menaikkan

atau menurunkan sebanyak satu dari nilai variabel yang dikenai operasi. Operator
increment adalah tanda ++ yang disimpan sebelum atau sesudah variabel, dan
operator decrement adalah tanda -- yang disimpan sebelum atau sesudah operasi.
Agar lebih jelas lihat tabel berikut:
Operator Nama Keterangan
++x pre-increment tambah nilai x sebanyak 1, kemudian kembalikan nilai x
x++ post-increment kembalikan nilai x, lalu tambah nilai x sebanyak 1
--x pre-decrement kurangi nilai x sebanyak 1, kemudian kembalikan nilai x
x-- post-decrement kembalikan nilai x, lalu kurangi nilai x sebanyak 1
Latihan
Contoh kode:
1. var x = 13;
2. ++x;
3. console.log(x);
Link ke editor:
https://glot.io/snippets/fbn43zdpsw/embed
PRAKTEK
 Jalankan contoh kode yang ada pada editor, dan lihat output yang tampil.
 Ganti kode di baris ke-2, x++ menjadi x--; dan jalankan. Bagaimana hasil
outputnya? Mengapa?
 Eksplorasi dengan mengganti operator pada baris ke-2 dengan operator
increment-decrement lainnya dan perhatikan outputnya.

Operator logika digunakan untuk mengkondisikan pernyataan kondisi. Kondisi yang

dimaksud adalah nilai variabel atau hasil perbandingan variabel dalam tipe data
boolean (TRUE dan FALSE). Operator logika yang tersedia di antaranya and, or, xor
dan not.
Op Nama Contoh Output
and And x and y TRUE hanya bila x and y keduanya bernilai TRUE
&& x && y
or Or x or y TRUE bila salah satu atau keduanya dari x atau y bernilai TRUE
|| x || y
xor Xor x xor y TRUE bila hanya salah satu saja (tidak keduanya) dari x atau y bernilai TRUE
! Not !x TRUE bila x bernilai FALSE
Latihan
Contoh kode:
1. var x = true;
2. var y = true;
3.
4. console.log('x : ' + x + '<br/>');
5. console.log('y : ' + y + '<br/>');
6. console.log('!x : ' + !x + '<br/>');
7. console.log('!y : ' + !y + '<br/>');
8. console.log('x and y : ' + (x && y) + '<br/>');
9. console.log('x or y : ' + (x || y) + '<br/>');
10. console.log('x xor y : ' + Boolean(x ^ y) + '<br/>');
Link ke editor:
https://glot.io/snippets/fbn457np8j/embed
PRAKTEK
Ganti nilai variabel x dan y pada editor menjadi true atau false, lalu jalankan
program. Amati dan pelajari tiap outputnya.

Operator string sangat membantu dan akan sering digunakan pada operasi yang
berkaitan dengan data string. Operasi yang dimaksud adalah konkatenasi
(perangkaian) atau penggabungan dua buah string, dan operator yang digunakan
adalah tanda titik +. Selain itu, operator konkatenasi juga dapat digunakan pada
operasi assignment, seperti halnya operator aritmatika.
1. z = x + y;
Contoh kode di atas artinya kita mengisi variabel z dengan nilai string hasil
penggabungan antara nilai variabel x dengan nilai variabel y.
Latihan
Contoh kode:
1. var x = 'Halo';
2. var y = 'Coders';
3. var z = x + ' ' + y;
4.
5. console.log('x: ' + x + '<br/>')
6. console.log('y: ' + y + '<br/>')
7. console.log('z: ' + z + '<br/>')
Link ke editor:
https://glot.io/snippets/fbn46n3tp0/embed
PRAKTEK
 Jalankan kode di editor dan lihat bagaimana outputnya. Anda juga dapat
mencoba mengeksplorasi dengan string lainnya dan lihat bagaimana
hasilnya?

Seringkali kita harus melakukan suatu operasi hanya pada kondisi tertentu saja.
Artinya kita mengecek terlebih dahulu sebuah kondisi, yang apabila kondisi tersebut
terpenuhi (atau bernilai true), maka kita lakukan serangkaian operasi.
Statemen if digunakan untuk mengecek kondisi dan bila kondisi bernilai true, maka
program tertentu akan dijalankan. Penulisan sintaksnya adalah:
1. if(kondisi) {
2. // kode untuk dieksekusi bila kondisi bernilai true
3. }
Pada bagian kondisi, kita isi dengan suatu variabel yang nantinya akan dicek
nilainya. Variabel bernilai false, null, string kosong atau 0 akan menghasilkan output
false, dan selain nilai tersebut akan memberikan output true. Selain itu kita juga
dapat membandingkan variabel menggunakan operator perbandingan dan
operator logika, atau hasil keluaran dari sebuah fungsi.
Latihan
Contoh kode:
1. var nama = 'Mansur';
2. var pesan = 'Selamat datang, ' + nama + '.';
3. if(nama == 'Mishary')
4. {
5. pesan = 'Hi, suatu kehormatan bisa bertemu dengan Anda, ' + nama;
6. }
7. console.log(pesan);
Link ke editor:
https://glot.io/snippets/fbn4gr79qe/embed
PRAKTEK
 Jalankan kode yang ada di editor. Apa output yang muncul?
 Apa output yang ditampilkan bila Anda mengisi variabel nama dengan nama
Anda? Apa pula output yang ditampilkan bila variabel tersebut diisi dengan
string Mishary?
Adakalanya kita harus mengeksekusi satu blok kode program saat suatu kondisi
terpenuhi, dan mengeksekusi blok kode program lain yang berbeda bila kondisi
tidak terpenuhi. Untuk itu kita gunakan statemen if..else.
1. if (kondisi) {
2. // kode untuk dieksekusi bila kondisi bernilai TRUE
3. } else {
4. // kode untuk dieksekusi bila kondisi bernilai FALSE
5. }
Latihan
Contoh kode:
1. var panjang = 7; // atau diameter lingkaran
2. var lebar = 3;
3. var tinggi = 2; // tinggi bangun ruang
4.
5. // tinggi = 0;
6. if(tinggi > 0)
7. {
8. console.log('Luas selimut balok: ' + panjang * lebar * tinggi + '<br/>');
9. console.log('Luas selimut tabung: ' + 2 * 3.14 * (panjang/2) * (panjang/2 +
tinggi) + '<br/>');
10. }
11. else
12. {
13. console.log('Luas persegi: ' + panjang * lebar + '<br/>');
14. console.log('Luas lingkaran: ' + 0.25 * 3.14 * (panjang*panjang) + '<br/>');
15. }
Link ke editor:
https://glot.io/snippets/fbn4hp6yvw/embed
PRAKTEK
 Pada editor, kita melihat kode untuk menghitung luas permukaan selimut
balok dan tabung menggunakan variabel panjang, lebar dan tinggi. Coba
hapus variabel tinggi atau isi variabel dengan nilai 0, dan lihat output apa
yang muncul.

Adakalanya kita harus mengecek beberapa kondisi dan hanya menjalankan kode dari salah satu
kondisi yang terpenuhi saja. Untuk itu kita dapat menggunakan statemen if..else if..else dst.
1. if(kondisi a){
2. // kode bila kondisi a terpenuhi
3. } else if(kondisi b){
4. // kode bila kondisi b terpenuhi
5. ..
6. ..
7. } else if(kondisi n) {
8. // kode bila kondisi n terpenuhi
9. } else {
10. // kode bila semua kondisi tidak terpenuhi
11. }
Latihan
Contoh kode:
1. console.log('Nilai: ');
2.
3. var skor = 83;
4. if(skor < 25)
5. {
6. console.log('D');
7. }
8. else if(skor < 50)
9. {
10. console.log('C');
11. }
12. else if(skor < 80)
13. {
14. console.log('B');
15. }
16. else
17. {
18. console.log('A');
19. }
Link ke editor:
https://glot.io/snippets/fbn4isl8o8/embed
PRAKTEK
 Pada editor, jalankan kode dan lihat output apa yang muncul.
 Ganti nilai variabel skor dengan nilai lain dan amati output yang tampil.

Kita dapat mendeklarasikan statemen if didalam statemen if lainnya untuk

pengecekan bersarang. Statemen if pada dasarnya sama seperti kode lainnya,
maka kita dapat menyimpan statemen if bersarang dimanapun di dalam blok kode
if induknya.
1. if(kondisi a) {
2. if(kondisi b) {
3. // jalankan kode
4. }
5. }
Latihan
Contoh kode:
1. var matematika = 63;
2. var wawancara = 'A';
3.
4. if(matematika > 60)
5. {
6. var keterangan = 'Lolos tes, dengan predikat ';
7. if(wawancara == 'A')
8. {
9. keterangan += 'Memuaskan';
10. console.log(keterangan);
 11. }
12. else if(wawancara == 'B')
13. {
14. keterangan += 'Cukup';
15. console.log(keterangan);
16. }
17. else
18. {
19. keterangan += 'Tidak lolos tes';
20. console.log(keterangan);
21. }
22. }
Link ke editor:
https://glot.io/snippets/fbn4k4w8yf/embed/
PRAKTEK
 Jalankan kode yang ada di editor dan amati output yang tampil.
 Mainkan nilai variabel matematika dan psikotes dan amati output yang
tampil.

Statemen switch digunakan untuk menjalankan satu di antara banyak blok kode
berdasarkan kecocokan nilai yang dievaluasi.
1. switch(variabel){
2. case a:
3. // blok kode A
4. break;
5. case b:
6. // blok kode B
7. break;
8. ...
9. default:
10. // blok kode default
11. }
Pada statemen switch, nilai variabel akan dievaluasi kecocokannya untuk setiap
case. Bila ditemukan kecocokan pada salah satu case, maka blok kode pada case
tersebut akan dijalankan. Umumnya blok kode pada setiap case diakhiri dengan
perintah break; agar program langsung keluar dari blok statemen switch dan tidak
perlu lagi mengecek sisa case di bawahnya.
Apabila tidak ada case yang cocok dengan nilai variabel, maka blok kode pada
bagian default yang akan dijalankan.
Latihan
Contoh kode:
1. console.log('<img src="');
2.
3. var les_animaux = 'chats';
4. switch(les_animaux)
5. {
6. case 'chats':
7. console.log('http://i.imgur.com/4AiXzf8.jpg');
8. break;
9. case 'chiens':
10. console.log('http://i.imgur.com/A8eQsll.jpg');
11. break;
12. case 'singes':
13. console.log('http://i.imgur.com/CXwaR8c.jpg');
14. break;
15. case 'les humains':
16. console.log('http://i.imgur.com/u0mFu.jpg');
17. break;
18. }
19.
20. console.log('"/>');
Link ke editor:
https://glot.io/snippets/fbn4l53lft/embed/
PRAKTEK
 Perhatikan kode switch pada kolom editor. Kira-kira output apa yang akan
muncul bila kode tersebut dijalankan? Cek perkiraan Anda dengan
menjalankan kode tersebut.
  Nilai apa yang harus Anda isikan ke dalam variabel les_animaux di baris ke-3
agar program menampilkan gambar manusia?

Kita sudah paham bahwa switch akan menjalankan blok kode yang case-nya cocok
dengan nilai variabel yang dievaluasi. Lalu bagaimana bila kita ingin menjalankan
blok kode yang sama untuk beberapa case berbeda? Ada dua solusi. Pertama
dengan memasang blok kode yang sama untuk case-case berbeda yang ingin
outputnya sama.
1. var binatang = 'kambing';
2. switch(binatang)
3. {
4. case 'ayam':
5. console.log(binatang + " jumlah kaki 2");
6. break;
7. case 'sapi':
8. console.log(binatang + " jumlah kaki 4");
9. break;
10. case 'kambing':
11. console.log(binatang + " jumlah kaki 4");
12. break;
13. ...
14. }
Akan tetapi switch memperbolehkan cara yang lebih sederhana agar kita tidak
perlu mengulang baris kode yang sama.
1. var binatang = 'kambing';
2. switch(binatang)
3. {
4. case 'ayam':
5. console.log(binatang + " jumlah kaki 2");
6. break;
7. case 'sapi':
8. case 'kambing':
9. console.log(binatang + " jumlah kaki 4");
10. break;
11. ...
Pada kode di atas kita melihat ada case yang tidak memiliki blok kode. case tanpa
blok kode berarti dia mengikuti blok kode yang dimiliki case setelahnya. Contohnya,
bila variabel binatang bernilai "sapi" maka dia akan menampilkan output jumlah
kaki 4 karena case "sapi" tidak memiliki blok kode, sehingga blok kodenya
mengikuti blok kode yang dimiliki case setelahnya yaitu case "kambing".
Latihan
Contoh kode:
1. var binatang = 'kambing';
2. switch(binatang)
3. {
4. case 'ayam':
5. console.log(binatang + " termasuk hewan omnivora");
6. break;
7. case 'sapi':
8. console.log(binatang + " termasuk hewan herbivora");
9. break;
10. case 'kambing':
11. console.log(binatang + " termasuk hewan herbivora");
12. break;
13. case 'serigala':
14. console.log(binatang + " termasuk hewan karnivora");
15. break;
16. case 'harimau':
17. console.log(binatang + " termasuk hewan karnivora");
18. break;
19. case 'tikus':
20. console.log(binatang + " termasuk hewan omnivora");
21. break;
22. default:
23. console.log(binatang + " tidak terdaftar di program");
24. break;
25. }
Link ke editor:
https://glot.io/snippets/fbn4rxebv3/embed
PRAKTEK
 Pada kode di samping ada kode switch yang memiliki beberapa case dengan
blok kode yang sama persis. Buatlah agar kode switch menjadi lebih ramping
tanpa ada blok kode yang sama yang diulang.
 Ganti nilai variabel binatang di baris ke-1 untuk mengecek kode program
yang sudah Anda modifikasi.

Pada pembahasan tipe data terdahulu sudah dijelaskan sekilas tentang Array. Array
(dikenal juga dengan istilah larik) adalah tipe data khusus yang dapat menyimpan
lebih dari satu nilai dalam satu variabel. Misalnya kita punya beberapa nama hewan
yang ingin diproses di dalam program, maka kita dapat menyimpan ke dalam
variabel seperti ini:
1. var hewan1 = "ayam";
2. var hewan2 = "sapi";
3. var hewan3 = "kuda";
Permasalahannya sekarang adalah bagaimana bila kita hendak melakukan
pencarian nama hewan di antara daftar nama tersebut? Selain itu bagaimana bila
kita ingin mencetak semua daftar nama yang boleh jadi tidak hanya ada 3-4 buah,
tapi ratusan? Di sinilah peran Array. Bila data nama hewan di atas disimpan dalam
bentuk array, maka sintaks penulisannya seperti ini:
1. var hewan = ["ayam", "sapi", "kuda"];
Apabila kita hendak memanggil nilai dari array tersebut, kita dapat memanggil
dengan menggunakan nomor indeksnya.
1. hewan[0]; // Berisi nilai "ayam"
2. hewan[1]; // Berisi nilai "sapi"
3. hewan[2]; // Berisi nilai "kuda"
Latihan
Contoh kode:
1. var sayuran = ['kangkung','bayam','brokoli'];
2.
3. console.log('Beberapa nama sayuran:' + '<br/>');
4. console.log('1. ' + sayuran[0]);
Link ke editor:
https://glot.io/snippets/fbn4srehib/embed
PRAKTEK
 Pada editor, terdapat variabel sayuran yang berisi array dari nama-nama
sayuran. Buat kode pada baris ke-5 dan seterusnya sehingga semua nama
sayuran ditampilkan seperti ini:
1. Beberapa nama sayuran:
2. 1. kangkung
3. 2. bayam
4. 3. brokoli
 Gunakan tag <br/> untuk membuat baris baru, atau gunakan ordered list
untuk penomoran otomatis.

Umumnya indeks dari array bertipe integer, dimulai dari 0 hingga n-1 dengan n
adalah jumlah elemen di dalam array. Kode berikut:
1. var sayuran = ['kangkung', 'bayam', 'kol'];
Berarti nilai array indeks ke-0 berisi 'kangkung', indeks ke-1 berisi 'bayam' dan
seterusnya. Kita dapat memanggil nilai di dalam array dengan memanggil nama
variabel diikuti nomor indeks yang ingin diambil. Nomor indeks ditulis di dalam
kurung siku.
1. sayur = sayuran[0];
Pada kode di atas variabel sayur akan diisi oleh nilai dari elemen array sayuran
indeks ke-0, yaitu 'kangkung'.
Kita juga dapat mengisi nilai dari suatu elemen array dengan cara yang sama:
 1. sayuran[0] = 'selada';
2. sayuran[3] = 'brokoli';
Pada kode di atas kita mengisi array indeks ke-0 menjadi 'selada' dan indeks ke-3
dengan 'brokoli'.
Latihan
Contoh kode:
1. var sayuran = ['kangkung', 'bayam', 'kol'];
2. sayuran[0] = 'selada';
3. sayuran[3] = 'brokoli';
4. console.log('Output: ');
5. console.log(sayuran)
Link ke editor:
https://glot.io/snippets/fbn4ulrgci/embed
PRAKTEK
 Pada editor terdapat variabel sayuran berisi tiga buah nilai bertipe string.
Jalankan kode tersebut dan Anda akan melihat output semua nilai yang ada
di array tersebut.
 Sebelum baris ke-5, tambahkan kode untuk menambahkan nama sayuran
lain misalnya 'kubis' pada indeks array ke-4. Tambahkan tanpa mengubah
kode sebelumnya. Jalankan lagi program dan lihat hasilnya.
 Tambahkan lagi nama sayuran lain pada indeks selanjutnya dari array
sayuran dan cek apakah nilai tersebut sudah masuk dengan menjalankan
program.

Banyak bahasa pemrograman yang mendukung array asosiatif. Array asosiatif

adalah array yang menggunakan indeks nama. Namun, Javascript tidak
mendukung array asosiatif. Array di Javascript selalu menggunakkan indeks
bilangan.
Adapun penggantinya adalah objects, di mana kita bisa menggunakan indeks nama
agar lebih informatif.
Sintaks:
1. objects = {name:value, ..., name:value}
Misal:
1. var kuliner = {};
2. kuliner['makanan'] = 'sate';
3. kuliner['negara'] = 'Indonesia';
Kode di atas juga dapat ditulis seperti ini:
1. var kuliner = {
2. makanan: 'sate',
3. negara: 'indonesia',
4. }
Perhatikan penulisan object. Antara nama indeks dan nilai terdapat operator : yang
berfungsi sebagai penghubung antara indeks dan nilainya.
Latihan
Contoh kode:
1. var kegemaran = ['Berenang, Singkong Keju, Jus Alpukat'];

Link ke editor:
https://glot.io/snippets/fbn4vk6wzp/embed
Praktek
Pada editor terdapat variabel kegemaran berisi aktivitas, makanan dan minuman
kegemaran. Agar lebih informatif, ganti array tersebut menjadi array asosiatif
(object) dengan mengganti nomor indeks 0 menjadi key 'aktivitas', nomor indeks 1
menjadi key 'makanan' dan nomor indeks 2 menjadi key 'minuman'. Jalankan
program dan lihat output agar menjadi:
1. Kuliner: { aktivitas: 'Berenang', makanan: 'Singkong Keju', minuman: 'Jus Alpukat'
}
Kita dapat mengisi elemen array dengan nilai bertipe array lagi. Ini dikenal dengan
array bersarang atau array multidimensi. Kedalaman array bersarang pada
dasarnya tidak terbatas.
1. var herbivora = new Array('kambing', 'sapi');
2. var karnivora = new Array('harimau', 'serigala');
3. var omnivora = new Array('ayam', 'monyet');
4.

1. var binatang = new Array(herbivora, karnivora, omnivora);

Pada contoh di atas, kita memiliki tiga buah variabel berisi array, yakni herbivora,
karnivora dan omnivora. Kemudian ketiga variabel tersebut kita simpan di dalam
satu variabel array binatang. Dengan demikian variabel binatang adalah variabel
dengan nilai bertipe array bersarang (berdimensi dua).
Latihan
Contoh kode:
1. var herbivora = new Array('kambing', 'sapi');
2. var karnivora = new Array('harimau', 'serigala');
3. var omnivora = new Array('ayam', 'monyet');
4. var binatang = new Array(herbivora, karnivora, omnivora);
5.
6. // Isi Array `binatang`
7. console.log('Binatang: ');
8. console.log(binatang);
Link ke editor:
https://glot.io/snippets/fbn4wks2kz/embed
PRAKTEK
 Jalankan kode yang ada di editor, Anda akan melihat struktur isi variabel
array binatang.
 Cobalah akses setiap baris dan kolom yang ada pada array binatang
tersebut.
 Cobalah mengganti isi variabel herbivora yang bernilai kambing menjadi
kerbau.

Adakalanya kita perlu mengetahui ada berapa banyak elemen yang terdapat di
dalam suatu array. Untuk itu kita dapat menggunakan method Array.length.
1. var herbivora = new Array('kambing', 'sapi');
2. var karnivora = new Array('harimau', 'serigala');
3. var omnivora = new Array('ayam', 'monyet');
4.
5. var binatang = new Array(herbivora, karnivora, omnivora);
6. console.log(binatang.length);
Contoh kode di atas akan mencetak angka 3, karena variabel binatang memiliki 3
buah nilai di dalamnya. Untuk menghitung jumlah isi Array herbivora, kita bisa
menggunakan indeks baris saja melalui variabel binatang atau bisa juga langsung
menggunakan variabel herbivora.
1. console.log(binatang[0].length);
2. console.log(herbivora.length);

Latihan
Contoh kode:
1. var herbivora = new Array('kambing', 'sapi');
2. var karnivora = new Array('harimau', 'serigala');
3. var omnivora = new Array('ayam', 'monyet');
4.
5. var binatang = new Array(herbivora, karnivora, omnivora);
6. console.log('Jumlah isi Array `binatang`: ');
7. console.log(binatang.length);
Link ke editor:
https://glot.io/snippets/fbn4xbt5jt/embed
Praktek
Bila kita ingin menghitung banyaknya elemen array pada variabel binatang dan
juga banyak elemen array yang bersarang di dalamnya (dengan kata lain
menghitung semua elemen array pada array multidimensi), kita dapat
menggunakan indeks baris dan kolom.
1. console.log(binatang[0].length + binatang[1].length + binatang[2].length);

Statemen perulangan while akan menjalankan blok kode berulang-ulang selama

kondisi masih bernilai true.
1. while (cek kondisi) {
2. // kode yang akan dijalankan berulang
3. }
Sebagai contoh kode berikut:
1. var x = 1;
2. while(x <= 5)
3. {
4. document.write( x+'<br/>' );
5. x++;
6. }
Pada kode di atas, program akan mencetak nomor 1 sampai dengan 5. Statemen
while akan mengecek kondisi, yang apabila nilainya true, dia akan menjalankan
blok kode di dalamnya. Statemen while akan terus dijalankan sampai kondisi pada
while bernilai false. Sehingga kita harus menyiapkan skenario agar kondisi bernilai
false. Pada kode di atas kita menambah nilai variabel x sebanyak 1 setiap kali blok
kode pada while dijalankan, agar sampai pada kondisi nilai x lebih dari 5 sehingga
pengecekan kondisi bernilai false.
Latihan
Contoh kode:
1. var x = 1;
2. while(x <= 5)
3. {
4. console.log( x + '<br/>' );
5. x++;
6. }
7.
Link ke editor:
https://glot.io/snippets/fbn4yguelr/embed
Praktek
 Jalankan kode pada editor dan lihat output yang tampil. Ganti kondisi while di
baris ke-2 menjadi x <= 10 atau angka berapapun yang Anda mau dan lihat
keluarannya.
 Perulangan tak terbatas akan terjadi dan mengakibatkan browser menjadi
unresponsive jika kita menghapus kode x++ di baris ke-5? Ingin mencobanya?

Statemen do..while mirip seperti statemen while, yakni menjalankan blok kode
berulang-ulang selama kondisi yang dicek bernilai true.
1. do {
2. // kode yang akan dijalankan berulang
3. } while (cek kondisi);
Perbedaan statemen do..while dibanding while adalah pada do..while blok kode
dijalankan terlebih dahulu baru kemudian dilakukan pengecekan kondisi. Bila
kondisi bernilai true maka blok kode akan dijalankan kembali.
Dari sini dapat kita lihat bahwa pada statemen do..while, blok kode akan dijalankan
paling tidak satu kali meskipun kondisi bernilai false. Berbeda dengan statemen
while yang mana pengecekan kondisi dilakukan di awal, yang bila kondisi bernilai
false, maka blok kode tidak akan pernah dijalankan.
Latihan
Contoh kode:
1. var x = 0;
2. do
3. {
4. console.log( x + '<br/>' );
5. x++;
6. }
7. while(x < 1);
Link ke editor:
https://glot.io/snippets/fbn4zer03j/embed
Praktek
 Jalankan kode pada editor dan lihat output yang tampil. Ganti kondisi while di
baris ke-7 menjadi x < 10 atau angka berapapun yang Anda mau dan lihat
keluarannya.
 Perulangan tak terbatas akan terjadi dan mengakibatkan browser menjadi
unresponsive jika kita menghapus kode x++ di baris ke-5? Ingin mencobanya?

Pada statemen while dan do..while, kondisi yang dicek tidak mesti berupa angka
yang diiterasi, tapi bisa juga pengecekan kondisi lain yang kita tak perlu ketahui
berapa kali harus dijalankan. Sedangkan statemen perulangan for lebih khusus
digunakan apabila kita hendak mengulang eksekusi blok kode sebanyak angka
yang kita tentukan.
1. for (inisiasi counter; cek kondisi; naikkan counter) {
2. // kode yang akan dijalankan berulang
3. }
Dari kode di atas ada beberapa parameter yang perlu diperhatikan:
 Inisiasi counter. Parameter pertama adalah inisial variabel yang akan dijadikan
penghitung.
 Cek kondisi. Parameter kedua adalah pengecekan kondisi variabel. Bila kondisi
bernilai true, blok kode akan dijalankan.
 Naikkan counter. Parameter ketiga untuk menaikkan/menurunkan nilai variabel
setiap kali blok kode selesai dijalankan.
 Setiap parameter dipisahkan dengan tanda titik koma.
1. var x;
2. for(x=0;x<5;x++)
3. {
4. console.log( 'Nomor: '+ x + '<br/>' );
5. }
Statemen for membuat proses perulangan dengan jumlah tertentu ditulis dalam
bentuk kode yang lebih ringkas.
Latihan
Contoh kode:
1. var x;
2. for(x=0;x<5;x++)
3. {
4. console.log( 'Nomor: '+ x + '<br/>' );
5. }
Link ke editor:
https://glot.io/snippets/fbn5g2z07d/embed

Praktek
 Jalankan kode pada editor dan lihat output yang tampil. Ganti pengecekan
kondisi di baris ke-11 menjadi x < 10 atau angka berapapun yang Anda mau dan
lihat keluarannya.
 Apa yang harus diubah dari parameter ketiga statemen for sehingga keluaran
kondisinya menjadi seperti ini:
1. Nomor: 0
2. Nomor: 2
3. Nomor: 4
4. Nomor: 6
5. Nomor: 8
Petunjuk: gunakan operator penugasan/assignment untuk menaikkan angka
variabel sejumlah yang diperlukan.
 Dapatkah Anda memodifikasi kode di editor sedemikian rupa sehingga output
dari program menjadi seperti ini:
1. Nomor: 10
2. Nomor: 8
3. Nomor: 6
 4. Nomor: 4
5. Nomor: 2

Perulangan dengan statemen foreach hanya berlaku pada variabel array, digunakan untuk
mengulang membaca setiap elemen array.
1. Array.forEach(function(value)
2. {
3. // kode yang akan dijalankan berulang
4. })
Untuk setiap iterasi, nilai dari setiap elemen dapat diambil melalui variabel value. Pointer array
akan menyusuri satu per satu elemen array hingga sampai pada elemen terakhir.
1. var warna = new Array('merah','jingga','kuning');
2. warna.forEach(function(value)
3. {
4. console.log(value + '<br/>');
5. });
Pada contoh kode di atas, kode foreach akan menyusuri satu per satu elemen array warna,
kemudian nilai setiap elemen dapat diakses melalui variabel value. Pada blok kode variabel value
ini dicetak satu per satu dari awal hingga akhir elemen.
Latihan
Contoh kode:
1. var warna = new Array('merah','jingga','kuning');
2. warna.forEach(function(value, index)
3. {
4. console.log('Indeks ke-' + index + ' berwarna ' + value + '<br/>');
5. });
6.
Link ke editor:
https://glot.io/snippets/fbn5j8iljq/embed
Praktek
 Pada editor terdapat kode untuk mencetak data dari array warna. Jalankan program dan
lihat outputnya.
 Coba buat satu array lagi dengan nama pulau, isi array tersebut secara urut adalah
kalimantan, sulawesi, maluku, nusa tenggara, papua. Gunakan foreach agar output yang
ditampilkan menjadi seperti ini:
1. Indeks ke-0 adalah pulau papua
2. Indeks ke-1 adalah pulau nusa tenggara
3. Indeks ke-2 adalah pulau maluku
4. Indeks ke-3 adalah pulau sulawesi
5. Indeks ke-4 adalah pulau kalimantan

Bagaimana halnya bila kita hendak menampilkan setiap elemen array yang ada di
dalam array (array bersarang/multidimensi)? Gunakanlah foreach bersarang.
1. var herbivora = new Array('kambing', 'sapi', 'kuda');
2. var karnivora = new Array('harimau', 'serigala', 'anjing');
3. var omnivora = new Array('ayam', 'monyet', 'beruang');
4. var binatang = new Array(herbivora, karnivora, omnivora);
Untuk menampilkan semua nilai elemen pada array multidimensi di atas, kita dapat
menggunakan foreach seperti berikut:
1. binatang.forEach(function(jenis)
2. {
3. jenis.forEach(function(nama)
4. {
5. console.log(nama + '<br/>');
6. });
7. })
foreach pertama mengiterasi variabel array binatang dan setiap elemennya dapat
dipanggil pada variabel jenis. Karena nilai variabel jenis juga bertipe array, maka
kita panggil variabel tersebut pada foreach kedua. Elemen dari variabel array jenis
dapat diakses pada variabel nama.
Latihan
Contoh kode:
 1. var herbivora = new Array('kambing', 'sapi', 'kuda');
2. var karnivora = new Array('harimau', 'serigala', 'anjing');
3. var omnivora = new Array('ayam', 'monyet', 'beruang');
4. var binatang = new Array(herbivora, karnivora, omnivora);
5.
6. binatang.forEach(function(jenis)
7. {
8. jenis.forEach(function(nama)
9. {
10. console.log(nama + '<br/>');
11. });
12. });
Link ke editor:
https://glot.io/snippets/fbn5k8ofdv/embed
Praktek
 Pada editor sudah ada array multidimensi yang setiap elemennya dicetak
menggunakan foreach bersarang. Jalankan program dan Anda akan melihat
setiap elemen dicetak dengan relatif lebih rapi.
 Sekarang coba tampilkan masing-masing indeks dari array binatang sehingga
output dari programnya nampak seperti ini:
1. Indeks ke-[0][0] ada binatang: kambing
2. Indeks ke-[0][1] ada binatang: sapi
3. Indeks ke-[0][2] ada binatang: kuda
4. Indeks ke-[1][0] ada binatang: harimau
5. Indeks ke-[1][1] ada binatang: serigala
6. Indeks ke-[1][2] ada binatang: anjing
7. Indeks ke-[2][0] ada binatang: ayam
8. Indeks ke-[2][1] ada binatang: monyet
9. Indeks ke-[2][2] ada binatang: beruang

Seringkali kita harus melakukan serangkaian operasi yang sama di banyak tempat, seperti
menghitung rumus, mencetak suatu template, dan lain sebagainya. Akan sangat merepotkan bila
kita harus menulis kode yang sama di banyak tempat. Bayangkan bila kita harus memperbaharui
operasi tersebut, maka kita harus mengubah di banyak tempat. Permasalahan ini dapat
diselesaikan salah satunya menggunakan fungsi (function). Fungsi adalah blok kode yang dapat
dipanggil berulang pada program.
Latihan
Contoh kode:
1. var kalimat = 'Saya suka sate';
2. var output = kalimat.replace('sate','rendang');
3. console.log(output);

Link ke editor:
https://glot.io/snippets/fbn5l4kyrp/embed
Praktek
 Pada editor di baris ke-2 terdapat pemanggilan sebuah fungsi string.replace() yang
merupakan bawaan tipe data string. Dilihat dari nama fungsinya, dapatkah Anda menerka
apa yang dilakukan oleh fungsi tersebut?
 Jalankan program dan amati output fungsi tersebut. Apakah sekarang Anda sudah tahu
apa yang dilakukan fungsi tersebut?
 Agar lebih yakin, buka Google dan cari dengan kata kunci "javascript string replace".
Umumnya akan muncul halaman dari w3schools dan halaman mozilla. Buka salah satu
halaman dan lihat penjelasan tentang kegunaan fungsi tersebut.

Kita dapat membuat fungsi sendiri untuk kebutuhan yang lebih spesifik pada
aplikasi kita. Berikut adalah sintaks untuk mendeklarasikan fungsi:
1. function namafungsi() {
2. // blok kode fungsi
3. }
Membuat fungsi diawali dengan kata kunci function diikuti nama fungsinya dan
kurung buka dan kurung tutup. Kemudian blok kode fungsi ditulis di dalam kurung
kurawal. Nama fungsi bersifat case sensitive.
1. function cetakPesan() {
2. console.log('Halo Coder!');
3. }
Pada contoh di atas kita membuat fungsi dengan nama cetakPesan(). Fungsi
tersebut memiliki satu buah baris kode di dalamnya, yakni mencetak teks
bertuliskan "Halo Coder!". Blok kode di dalam fungsi tidak akan dijalankan sampai
fungsi tersebut dipanggil. Cara memanggil fungsi adalah dengan menuliskan nama
fungsinya diikuti oleh kurung buka dan kurung tutup.
1. cetakPesan();
Latihan
Contoh kode:
1. // buat fungsi dibawah ini
2.
3. // panggil fungsi di bawah ini
4.
Link ke editor:
https://glot.io/snippets/fbn5muirpi/embed
Praktek
 Pada editor, buatlah sebuah fungsi dengan nama greetings(). Di dalam fungsi
tersebut tuliskan kode untuk mencetak pesan bertuliskan "Selamat belajar
Javascript!".
 Di baris selanjutnya di luar fungsi, panggil fungsi tersebut dengan menuliskan
nama fungsinya greetings();. Jalankan program dan cek apakah kodemu
sudah berhasil menampilkan output.

Di dalam Javascript dikenal adanya skup variabel local dan global. Ketika kita membuat sebuah
variabel di dalam fungsi, maka skup variabel tersebut adalah local yang berarti hanya dapat
diakses di dalam fungsi tersebut.
1. function cetakPesan()
2. {
3. var pesan = 'Halo Coder!';
4. console.log(pesan);
5. }

1. console.log(pesan);
Pada contoh kode di atas, variabel pesan terdapat di dalam fungsi dan hanya dapat digunakan di
dalam fungsi. Kode console.log(pesan); yang ada di luar fungsi akan menghasilkan error pada
program yaitu ReferenceError: pesan is not defined.
Begitu pula jika mengakses sebuah variabel yang skupnya berada pada fungsi lain.

1. function otherFunction(){
2. var pesan = 'Halo Coder!'
3. }
4.
5. function cetakPesan() {
6. console.log(pesan)
7. }
8.
9. otherFunction();
10. cetakPesan();
Pada contoh kode di atas baris kode console.log(pesan); yang ada di dalam fungsi tidak akan
menghasilkan apapun (riilnya akan menampilkan pesan error) karena variabel pesan di dalam
fungsi adalah variabel baru yang skupnya lokal dan bukan variabel yang ada di luar fungsi.
Agar variabel dapat diakses pada skup yang luas, maka deklarasikan variabel tersebut
sebagai global variabel. Anda bisa mendeklarasikannya pada awal berkas javascript.
1. var pesan = 'Halo Coder!'
2.
3. function cetakPesan() {
4. console.log(pesan)
5. }
6. cetak()
Jangan menggunakan variabel global jika memang tak terlalu dibutuhkan. Di Strict Mode
variabel secara otomatis akan gagal dideklarasikan.
Latihan
Contoh kode:
1. // var x;
 2. function kuadrat()
3. {
4. x *= x;
5. }
6. x = 5;
7. console.log('sebelum dikuadratkan: ' + x + '<br/>');
8. kuadrat();
9. console.log('setelah dikuadratkan: ' + x + '<br/>');
Link ke editor:
https://glot.io/snippets/fbn5oc8sth/embed
Praktek
 Pada editor terdapat kode berisi sebuah fungsi untuk mengkuadratkan nilai dari variabel
x. Pada baris ke-7 dan 9 kita mencetak nilai variabel x sebelum dan sesudah
dikuadratkan. Jalankan program dan lihat output apa yang muncul.
 Nampaknya nilai x sebelum dan sesudah dikuadratkan masih sama. Itu terjadi karena
variabel x masih belum bisa diakses di dalam fungsi kuadrat(). Tambahkan keyword
global untuk variabel x di dalam fungsi kuadrat(), pada baris sebelum fungsi kuadrat(),
tambahkan baris baru untuk menulis kode var x;. Lalu jalankan kembali program.

Dalam membangun aplikasi riil penggunaan skup global di dalam fungsi tidak
efisien. Ada cara yang lebih baik untuk memproses suatu data di dalam fungsi,
yakni dengan melewatkan variabel melalui argumen fungsi.
Argumen fungsi adalah variabel yang ada di dalam kurung setelah nama fungsi.
Argumen menjadi pintu masuk data yang akan digunakan di dalam fungsi. Kita
dapat mengisi argumen fungsi dengan nilai input langsung, nilai default (bawaan),
atau nilai referensi.
1. function selamatDatang(nama)
2. {
3. console.log('Selamat Datang, ' + nama + '<br/>');
4. }
5. selamatDatang('Bambang Rahmanto');

1. selamatDatang("Coder");
2. var username = 'Bambang Rahmanto';
3. selamatDatang(username);

Pada contoh di atas, kita membuat fungsi selamatDatang() yang memiliki satu buah
argumen nama. Fungsi ini dipanggil dan argumen nama diisi dengan nilai string
"Coder". Pada pemanggilan fungsi selanjutnya, argumen diisi dengan variabel
username yang bernilai string 'Bambang Rahmanto'.
Kita dapat membuat argumen fungsi lebih dari satu, dengan dipisahkan oleh tanda
koma. Saat pemanggilan fungsi, argumen fungsi diisi sesuai urutan penulisan
argumen (dari kiri ke kanan) pada deklarasi fungsi.
Latihan
Contoh kode:
1. function profil(nama, kota)
2. {
3. console.log('Nama saya ' + nama + '<br/>');
4. console.log('Saya berasal dari kota' + kota + '<br/>');
5. }
6. var nama = 'James';
7. var asal = 'Medan';
Link ke editor:
https://glot.io/snippets/fbn5p7o69a/embed
Praktek
 Pada editor, di baris ke-8 panggillah fungsi profil() dengan mengisikan
argumen pertama dengan variabel nama dan argumen kedua dengan variabel
asal. Jalankan program dan pelajari mengapa outputnya seperti itu.
 Buatlah argumen ketiga dengan nama tahun, dan buat kode di dalam fungsi
untuk mencetak string 'Saya lahir pada tahun ' + tahun. Pada baris ke-9 panggil
 fungsi profil() dan jangan lupa untuk mengisi argumen ketiga tadi. Contoh
output yang seharusnya tampil bila program dijalankan mestinya seperti ini:
1. Nama saya James.
2. Saya berasal dari kota Medan.
3. Saya lahir pada tahun 1991

Apa yang terjadi bila suatu fungsi memiliki misalnya dua buah argumen dan kita
hanya mengisi salah satunya atau tidak mengisi kedua argumen tersebut saat
pemanggilan? Program tentunya akan memunculkan pesan peringatan bahwa
fungsi tersebut memerlukan input pada argumennya.
Namun adakalanya suatu fungsi membolehkan beberapa argumen tidak wajib diisi
(opsional). Hal yang sama juga dapat kita lakukan pada fungsi yang kita buat
sendiri, yakni dengan mendefinisikan nilai bawaan pada argumen.
1. function cetakPesan(nama, bahasa='id')
2. {
3. var pesan = 'Selamat datang, ' + nama;
4. if(bahasa == 'en')
5. {
6. pesan = 'Welcome, ' + nama;
7. }
8. console.log(pesan);
9. }
10. var nama = 'Bambang';
11. cetakPesan(nama);
Sebagai contoh, fungsi cetakPesan() di atas memiliki dua buah argumen. Argumen
nama wajib diisi saat pemanggilan fungsi karena tidak diset nilai bawaannya,
sedangkan argumen bahasa tidak wajib diisi karena sudah memiliki nilai default.
Latihan
Contoh kode:
1. function cetakPesan(nama, bahasa='id')
2. {
3. var pesan = 'Selamat datang, ' + nama;
4. if(bahasa == 'en')
5. {
6. pesan = 'Welcome, ' + nama;
7. }
8. console.log(pesan);
9. }
10. var nama = 'Bambang';
11. cetakPesan(nama);
Link ke editor:
https://glot.io/snippets/fbn5qfg698/embed/
Praktek
 Jalankan kode program dan amati outputnya, kemudian modifikasi
pemanggilan fungsi di baris ke-11 dengan mengisikan argumen kedua
dengan string 'en' dan perhatikan output yang muncul. Mengapa bisa
demikian?
 Panggil fungsi dengan mengisi argumen kedua dengan string selain 'id' dan
'en'. Output apakah yang muncul?
 Dapatkah Anda memodifikasi kode pada fungsi sehingga bila argumen
kedua diisi string selain 'id' dan 'en' (misalnya diisi string 'it' atau 'ar') program
akan mencetak pesan 'Mohon maaf bahasa yang diminta belum terdaftar.' ?
(Petunjuk: banyak teknik yang dapat Anda gunakan, salah satunya dengan
switch)

Ketika kita melewatkan variabel ke dalam argumen sebuah fungsi, nilai yang ada di
dalam variabel tersebut tidak akan berubah.
1. function kuadrat(angka)
2. {
3. angka.key *= angka.key;
4. }
5.
6. var x = {key:5};
7. console.log('sebelum dikuadratkan: ' + x['key'] + '<br/>');
 8. kuadrat(x);
9. console.log('setelah dikuadratkan: ' + x['key'] + '<br/>');
Pada kode di atas, nilai awal x adalah 5. Saat fungsi kuadrat(x) dipanggil, fungsi
tersebut akan mengkuadratkan nilai variabel argumen dan mencetaknya. Adapun
variabel x setelah proses pemanggilan fungsi kuadrat() bernilai 25.
Latihan
Contoh kode:
1. function kuadrat(angka)
2. {
3. angka.key *= angka.key;
4. }
5.
6. var x = {key:5};
7. console.log('sebelum dikuadratkan: ' + x['key'] + '<br/>');
8. kuadrat(x);
9. console.log('setelah dikuadratkan: ' + x['key'] + '<br/>');
Link ke editor:
https://glot.io/snippets/fbn5rc07ag/embed/
Praktek
Jalankan kode yang ada di editor. Apakah nilai variabel x sebelum dan sesudah
pemanggilan fungsi kuadrat() berubah? Mengapa?

Sejauh ini kita sudah belajar membuat fungsi untuk mengerjakan sejumlah proses
yang dapat dipanggil secara berulang. Tapi di banyak kesempatan kita tidak hanya
perlu menjalankan sejumlah kode dan mencetak output, tapi juga menerima hasil
dari proses yang dikerjakan. Seperti contoh fungsi Date() yang bila dipanggil dia
mengembalikan nilai tanggal sekarang.
1. var tanggal = Date();
2. console.log(tanggal);
Pada contoh kode di atas, variabel tanggal akan bernilai tanggal sekarang karena
dia menerima nilai dari fungsi Date().
Pada deklarasi fungsi sendiri, kita dapat mengembalikan nilai hasil pemanggilan
suatu fungsi dengan menggunakan kata kunci return.

1. function luasSegitiga(alas, tinggi){

2. luas = alas * tinggi / 2;
3. return luas;
4. }

1. //mencetak nilai 10
2. console.log(luasSegitiga(5,4));
3.
4. // variabel `hasil` bernilai 10
5. console.log(hasil);
Fungsi luasSegitiga() di atas menerima 2 argumen alas dan tinggi dan
mengembalikan nilai luas segitiga berdasarkan nilai argumen yang dilewatkan.
Latihan
Contoh kode:
1. // fungsi untuk menghitung luas lingkaran
2.
3.
4. // menghitung luas berdasarkan diameter
5. var diameter = 14;
6. var luas = luasLingkaran(diameter);
7. console.log('luas berdasarkan diameter: ' + luas +'<br/>');
8.
9. // menghitung luas berdasarkan jari-jari
10. var radius = 7;
11. var luas = luasLingkaran(radius, false);
12. console.log('luas berdasarkan radius: ' + luas +'<br/>');
Link ke editor:
https://glot.io/snippets/fbn5snjag9/embed
Praktek
 Buatlah fungsi dengan nama luasLingkaran() mulai dari baris ke-2. Fungsi
menerima satu argumen length dan mengembalikan nilai luas lingkaran.
Rumus luas lingkaran yang digunakan adalah 1/4 * 3.14 * length * length.
Dalam hal ini length adalah diameter lingkaran. Jalankan program dan
mestinya output pertama menampilkan luas berdasarkan diameter: 153.86.
 Buatlah argumen kedua use_diameter dengan nilai default true. Bila
argumen ini bernilai true, maka gunakan rumus luas lingkaran yang
menggunakan diameter seperti langkah di atas. Bila argumen use_diameter
bernilai false, maka gunakan rumus luas lingkaran yang menggunakan jari-
jari/radius, 3.14 * length * length. Bila program dijalankan maka output
pertama dan kedua sama-sama menampilkan luas berdasarkan diameter:
153.86.
1. function luasLingkaran(length)
2. {
3. return 1/4 * 3.14 * length * length;
4. }

Javascript string digunakan untuk menyimpan dan memanipulasi teks.

Javascript strings
Javascript string secara sederhana menyimpan rangkaian karakter seperti Bambang Rahmanto.
String dapat ditulis dengan tanda kutip. Anda dapat menggunakan kutip tunggal maupun ganda.
Misal,
1. var nama_mobil = 'Lamborghini';

Anda dapat menggunakan kutip sebagai string, dengan catatan, tanda kutip yang digunakan
untuk mengapit string berbeda dengan kutip yang di dalam string.
Misal,
1. var salam = "Selamat pagi";
2. var salam = 'Selamat sore';

Panjang String
Panjang string dapat dihitung dengan properti length.
Misal,
1. var abjad = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
2. var panjang_string_abjad = abjad.length;

Menggunakan Karakter Spesial

Karena string harus ditulis dengan tanda kutip, Javascript tidak bisa memahami string yang berisi
tanda kutip yang sama.
Misal,
1. var whoami = "Kami adalah "Gerilyawan" dari planet Namex.";
Jika dicetak menggunakan console.log() tidak akan menampilkan output.

Untuk mengatasinya, kita bisa menggunakan karakter escape \ agar bisa diterjemahkan oleh
Javascript.
Misal,
1. var whoami = "Kami adalah \"Gerilyawan\" dari planet Namex.";

Latihan
Contoh kode:
1. var nama = 'Jenderal Soedirman';
2. console.log('Panjang string "' + nama + '" adalah ' + nama.length + ' karakter
<br/>');
3.
4. var pasukan = "Pasukan berkata: \"Kami adalah Gerilyawan\". <br/>";
5. console.log(pasukan);

Link ke editor:
https://glot.io/snippets/fbn5tlvgcv/embed
Praktek
 Jalankan program yang ada di jendela editor, output apa saja yang akan muncul?
Mengapa demikian?
 Coba tambahkan string adalah Jenderal Bintang Lima setelah string 'Jenderal Soedirman'
dan jalankan program kemudian amati cara kerjanya.
 Coba ganti tanda kutip ganda menjadi kutip tunggal pada baris ke-4 dan jalankan
program kemudian amati cara kerjanya.

Javascript juga sudah menyediakan beragam method bawaan untuk memanipulasi transformasi
teks: mengubah teks menjadi huruf kapital semua, huruf kecil semua, setiap kata dan sebagainya.
1. var teks = "Valentino Rossi adalah seorang pembalap MotoGP";
2. console.log(teks + '<br/>');
3. console.log(teks.toUpperCase() + '<br/>');
4. console.log(teks.toLowerCase() + '<br/>');
Method string.toUpperCase() digunakan untuk membuat semua karakter dalam string menjadi
huruf besar/kapital. Method string.toLowerCase digunakan untuk membuat semua karakter
dalam string menjadi huruf kecil.
Latihan
Contoh kode:
1. var teks = "Valentino Rossi adalah seorang pembalap MotoGP";
2. console.log(teks + '<br/>');
3. console.log(teks.toUpperCase() + '<br/>');
4. console.log(teks.toLowerCase() + '<br/>');

Link ke editor:
https://glot.io/snippets/fbn5ugfscy/embed
Praktek
 Jalankan program untuk melihat hasil dari contoh kode di editor.

Pada lesson sebelumnya pernah disinggung sekilas tentang fungsi/method

replace() milik string. Ya, ini adalah fungsi untuk mengganti suatu teks di dalam
string dengan teks lain.
1. string.replace(searchvalue, newvalue)
Argumen searchvalue diisi oleh string yang akan dicari untuk diganti. Argumen
newvalue diisi oleh string yang menjadi pengganti.

1. var pesan = "saya suka baso sapi, sate kambing dan iga bakar";
2. var hasil = pesan.replace("kambing", "ayam");
Pada contoh kode di atas, variabel hasil akan berisi string 'saya suka baso sapi, sate
ayam dan iga bakar', di mana kata kambing diganti menjadi ayam.
Latihan
Contoh kode:
1. var pesan = "saya suka baso sapi, sate kambing dan iga bakar";

Link ke editor:
https://glot.io/snippets/fbn5vhme41/embed
Praktek
Pada editor, di baris ke-2 buat variabel hasil. Panggil method string.replace()
sedemikian rupa sehingga variabel hasil berisi hanya huruf konsonannya saja dari
string pada variabel pesan.

Adakalanya kita harus mengurai suatu string dan mengolahnya, seperti contohnya mengambil
segmen tertentu dari sebuah url. Untuk hal ini kita dapat menggunakan method split().
1. var url = 'codepolitan.com/interactive-coding/javascript/output';
2. var segmen = url.split('/');
3. console.log(segmen);
Pada kode di atas kita memecah string url ke dalam bentuk array dengan menggunakan karakter
'/' sebagai pembatasnya.
Kita juga dapat melakukan hal sebaliknya, yakni menggabungkan nilai-nilai di dalam array
menjadi satu kesatuan string. Untuk ini kita dapat menggunakan method join().
1. var tags = new Array('javascript', 'belajar javascript', 'tutorial javascript');
2. var tag_str = tags.join(", ");
3. console.log(tag_str + '<br/>');
Pada kode di atas kita menggabungkan semua nilai elemen pada tags dengan menggunakan
karakter ', ' (koma dan spasi) sebagai penghubung antar nilai.
Latihan
Contoh kode:
1. var url = 'codepolitan.com/interactive-coding/javascript/output';
2. var segmen = url.split('/');
3. console.log(segmen + '</br>');
4.
Link ke editor:
https://glot.io/snippets/fbn5wg3bzk/embed
Praktek
 Pada editor terdapat contoh kode implementasi method split. Jalankan program dan lihat
hasilnya di tab "Plain Text" pada kolom output.
 Pada baris ke-5 buat variabel new_url. Gabungkan kembali setiap nilai elemen Array
segmen dengan menggunakan method join() dan simpan hasilnya ke dalam variabel
new_url.

Dalam beberapa kasus, kita harus membersihkan suatu string dari karakter tambahan yang tidak
diperlukan di awal atau akhir string. Javascript sudah menyediakan fungsi untuk hal tersebut
yakni trim().
1. var nama = ' Al Khawarizmi ';
2. console.log(nama + '<br/>');
3. console.log('Sebelum menghapus karakter depan dan belakang, panjang string var
nama: ' + nama.length + '<br/>');
4. nama = nama.trim();
5. console.log(nama + '<br/>');
6. console.log('Setelah menghapus karakter depan dan belakang, panjang string var
nama: ' + nama.length + '<br/>');

Outputnya,
1. Al Khawarizmi
2. Sebelum menghapus karakter depan dan belakang, panjang string var nama: 18
3. Al Khawarizmi
4. Setelah menghapus karakter depan dan belakang, panjang string var nama: 13

Argumen pertama method string trim() diisi dengan string yang hendak dibersihkan.

Latihan
Contoh kode:
1. var herbivora = new Array(' kambing ', ' sapi ', ' kuda ');
2. herbivora.forEach(function(nama,index){
3. // gunakan method trim() atau yang lain dibawah ini
4.
5. console.log(nama);
6. })
Link ke editor:
https://glot.io/snippets/fbn5xjl4l3/embed
Praktek
 Pada editor terdapat kode perulangan yang mencetak nama-nama hewan dari array.
Jalankan program dan lihat output yang ditampilkan.
 Setiap nama dipisahkan dengan koma. Dapatkah Anda membersihkan koma berlebih
yang ada di bagian akhir nama-nama tersebut?