Belajar Javascript Function

Cara Menggunakan Function

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Sekarang kita sudah memasuki topik baru, mengenai function. Function ini sangat penting ya, baik di pemograman Javascript maupun pemograman dengan menggunakan bahasa lainnya. Oleh karena itu, kita akan membuat satu playlist yang secara khusus hanya untuk membahas mengenai function.

Pertama kita lihat dari konsepnya terlebih dahulu ya. Mengapa kita memerlukan function?

Sebagai contoh, misalkan kita hendak membuat program untuk mengendalikan mobil kita, agar mobil bisa bergerak dari rumah menuju ke coffee shop, dan kemudian bisa kembali ke rumah kita. Kita mulai memberikan instruksi pada mobil kita, pertama kita suruh belok kanan. Kemudian kita suruh lagi belok kiri dan berhenti di Coffee Shop. Lalu kita suruh putar balik untuk pulang. Belok ke kanan. Belok ke kiri. Dan berhenti di rumah kita.

Oke. Sekarang anggap saja kita sudah berhasil menuliskan instruksi pada mobil kita ya. Jadi setiap kali kita mau membeli kopi, kita tinggal menuliskan ketujuh instruksi ini.

Kemudian akan muncul masalah apabila ternyata kita rajin membeli kopinya. Anggap saja kita setiap hari pergi membeli kopi. Jadinya setiap hari kita harus mengetikkan ketujuh perintah ini. Besok kita ketik tujuh perintah. Lusa kita ketik ketujuh perintah dan begitulah setiap hari.

Sampai akhirnya kita menjadi cape sendiri ya, karena mesti mengetik tujuh perintah setiap hari. Terus kita berpikir, bisa ga ya kalau ketujuh perintah kita singkat agar tidak perlu diketik secara berulang-ulang setiap hari.

Nah, disinilah muncul yang namanya function. Jadi kita bisa membuat suatu function atau fungsi dengan nama beliKopi(), yang isinya adalah ketujuh instruksi tadi. Kita hanya perlu memanggil satu function beliKopi(), dan mobil akan menjalankan ketujuh instruksi untuk membeli kopi.

Nah, kurang lebih sudah mengerti ya apakah itu function. Function adalah sekumpulan kode yang dirancang untuk mencapai tujuan tertentu.

Apa saja kegunaan dari membuat function? Yang pertama adalah Reuseability. Kode yang kita tulis pada function dapat digunakan lagi pada bagian lain dari script kita. Seperti contoh program untuk mengendalikan mobil kita yang tadi, kita sudah membuat function yang berisikan ketujuh instruksi untuk membeli kopi. Dan setiap hari kita tinggal memanggil satu function tersebut.

Kegunaan kedua adalah Abstraction, yaitu menyembunyikan kompleksitas dari masalah. Balik lagi ke contoh program untuk mengendalikan mobil tadi, setelah kita mengubah program kita menjadi function, kita sudah perlu tau lagi apakah harus belok kiri, atau belok kanan, ataupun urutan dari instruksi-instruksi tersebut. Kita hanya perlu tau memanggil fungsi beliKopi saja, dan fungsi tersebutlah yang akan memecahkan masalah kita.

Kegunaan ketiga adalah Decomposition. Nah, hal ini sudah pernah kita pelajari pada playlist sebelumnya ya. Untuk memecahkan suatu masalah, programmer harus bisa merumuskan langkah-langkah kecil yang harus dijalankan oleh komputer. Nantinya langkah-langkah ini bisa kita kelompokkan menjadi function, sehingga bisa membantu kita agar lebih gampang dalam menuliskan kode.

Sekarang kita ambil dadu sebagai contoh kasus. Dadu sangat banyak digunakan dalam permainan papan, seperti ular tangga, ludo, monopoli dan lain-lain. Cara penggunaannya adalah dikocok dan kemudian dilempar, sehingga kita mendapatkan angka acak diantara 1 hingga 6. Nah, apabila teman-teman hendak membuat program komputer mengenai permainan seperti ludo atau ular tangga, maka teman-teman perlu memikirkan dahulu bagaimana caranya agar komputer bisa menghasilkan bilangan acak diantara 1 hingga 6.

