Function dalam Javascript ~ Pemrograman dan Teknologi

Function dalam pemrograman jika dianalogikan atau disamakan dengan tindakan manusia akan seperti nama dari suatu tugas yang di dalamnya ada tugas-tugas yang lebih sederhana. Analogikan saja tugas tersebut seperti tugas "memasak mi", Untuk memasak mi, kita harus melakukan beberapa hal seperti menyalakan kompor, merebus air, memasukkan mie, memasukkan bumbu dan menghidangkannya. Tanpa perlu panjang lebar, orang yang paham cara memasak mie instan sudah paham caranya hanya dengan perintah "Masaklah mi!". Dan tanpa perlu panjang lebar juga, kita akan mempelajari cara mendeklarasikan function.

function coba(){
    document.write("coba1");
    document.write("coba2");
}

Untuk mendeklarasikan function kita mengawalinya dengan kata "function". Tiap function punya nama, dan nama function di atas adalah "coba". Dari contoh di atas kita bisa melihat bahwa kita bisa meletakkan sekumpulan statement dalam function dengan mengapitnya diantara tanda "{" dan "}".

Saat memerintahkan untuk melaksanakan suatu kegiatan, kita tidak perlu menyebutkan seluruh tahap dan proses dari suatu kegiatan, tapi cukup menyebut "nama kegiatannya". Begitu juga saat memanggil suatu fungsi, kita cukup menyebutkan nama fungsinya dan parameternya. Berikut ini adalah pemanggilan fungsi dengan nama "coba" tanpa parameter.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <Script>
        function coba(){
            document.write("coba<BR />");
        }
        coba();
        coba();
        coba();
     </Script>
</BODY>
</HTML>

Pada contoh di atas, ada function coba dalam script. Di bawahnya ada pemanggilan function "coba()" sebanyak tiga kali. Tanpa perlu saya jelaskan panjang lebar, seharusnya kalian bisa melihat bahwa function bisa digunakan lebih dari sekali, dan kalian seharusnya juga paham bagaimana cara pemanggilan function.

Functionnya pada script dalam kode HTML di atas tidak memiliki parameter. Dalam Function, kita juga akan sering memerlukan parameter. Parameter akan berguna jika kita ingin hasil dari function berubah tergantung dari input atau nilai variabel yang ada. Berikut ini kita akan membuat function yang memiliki parameter.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <Script>
        function coba(x){
            document.write("coba "+x+"<BR />");
        }
        coba("ini");
        coba("itu");
        coba("anu");
     </Script>
</BODY>
</HTML>

Pada contoh di atas, ada tiga kali pemanggilan function dengan argumen yang berbeda-beda. Ada yang menggunakan parameter "anu", "ini", dan "itu". Pada function-nya, argumennya diwakili dengan satu parameter bernama x. Parameters dari suatu function adalah nama yang ditunjukan saat deklarasi atau pendefinisian function. Arguments dari suatu function adalah nilai asli yang diterima saat pemanggilan function.

Selanjutnya, kita akan mempelajari tentang nilai kembalian dari suatu function. Anggap saja, nilai kembalian seperti "mi instan yang sudah selesai dimasak". Setelah proses dari "memasak mi" diselesaikan, mi akan dihidangkan dan diterima oleh seseorang. Jika mi dianggap sebagai kembalian dari proses memasak mi instan, maka function punya kembalian berupa nilai tertentu yang bisa disimpan pada variabel atau ditampilkan langsung.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <Script>
        function coba(a, b){
            return a+b;
        }

        var x=coba(1, 2);
        document.write("a+b = "+ x);
     </Script>
</BODY>
</HTML>

Dalam script yang ada di dalam kode HTML di atas, variabel x menerima kembalian dari function coba. Kembalian pada suatu function ditandai dengan kata "return". Sekarang, coba ketik, simpan dan jalankan sebagai file HTML dan lihat hasilnya!

Function tidak hanya punya parameter dan nilai kembalian, tapi function juga bisa punya variabel sendiri yang disebut dengan variabel lokal. Variabel lokal hanya berguna di dalam function sebagai "variabel baru" walaupun ada variabel dengan nama yang sama di luar function. Jika variabel lokal adalah variabel yang hanya bisa digunakan sementara di dalam function, variabel yang bisa digunakan di luar function disebut variabel global.

