Sebagai pembuat program ada banyak perintah yang akan kita buat. Penyederhanaan dan pemanfaatan ulang blok perintah yang telah di buat merupakan bentuk penulisan program yang efektif.
Hal ini adalah salah satu keunggulan yang ada pada fungsi. Dengan membuat fungsi maka kita akan memecah script dengan mengelompokkan sesuai dengan jenis tugas dan bagian prosedur yang akan diselesaikan.
Pengertian Fungsi
Kita contohkan misalnya salah satu bagian menu dari program yang dibuat memerlukan operasi perkalian. hal yang akan kita lakukan adalah mendefinisikan sebuah fungsi perkalian. Selanjutnya setiap operasi perkalian di menu tersebut diselesaikan dengan cara memanggil fungsi yang telah di definisikan tersebut.
Jika fungsi yang dibuat ditempatkan di file lain kita dapat memanggilnya dan tidak menutup kemungkinan fungsi perkalian yang telah dibuat juga dapat digunakan oleh menu lain.
Dengan demikian pengertian fungsi adalah blok pernyataan yang memiliki tugas tertentu dan dapat digunakan secara berulang-ulang. Tujuan dibuatnya fungsi yaitu untuk membuat script program terstruktur dan berbentuk object oriented(OOP) sehingga programmer dapat bekerja lebih efektif dalam menyelesaikan program yang dibuat.
Berkaitan dengan cara penggunaan sebuah fungsi di JavaScript …..
yuk langsung saja kita bahas….
1. Penulisan Syntax Fungsi JavaScript
Untuk membuat fungsi di JavaScript penulisannya adalah sebagai berikut:
function namaFungsi(p1, p2, p3,dst..){
//kode program yang akan dieksekusi
}
Keterangan
- namaFungsi adalah nama dari function yang dibuat.
- p1, p2 adalah parameter. dapat berupa number,string atau lainnya sesuai dengantipe data yang akan dieksekusi melalui fungsi yang dibuat.
2. Contoh Penerapan Fungsi di JavaScript
Fungsi di JavaScript dapat kita buat melalui beberapa cara. Untuk dapat memahami bagaimana penulisan dan penggunaan sebuah fungsi di JavaScript dapat kita lihat dari beberapa contoh di bawah ini :
1. Fungsi Penjumlahan Sederhana JavaScript
Contoh penulisan fungsi penjumlahan dibuat secara (Internal)
Perhatikan script di atas kita menempatkan function penjumlahan di dalam script HTML. Ini adalah salah satu contoh dari fungsi yang ditulis secara internal
Output
Contoh Penerapan fungsi penjumlahan (External)
<html> <head> <!-- memanggil fungsi penjumlahan di file ins_fungsi.js --> <script src="ins_fungsi.js"></script> <title>Belajar JavaScript : Contoh Fungsi external</title> </head> <body> <h2>Menggunakan Fungsi External</h2> Hasil dari Penjumlahan Adalah : <p id="hasil"></p> <!-- Eksekusi penggunaan fungsi --> <script type="text/javascript"> penjumlahan(120, 30); </script> </body> </html>terlihat pada script di atas kita memanggil file ins_fungsi.js. silahkan buat file ins_fungsi.js dan masukkan script di bawah ini
// fungsi external JavaScript function penjumlahan(val1, val2) { document.getElementById("hasil").innerHTML = val1 + val2; }Output :
Dengan Menempatkan fungsi terpisah (external) maka fungsi tersebut dapat digunakan oleh file lain. Pada contoh di atas didalam file ins_fungsi.js kita dapat juga menambahkan fungsi lain seperti pengurangan, perkalian dan pembagian.
2. Membuat Fungsi dengan Return
Sebuah function juga dapat mengembalikan sebuah nilai. Untuk mengembalikan nilai di dalam sebuah fungsi kita gunakan return.
contoh :
<html> <head> <title>Belajar JavaScript : Contoh Fungsi dengan Return</title> </head> <body> <h2>Contoh Fungsi dengan Return</h2> Hasil dari Penjumlahan Adalah : <p id="hasil"></p> <script type="text/javascript"> let val1 = 200; let val2 = 5; // fungsi return JavaScript function jumlah(val1, val2) { var jum = val1 * val2; return jum; } document.getElementById("hasil").innerHTML = jumlah(val1, val2); </script> </body> </html>3. Fungsi dengan Tanda Panah
Selain membuat function dengan cara biasa, di JavaScript kita bisa membuat fungsi menggunakan notasi tanda panah (=>). Cara memanggil fungsi yang dibuat dengan cara ini juga sama dengan memanggil fungsi biasa.
Ini adalah contoh fungsi yang dibuat menggunkan =>
<script type="text/javascript"> var testFungsi = () => { console.log("Belajar JavaScript: fungsi 'testFungsi' ini dibuat dengan tanda panah"); } testFungsi();//output : Belajar JavaScript: fungsi 'testFungsi' ini dibuat dengan tanda panah </script>Penutup. …
Dengan belajar function di tutorial JavaScript ini kita melakukan pemecahan 1 script program menjadi bagian-bagian tertentu. Bagian yang telah dipecah ini dapat ditempatkan di file yang sama dari file awal atau dapat juga dibuatkan terpisah. Mengenal function telah memabantu kita memahami cara memebuat program dengan cara baru dengan ciri lebih terstruktur dan reuseable.
Tutorial Lanjutan
Belajar Array JavaScript