Kita langsung ke kode ya. Kita coba dahulu di browser. Kita sudah belajar dari video sebelumnya, untuk mendapatkan bilangan acak diantara 1 hingga 6, kita perlu menuliskan kode:

Math.floor(Math.random()*6)+1;

Setiap kali kode ini kita jalankan, maka kita mendapatkan bilangan acak diantara 1 hingga 6. Namun bagi kita yang sudah pernah bermain ludo atau ular tangga, tentunya sudah tau ya. Dalam satu permainan, kita bisa melempar dadunya hingga puluhan kali. Script kita akan jauh lebih bagus, apabila kode ini kita ubah menjadi function.

Ada 2 langkah yang harus kita lakukan apabila kita hendak menggunakan function. Yang pertama adalah kita harus membuat definisi dari function tersebut. Untuk sintaksnya, pertama kita gunakan dahulu kata kunci function, diikuti oleh nama function dan tanda kurung. Setelah itu kita taruh semua kode yang berhubungan dengan function ini di dalam kurung kurawal.

Yang perlu diingat disini adalah kita wajib memberikan tanda kurung setelah nama function. Walaupun tanda kurung tersebut tidak ada isinya.

Sebenarnya pada Javascript masih ada beberapa cara lagi untuk membuat function, seperti function expression dan arrow function. Namun pada video ini kita batasi dahulu menggunakan cara ini. Karena cara ini adalah cara yang paling umum digunakan di hampir semua bahasa pemograman.

Setelah kita membuat function, maka langkah kedua yang harus kita lakukan adalah memanggil atau menjalankan function tersebut. Caranya adalah sebutkan nama function dan diikuti oleh tanda kurung.

Kita coba praktek coding. Saya sudah menyediakan 2 buah file, yaitu index.html dan function.js. Pada index.html berisi boilerplate, dan bagian paling pentingnya adalah tag script yang mengarah ke function.js. Sedangkan file function.js masih kosong.

Kita tuliskan kode definisi function rollDice.

function rollDice()
{
  return Math.floor(Math.random()*6)+1;
}

Kita simpan dan jalankan di browser. Belum ada hasil apa-apa ya. Karena kita hanya melakukan langkah pertama dari cara menggunakan function, yaitu menuliskan definisinya saja. Kita belum menjalankan function tersebut.

Untuk menjalankan function, kita bisa menuliskan nama functionnya, yaitu rollDice. Perhatikan kalau saya hanya menulis rollDice saja, maka browser memberitahukan bahwa sistem mengenali bahwa rollDice ini adalah function, bahkan diperlihatkan juga bahwa di dalam function rollDice kita memanggil method Math.floor dan Math.random.

Namun function rollDice tidak dijalankan. Kalau kita ingin menjalankan function rollDice, kita harus ingat menambahkan tanda kurung dibelakang nama function. Walaupun di dalam tanda kurung ini tidak ada isinya, kita tetap harus menambahkan tanda kurung kosong. Perhatikan bahwa setiap kali kita memanggil function rollDice, maka browser mengembalikan nilai acak diantara 1 hingga 6.

Kita kembali ke kode function.js. Apabila kita ingin menjalankan function rollDice, maka kita bisa menambahkan rollDice() setelah definisi function. Kita simpan dan refresh browser. Dan ternyata belum ada hasilnya di layar ya. Karena kita tidak melakukan apa-apa terhadap nilai yang dikembalikan oleh function rollDice. Kita tambahkan console.log sehingga kodenya menjadi:

console.log(rollDice());

Dan sekarang setiap kali kita melakukan refresh, maka kita mendapatkan bilangan acak dari 1 hingga 6 pada console.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.