Materi pembelajaran coding interactive membahas bahasa pemrograman JavaScript

Belajar Coding Interaktif Pemrograman JavaScript

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:

```
var hewan1 = "ayam";
var hewan2 = "sapi";
var hewan3 = "kuda";
```

Permasalahannya sekarang adalah bagaimana bila kita hendak melakukan pencarian nama hewan diantara daftar nama tersebut? Selain itu bagaimana bila kita ingin mencetak semua daftar nama yang boleh jadi tidak hanya ada 3-4 buah, tapi ratusan? Disinilah peran Array. Bila data nama hewan di atas disimpan dalam bentuk array, maka sintaks penulisannya seperti ini:

```
var hewan = ["ayam", "sapi", "kuda"];
```

Apabila kita hendak memanggil nilai dari array tersebut, kita dapat memanggil dengan menggunakan nomor indeksnya.

```
hewan[0]; // Berisi nilai "ayam"
hewan[1]; // Berisi nilai "sapi"
hewan[2]; // Berisi nilai "kuda"
```

Indeks adalah nomor posisi nilai di dalam array. Nomor indeks dimulai dari 0.

Pengertian Array

Umumnya indeks dari array bertipe `integer`, dimulai dari `0` hingga `n-1` dengan `n` adalah jumlah elemen di dalam array. Kode berikut:

```
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.

```
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:

sayuran[0] = 'selada';
sayuran[3] = 'brokoli';

Pada kode di atas kita mengisi array indeks ke-0 menjadi 'selada' dan indeks ke-3 dengan 'brokoli'.

Array Berindeks

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`, dimana kita bisa menggunakan indeks nama agar lebih informatif.

**Sintaks**

```
objects = {name:value, ..., name:value}
```

**Misal**

```
var kuliner = {};
kuliner['makanan'] = 'sate';
kuliner['negara'] = 'Indonesia';
```

Kode di atas juga dapat ditulis seperti ini:

```
var kuliner = {
  makanan: 'sate',
  negara: 'indonesia',
}
```

Perhatikan penulisan `object`. Antara nama indeks dan nilai terdapat operator `:` yang berfungsi sebagai penghubung antara indeks dan nilainya.

Array Asosiatif

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.

```
var herbivora = new Array('kambing', 'sapi');
var karnivora = new Array('harimau', 'serigala');
var omnivora = new Aray('ayam', 'monyet');
```

```
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).

Array Multidimensi

Adakalanya kita perlu mengetahui ada berapa banyak elemen yang terdapat di dalam suatu array. Untuk itu kita dapat menggunakan *method* `Array.length`.

```
var herbivora = new Array('kambing', 'sapi');
var karnivora = new Array('harimau', 'serigala');
var omnivora = new Array('ayam', 'monyet');

var binatang = new Array(herbivora, karnivora, omnivora);
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.

```
console.log(binatang[0].length);
console.log(herbivora.length);
```

Menghitung Jumlah Isi Array

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.

Memahami Fungsi

Kita dapat membuat fungsi sendiri untuk kebutuhan yang lebih spesifik pada aplikasi kita. Berikut adalah sintaks untuk mendeklarasikan fungsi:

```
function namafungsi() {
    // blok kode fungsi
}
```

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*.

```
function cetakPesan()
{
  console.log('Halo Coder!');
}
```

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.

```
cetakPesan();
```

Membuat Fungsi

Didalam 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.

```
function cetakPesan()
{
  var pesan = 'Halo Coder!';
  console.log(pesan);
}
```

```
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 sebaliknya, variabel yang ada di luar fungsi pada dasarnya tidak dapat diakses dari dalam fungsi.


```
var pesan = 'Halo Coder!';

function cetakPesan()
{
  console.log(pesan);
}
```

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.

**Global secara otomatis**

Jika Anda memasukkan nilai ke variabel yang tidak dideklarasikan, secara otomatis akan menjadi variabel GLOBAL.

Kode dibawah ini merupakan contoh, deklarasi variabel global `pesan`, meskipun nilainya dimasukkan dalam fungsi.

```
cetakPesan();

function cetakPesan() {
  var pesan = 'Halo Coder!';
  console.log(pesan);
}
```

Jangan menggunakan variabel global jika memang tak terlalu dibutuhkan. Di `Strict Mode` variabel secara otomatis akan gagal dideklarasikan.

Skup Variabel pada Fungsi

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.