Variabel lokal di dalam function bisa dideklarasikan dengan var maupun let. Tapi, sebaiknya kalian menggunakan let supaya kalian yakin cakupan dari variabel tersebut hanya sebatas variabel lokal di dalam function.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <Script>
        function coba(a, b){
            let lokalku=1;
            return a+b+lokalku;
        }
        var x=coba(1, 2); 
        document.write("a+b = "+ x);
        //document.write(lokalku);
     </Script>
</BODY>
</HTML>

Pada contoh di atas, function coba memiliki parameter a dan b. function tersebut juga memiliki satu variabel lokal dengan nama lokalku. Nilai yang dikembalikan function di atas adalah "a+b+lokalku".

Selain deklarasi function, di atas juga ada pemanggilan function coba dengan argumen 1 (yang menggantikan parameter a) dan 2 (yang menggantikan parameter b). Nilai kembalian tersebut disimpan dalam variabel x dan kemudian ditampilkan dengan "document.write".

Baris terakhir sebelum tag </script> sengaja saya jadikan komentar karena memang hanya akan menyebabkan error dan tidak menampilkan apa-apa. Jika kalian mau mencoba mencatak variabel lokal dari suatu function di luar function yang memilikinya, maka nilainya sudah tidak terdefinisikan lagi.

Selain dengan "cara biasa", ada beberapa cara untuk menggunakan fungsi. Function Expression merupakan cara lain untuk menggunakan fungsi selain dengan mendeklarasikannya sebagai fungsi dengan cara biasa.

<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <Script>
        coba=function(x){
            document.write(x+"<BR />");
        }
        coba1=coba;
        coba(3);
        coba1(4);
    </Script>
</BODY>
</HTML>

Pada contoh di atas, function yang mempunyai parameter x disimpan dalam variabel coba dan variabel coba disimpan lagi dalam variabel coba1. Function Expression bisa dipanggil dengan nama sesuai nama variabel yang menyimpannya. Untuk memahaminya, lebih baik langsung simpan kode HTML di atas sebagai file HTML, dan buka!

Function Expression adalah function tanpa nama yang bisa disimpan dalam suatu variabel, atau dijadikan argumen dari suatu fungsi. Function expression akan berguna saat kota menggunakan function yang membutuhkan funtion sebagai parameternya, misalnya setTimeOut, setInterval, dsb. Selain itu, function Expression juga bisa digunakan sebagai tindakan yang dilaksanakan saat suatu "event" yamg terkait input atau perubahan pada browser terjadi.

Selanjutnya, kita akan menggunakan Function Expression sebagai bagian dari event yang merespon saat mouse diklik.

<HTML>

<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <H1>Coba klik di mana saja di halaman ini</H1>
    <Script>
        document.onclick=function(e){
            alert("coba klik ini");
        }
    </Script>
</BODY>
</HTML>

Coba klik di tengah halaman window, dan lihat hasilnya!

Pada contoh document adalah nama object yang mewakili document. Function yang "ditugaskan" pada document.onclick akan otomatis dipanggil saat tombol di klik. document adalah nama objek yang mewakili document. e adalah parameter yang akan berisi data yang diterima saat event terjadi.

Event sebenarnya tidak hanya berlaku untuk document secara keseluruhan saja, tapi bisa diterapkan pada sebagian element HTML saja. Tapi, untuk saat ini kita tidak akan membahas penggunaan event dan akan lebih fokus pada function expression.

Selain onclick; untuk menangani penggunaan ada beberapa event lain yang juga biasa digunakan, misal :

document.onmouseup = Saat mouse dilepaskan dalam document
document.onmousedown = Saat mouse ditekan (dan ditahan) document
document.onmousemove = Saat pointer bergerak di dalam document
document.onmouseover = Saat pointer masuk document
document.onmouseout = Saat pointer keluar dari document
document.keydown = Saat tombol keyboard ditekan
document.keyup = Saat tombol keyboard dilepas
document.onload = Saat document baru dibuka.

Object document juga bisa diganti dengan object window, misalnya window.onclick, window.onmouse up, dll.

Berikutnya, kita akan mencoba penggunaan function sebagai parameter. Kali ini, saya akan menggunakan function "setInterval".

<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <Script>
    var i=0;
    var interval=setInterval(function(){
        i++;
        document.write("waktu = ", i, " ms <BR />");
    }, 1000);
    </Script>
</BODY>
</HTML>

setInterval adalah function yang akan diulang-ulang setiap rentang waktu tertentu sesuai parameter keduanya. Set interval akan berulang-ulang memanggil parameter pertamanya yang berupa function. Untuk saat ini, abaikan saja setIntervalnya karena kodeHTML dan script di atas cuma contoh yang menjelaskan penggunaan function expression.