```
function selamatDatang(nama)
{
  console.log('Selamat Datang, ' + nama + '<br/>');
}
selamatDatang('Bambang Rahmanto');
```

```
selamatDatang("Coder");
var username = 'Bambang Rahmanto';
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.


Argumen Fungsi

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.

```
function cetakPesan(nama, bahasa='id')
{
  var pesan = 'Selamat datang, ' + nama;
  if(bahasa == 'en')
  {
    pesan = 'Welcome, ' + nama;
  }
  console.log(pesan);
}
var nama = 'Bambang';
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.

Argumen Default Fungsi

Ketika kita melewatkan variabel ke dalam argumen sebuah fungsi, nilai yang ada di dalam variabel tersebut tidak akan berubah.

```
function kuadrat(angka)
{
  angka.key *= angka.key;
}

var x = {key:5};
console.log('sebelum dikuadratkan: ' + x['key'] + '<br/>');
kuadrat(x);
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`.

argumen pass by reference fungsi javascript

Argumen Referensi pada Fungsi

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.

```
var tanggal = Date();
console.log(tanggal);
```

Pada contoh kode di atas, variabel `tanggal` akan bernilai tanggal searang karena dia menerima nilai dari fungsi `Date()`.

Pada deklarasi fungsi sendiri, kita dapat mengembalikan nilai hasil pemanggilan suatu fungsi dengan menggunakan kata kunci `return`.

```
function luasSegitiga(alas, tinggi){
    luas = alas * tinggi / 2;
    return luas;
}
```

```
//mencetak nilai 10
console.log(luasSegitiga(5,4));

// variabel `hasil` bernilai 15
console.log(hasil);
```

Fungsi `luasSegitiga()` di atas menerima 2 argumen `alas` dan `tinggi` dan mengembalikan nilai luas segitiga berdasarkan nilai argumen yang dilewatkan.

Mengembalikan Nilai Fungsi

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.

<table class="table table-condensed table-stripped">
  <thead>
    <tr><th>Op 	</th><th>Nama 	</th><th>Contoh 	</th><th>Keterangan</th></tr>
  </thead>
  <tbody>
    <tr><td>+ 	</td><td>Penjumlahan 	</td><td>x + y 	</td><td>Penjumlahan nilai x dan y</td></tr>
    <tr><td>- 	</td><td>Pengurangan 	</td><td>x - y 	</td><td>Pengurangan nilai x oleh y</td></tr>
    <tr><td>* 	</td><td>Perkalian 	</td><td>x * y 	</td><td>Perkalian nilai x dan y</td></tr>
    <tr><td>/ 	</td><td>Pembagian 	</td><td>x / y 	</td><td>Pembagian nilai x oleh y</td></tr>
    <tr><td>% 	</td><td>Modulus 	</td><td>x % y 	</td><td>Sisa dari pembagian x oleh y</td></tr>
  </tbody>
</table>


Operator Aritmatika

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:

<table class="table table-condensed table-stripped">
  <thead>
    <tr><th style="width:100px">Contoh</th><th style="width:120px">Serupa</th><th>Keterangan</th></tr>
  </thead>
  <tbody>
    <tr><td>x += y  </td><td>x = x + y </td><td>x diisi dengan nilai dari x sebelumnya ditambah nilai y</td></tr>
    <tr><td>x -= y  </td><td>x = x - y </td><td>x diisi dengan nilai dari x sebelumnya dikurangi nilai y</td></tr>
    <tr><td>x *= y  </td><td>x = x * y </td><td>x diisi dengan nilai dari x sebelumnya dikali nilai y</td></tr>
    <tr><td>x /= y  </td><td>x = x / y </td><td>x diisi dengan nilai dari x sebelumnya dibagi nilai y</td></tr>
    <tr><td>x %= y  </td><td>x = x % y </td><td>x diisi dengan sisa nilai dari x sebelumnya dibagi nilai y</td></tr>
  </tbody>
</table>

operator penugasan (assignment) javascript

Operator Penugasan (Assignment)

Operator perbandingan digunakan untuk membandingkan dua buah nilai numerik atau string. Output dari operasi ini adalah nilai `true` atau `false`.

<table class="table table-condensed table-stripped">
  <thead>
    <tr><th>Op</th><th>Nama</th><th style="width:80px">Contoh</th><th>Hasil</th></tr>
  </thead>
  <tbody>
    <tr><td>== </td><td>Sama dengan </td><td>x == y </td><td>TRUE bila nilai x sama dengan y</td></tr>
    <tr><td>=== </td><td>Identik </td><td>x === y </td><td>TRUE bila nilai x sama dengan y, DAN tipe data keduanya sama</td></tr>
    <tr><td>!= </td><td>Tidak sama dengan </td><td>x != y </td><td>TRUE bila nilai x tidak sama dengan y</td></tr>
    <tr><td>!== </td><td>Tidak identik </td><td>x !== y </td><td>TRUE bila nilai x tidak sama dengan y, ATAU tipe data keduanya berbeda</td></tr>
    <tr><td>> </td><td>Lebih dari </td><td>x > y </td><td>TRUE bila nilai x lebih dari y</td></tr>
    <tr><td>< </td><td>Kurang dari </td><td>x < y </td><td>TRUE bila nilai x kurang dari y</td></tr>
    <tr><td>>= </td><td>Lebih dari atau sama dengan </td><td>x >= y </td><td>TRUE bila nilai x lebih dari atau sama dengan y</td></tr>
    <tr><td><= </td><td>Kurang dari atau sama dengan </td><td>x <= y </td><td>TRUE bila nilai x kurang dari atau sama dengan y</td></tr>
  </tbody>
</table>

Operator Perbandingan

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:

<table class="table table-condensed table-stripped">
  <thead>
    <tr><th>Operator</th><th>Nama</th><th>Keterangan</th></tr>
  </thead>
  <tbody>
    <tr><td><code>++x</code></td><td>pre-increment  	</td><td>tambah nilai x sebanyak 1, kemudian kembalikan nilai x</td></tr>
    <tr><td><code>x++</code></td><td>post-increment 	</td><td>kembalikan nilai x, lalu tambah nilai x sebanyak 1</td></tr>
    <tr><td><code>--x</code></td><td>pre-decrement  	</td><td>kurangi nilai x sebanyak 1, kemudian kembalikan nilai x</td></tr>
    <tr><td><code>x--</code></td><td>post-decrement 	</td><td>kembalikan nilai x, lalu kurangi nilai x sebanyak 1</td></tr>
  </tbody>
</table>

Operator Increment-Decrement

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 diantaranya `and`, `or`, `xor` dan `not`.

<table class="table table-condensed table-stripped">
  <tbody>
    <tr>
      <th style="width:15%">Op</th>
      <th style="width:20%">Nama</th>
      <th style="width:20%">Contoh</th>
      <th style="width:35%">Output</th>
    </tr>
    <tr>
      <td><code>and</code><br><code>&&</code></td>
      <td>And</td>
      <td><code>x and y</code><br><code>x && y</code></td>
      <td>TRUE hanya bila x and y keduanya bernilai TRUE</td>
    </tr>
    <tr>
      <td><code>or</code><br><code>||</code></td>
      <td>Or</td>
      <td><code>x or y</code><br><code>x || y</code></td>
      <td>TRUE bila salahsatu atau keduanya dari x atau y bernilai TRUE</td>
    </tr>
    <tr>
      <td><code>xor</code></td>
      <td>Xor</td>
      <td><code>x xor y</code></td>
      <td>TRUE bila hanya salahsatu saja (tidak keduanya) dari x atau y bernilai TRUE</td>
    </tr>
    <tr>
      <td><code>!</code></td>
      <td>Not</td>
      <td><code>!x</code></td>
      <td>TRUE bila x bernilai FALSE</td>
    </tr>
  </tbody>
</table>

Operator Logika

Operator string sangat membantu dan akan sering digunakan pada operasi yang berkaitan dengan data string. Operasi yang dimaksud adalah konkatenansi (perangkaian) atau penggabungan dua buah string, dan operator yang digunakan adalah tanda titik `+`. Selain itu, operator konkatenansi ini juga dapat digunakan pada operasi *assignment*, seperti halnya operator aritmatika.

```
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`.

Operator String

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:

```
if(kondisi) {
   // kode untuk dieksekusi bila kondisi bernilai true
}
```

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.

Statemen  If

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`.

```
if (kondisi) {
   // kode untuk dieksekusi bila kondisi bernilai TRUE
} else {
   // kode untuk dieksekusi bila kondisi bernilai FALSE
}
```

Statemen if..else

Adakalanya kita harus mengecek beberapa kondisi dan hanya menjalankan kode dari salahsatu kondisi yang terpenuhi saja. Untuk itu kita dapat menggunakan statemen `if..else if..else` dst.

```
if(kondisi a){
   // kode bila kondisi a terpenuhi
} else if(kondisi b){
   // kode bila kondisi b terpenuhi
..
..
} else if(kondisi n) {
   // kode bila kondisi n terpenuhi
} else {
   // kode bila semua kondisi tidak terpenuhi
}
```

Statemen if..elseif..else

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.

```
if(kondisi a) {
  if(kondisi b) {
    // jalankan kode
  }
}
```

if Bersarang

Statemen `switch` digunakan untuk menjalankan satu diantara banyak blok kode berdasarkan kecocokan nilai yang dievaluasi.

```
switch(variabel){
   case a:
      // blok kode A
      break;
   case b:
      // blok kode B
      break;
   ...
   default:
      // blok kode default
}
```

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.

Switch

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.

```
var binatang = 'kambing';
switch(binatang)
{
  case 'ayam':
    console.log(binatang + " jumlah kaki 2");
    break;
  case 'sapi':
    console.log(binatang + " jumlah kaki 4");
    break;
  case 'kambing':
    console.log(binatang + " jumlah kaki 4");
    break;
...
}
```

Akan tetapi `switch` memperbolehkan cara yang lebih sederhana agar kita tidak perlu mengulang baris kode yang sama.

```
var binatang = 'kambing';
switch(binatang)
{
  case 'ayam':
    console.log(binatang + " jumlah kaki 2");
    break;
  case 'sapi':
  case 'kambing':
    console.log(binatang + " jumlah kaki 4");
    break;
...
```

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".

Switch (2)

Statemen perulangan `while` akan menjalankan blok kode berulang-ulang selama kondisi masih bernilai `true`.

```
while (cek kondisi) {
    // kode yang akan dijalankan berulang
}
```

Sebagai contoh kode berikut:

```
var x = 1;
while(x <= 5)
{
  document.write( x+'<br/>' );
  x++;
}
```

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`.



Perulangan dengan while

Statemen `do..while` mirip seperti statemen `while`, yakni menjalankan blok kode berulang-ulang selama kondisi yang dicek bernilai `true`.

```
do {
    // kode yang akan dijalankan berulang
} 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.

Perulangan dengan do..while

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.

```
for (inisiasi counter; cek kondisi; naikkan counter) {
    // kode yang akan dijalankan berulang
}
```

* Parameter pertama adalah inisial variabel yang akan dijadikan penghitung.
* Parameter kedua adalah pengecekan kondisi variabel. Bila kondisi bernilai `true`, blok kode akan dijalankan.
* Parameter ketiga untuk menaikkan/menurunkan nilai variabel setiap kali blok kode selesai dijalankan.
* Setiap parameter dipisahkan dengan tanda titik koma.

```
var x;
for(x=0;x<5;x++)
{
  console.log( 'Nomor: '+ x + '<br/>' );
}
```

Statemen `for` membuat proses perulangan dengan jumlah tertentu ditulis dalam bentuk kode yang lebih ringkas.

Perulangan dengan for

Perulangan dengan statemen `foreach` hanya berlaku pada variabel array, digunakan untuk mengulang membaca setiap elemen array.

```
Array.forEach(function(value)
{
  // kode yang akan dijalankan berulang
})
```

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.

```
var warna = new Array('merah','jingga','kuning');
warna.forEach(function(value)
{
  console.log(value + '<br/>');
});
```

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.

Perulangan dengan foreach

Bagaimana halnya bila kita hendak menampilkan setiap elemen array yang ada di dalam array (array bersarang/multidimensi)? Gunakanlah `foreach` bersarang.

```
var herbivora = new Array('kambing', 'sapi', 'kuda');
var karnivora = new Array('harimau', 'serigala', 'anjing');
var omnivora = new Array('ayam', 'monyet', 'beruang');
var binatang = new Array(herbivora, karnivora, omnivora);
```

Untuk menampilkan semua nilai elemen pada array multidimensi di atas, kita dapat menggunakan `foreach` seperti berikut:

```
binatang.forEach(function(jenis)
{
  jenis.forEach(function(nama)
  {
    console.log(nama + '<br/>');
  });
})
```

`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`.


foreach Bersarang

Hello World

Variabel adalah wadah untuk menyimpan suatu nilai. Pada Javascript, syarat variabel diantaranya:

* Nama variabel dapat berisi huruf, angka, karater 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.

**Misal**

```js
var nama = 'Fauziah';
var $ttl = 'Bandung, 23 September 1995';
var gend3r = 'Perempuan';
var _alamat = 'Jl Sirna galih No 32 Bandung';
var kd_ps = 40195;
var Pddkn_trkhr = 'S1';
```

Variabel

Bagaimana menampilkan hasil pemrograman Javascript? Banyak cara yang bisa digunakan, antara lain:

* Mencetak output kedalam elemen HTML dengan `innerHTML`.
* Mencetak output ke HTML dengan `document.write()`.
* Mencetak output dengan alert box `window.alert()`.
* Mencetak ouput ke konsol browser dengan `console.log()`.

Output

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 kurung kurawal `{}` dan isi array dipisahkan dengan koma `,`.

* Object adalah tipe data yang ditulis dengan kurung siku `[]` 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.

Tipe Data

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 diawal variabel tambahkan `const`.

Konstanta

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. Kamu dapat menggunakan kutip tunggal maupun ganda.

Misal,

```
var nama_mobil = 'Lamborghini';
```

Kamu dapat menggunakan kutip sebagai string, dengan catatan, tanda kutip yang digunakan untuk mengapit string berbeda dengan kutip yang didalam string.

Misal,

```
var salam = "Assalamu'alaikum";
var salam = 'Wa"alaikum salam';
```

**Panjang String**

Panjang string dapat dihitung dengan properti `length`.

Misal,

```
var abjad = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
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,

```
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,

```
var whoami = "Kami adalah \"Gerilyawan\" dari planet Namex.";
```

Mengenal String

Javascript juga sudah menyediakan beragam `method` bawaan untuk memanipulasi transformasi teks: mengubah teks menjadi huruf kapital semua, huruf kecil semua, setiap kata dan sebagainya.

```
var teks = "Valentino Rossi adalah seorang pembalap MotoGP";
console.log(teks + '<br/>');
console.log(teks.toUpperCase() + '<br/>');
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.


Transformasi Teks String

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.

```
string.replace(searchvalue, newvalue)
```

Argumen `searchvalue` diisi oleh string yang akan dicari untuk diganti. Argumen `newvalue` diisi oleh string yang menjadi pengganti.

```
var pesan = "saya suka baso sapi, sate kambing dan iga bakar";
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'`, dimana kata kambing diganti menjadi ayam.

mencari dan mengganti teks dalam string javascript

Mencari dan Mengganti Teks dalam String

Adakalanya kita harus mengurai suatu string dan mengolahnya, seperti contohnya mengambil segmen tertentu dari sebuah url. Untuk hal ini kita dapat menggunakan method `split()`.

```
var url = 'codepolitan.com/interactive-coding/javascript/output';
var segmen = url.split('/');
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()`.

```
var tags = new Array('javascript', 'belajar javascript', 'tutorial javascript');
var tag_str = tags.join(", ");
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.

memecah string ke bentuk array dan sebaliknya dalam javascript

Memecah String ke Bentuk Array dan Sebaliknya

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()`.

```
var nama = ' Al Khawarizmi    ';
console.log(nama + '<br/>');
console.log('Sebelum menghapus karakter depan dan belakang, panjang string var nama: ' + nama.length + '<br/>');
nama = nama.trim();
console.log(nama + '<br/>');
console.log('Setelah menghapus karakter depan dan belakang, panjang string var nama: ' + nama.length + '<br/>');
```

Outputnya,

```
Al Khawarizmi
Sebelum menghapus karakter depan dan belakang, panjang string var nama: 18
Al Khawarizmi
Setelah menghapus karakter depan dan belakang, panjang string var nama: 13
```

Argumen pertama method string `trim()` diisi dengan string yang hendak dibersihkan.

menghapus karakter di depan belakang string javascript

Belajar Coding Interaktif Pemrograman JavaScript

Silabus

Tentang Kelas

Yang akan kamu dapat

Explore Roles

Explore Generative AI

Explore Cybersecurity

Explore Technologies

Explore Skill Assessments

KelasFullstack

RuangAI

JagoanSiber

Coding Playground

Belajar Coding Interaktif Pemrograman JavaScript

Silabus

Sintaks Dasar

Operator

Pemilihan Kondisi

Array

Perulangan

Fungsi

String

Tentang Kelas

Yang akan kamu dapat