Tutorial Javascript 7 - Function

Untuk membuat sebuah program besar, sebaiknya dipecah menjadi sub program yang lebih kecil, lalu secara bersama-sama membangun aplikasi akhir. Dalam oemrograman javascript sub program ini dikenal dengan istilah function.

Function didalam javascript juga cukup unik, karena bisa disimpan ke dalam variabel atau dujadikan sebagi argument. Istilah programmingnya, function di javascript disebut sebagai first-class citizen.

Selain itu setiap variabel yang ada di dalam function memiliki scope atau ruang lingkup yang terbatas. Dalam bab ini kita akan membahas tentang function javascript, serta bagaimana penggunaanya.

Pengertian Function

Function atau dalam bahasa indonesia disebut sebagai fungsi adalah kumpulan kode program yang dirancang untuk menyelesaikan sebuah tugas untuk memecah alut program yang besar menjadi beberapa progran kecil agar mudah di kelola.

Setiap function punya tugas dan fungsi masing-masing. Bisa saja didalam sebuah function terdapat function lain, tergantung kompleksitas masalah yang ingin dipecahkan.

JavaScript sendiri memiliki ratusan function bawaan yang bisa membuat fungsi sendiri.

Berikut format dasar pembuatan function di dalam javasript:

function function_name(argument1, argument2, ...) {
	statement;
	statement;
	return value;
}

Setelah keyword function, diikuti dengan function_name. Function_name ini merupakan nama dan fungsi tersebut. Penulisan nama fungsi mengikuti aturan  dari identifier atau dengan kata lain aturan pembuatan variabel, yakni tidak boleh diawali dengan angka, tidak boleh mengandung spasi dst.

Setiap function bisa memiliki 1 atau beberapa argument. Argument adalah variabel yang berfungsi sebagai nilai input kedalam function. Argument ditulis di dalam tanda kurung setelah function_name.

Block function ditandai dengan tanda kurung kurawal. Disinilah kode program javascript yang membentuk function ditulis. Perintah return digunakann sebagai output function. Penulisan argument dan perintah return bersifat opsional dan boleh tidak ditulis.

Jika anda belum pernah belajar bahasa pemrograman, penjelasan saya diatas mungkin susah untuk dipahami. Tapi jagabga khawatir, saya akan menjelaskan langkah perlangka menggunakan contoh kode program.

Membuat dan Memanggil Function

Sebagai praktek pertama, saya akan merancang function pagi() yang menampilkan data "Selamat Pagi" dalam 2 bahasa:

function pagi() {
    console.log("Selamat Pagi");
    console.log("Goog Morning");
}

pagi();

Setelah mendeklarasikan function pagi(), saya menjalankan dengan cara menulis nama fungsi tersebut pagi();

Menjalankan fungsi dengan cara seperti ini dikenal dengan istilah memanggil fungsi (calling a function). Istilah lain adalah running executing, invokking atau  dispatching a function.

Bagaimana jika kita coba memanggil fungsi ini beberapa kali?

function pagi() {
    console.log("Selamat Pagi");
    console.log("Goog Morning");
}

pagi();
pagi();
pagi();

Karena ada 2 salam dalam 1 kali pemanggilan, ketika fungsi pagi() dipanggil sebanyak 3 kali, akan tampil 6 salam. Inilahh kepraktisan menggunakan fungsi, kita bisa dengan mudah menjalankan kode program yang sama berulang kalli dan bisa dipanggil kapan saja.

Membalikan Nilai Function

Fungsi pagi() yang kita rancang sebelum ini sangat praktis untuk menampilkan 2 salam dalam setiap pemanggilan. Tapi bagaimana jika saya ingin salam ini tidak langsung tampil, tapi ditampung dulu ke dalam variabel (untuk nantinya diproses lagi)? kita bisa menggunakan keyword return. Perintah return akan mengembalikan suatu nilai ketika fungsi ini dipanggil.

Mari kita lihat contoh penggunaanya:

function pagi() {
    return "Selamat Pagi";
}

Kali ini saya mengubah fungsi pagi() menjadi hanya 1 baris return "Selamat Pagi". Dengan demikian, saya bisa menjalankan sebagai berikut:

function pagi() {
    return "Selamat Pagi";
}

var salam = pagi();
console.log(salam);  // "Selamat Pagi"

Perhatikan cara pemanggilan fungsi pagi(), kali ini saya menyambungnnya mengguanakan operator assignment. Denga kata lain, hasil dari fungsi pagi(), akan disimpan ke dalam variabel salam. Setelah itu, apa isi dari variabel salam ini? Adalah string "Selamat Pagi".

Mengembalikan Array

Salah satu aturan dari perintah return adalah kita hanya boleh mengembalikan 1 nilai saja, apakahh itu string maupun variabel. Jadi, bagaimana jika nilai yang dikembalikan ada banyak?

Kita bisa memanfaatkan array:

function pagi() {
    var salamPagi = ["Selamat Pagi", "Good Morning"];
    return salamPagi;
}

var salam = pagi();
console.log(salam);  // Array ["Selamat Pagi", "Good Morning"]

Saya membuat variabel salamPagi di dalam function pagi(), variabel ini selanjutnya diisi array yang terdiri dari 4 buah string. Perintah reutn salamPagi akan mengembalikan array salamPagi

Ketika saya memanggil fungsi ini dengan var salam = pagi(), isi dari array salamPagi akan pindah ke variabel salam. Dengan trik ini kita bisaa mengembalikan banyak nilai menggunakan perintah return.

Argument Function

Fitur berikutnya dari function adalah argument, yakni mengirim satu atau beberapa nilai ke dalam function untuk diproses. Berikut contoh penggunanya:

function pagi(siapa) {
    return "Selamat Pagi" + siapa;
}

var salam = pagi("Jakarta);
console.log(salam);  // Selamat Pagi Jakarta

Perhatikan cara pendefinisian fungsi pagi(). Saya menulisnya dengan function pagi(siapa),  siapa disini merupakan argument yang sebenarnya tidak lain merupakan variabel. Apa isi dari variabel ini? Nantinya  ditentukan pada ssaat pemanggilan fungsi.

Didalam block fungsi, kita bisa menggunakan variabel argument dengan bebas, mirip seperti cara penggunaan varianel biasa. Dalam contoh diatas, saya menyambungnya dengan contoh string "Selamat Pagi". Nilai ini akan menjadi nilai return function.

Pada saat fungsi pagi() dipanggil saya menulis pagi("Jakarta"). String "Jakarta" inilah yang menjadi input ke fungsi pagi(). Dengan kata lain, saya mengisi variabel siapa di fungsi pagi() dengan string "Jakarta". Hasil akhir dari pemanggilan fungsi pagi("Jakarta") adalah "Selamat Pagi Jakarta".

Argument Object

Argument Object adalah sebutan untuk 'object' yang menampungk seluruh argument pada saat pemanggilan function. Arguments object sebenarnya lebih mirip seperti array. Oleh karena itu boleh dibilang bahwa kita sedang membahas tentang array khusus bernama arguments.

Mari kita lihat cintih penggunanya:

function angka(){
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments[3]);
}

angka(4,8,3,7);

Saya mendefinisikan fungsi angka() tanpa membuat tempat untuk argument. Didalam fungsi ini terdapat empat perintah concole.log() yang masing-masing menanmpilkan array aargumentss mulai dari index 0 hingga 4.

Kemudian saya memanggil fungsi angka() dengan 4 buah argument angka(4, 8, 7, 3).

Bagaimana hasilnya?

Seperti yang terlihat, setiap argument yang saya tulis bisa di akses menggunakan array arguments, dimana argument pertama disimpan ke dalam arguments[0], argument kedua kedalam arguments[1]. dst. Array arguments ini tersedia di dalam setiap function javascript dan bisa diakses dari dalam function tersebut.

Spread Operator untuk Argument

Spread operator (...) merupakan fitur bari dari ECMAScript 6. Fungsi lain dari operator ini adalah menggantikan peran argument object.

Penggunaanya sangat mirip seperti arguments object, seperti contoh berikkut:

function angka(...arg) {
    console.log(arg[0]);  // 4
    console.log(arg[1]);  // 8
    console.log(arg[2]);  // 3
    console.log(arg[3]);  // 7
}

angka(4, 8, 3, 7);

Perhatikan penulisan aargument pada saat pendefinisian fungsi angka(), saya menulis angka(...arg). Ini bisa dibaca jika fungsi angka() dipanggil dengan argument, masukan seluruh argument tersebut kedalam variabel arg.

Variabel arg akan menjadi array yang bersisi seluruh argument ketika pemanggilan fungsi. Kurang lebih mirip seperti argument object yang kita pelajari sebelum ini.

Nama variabel arg hanya sebagai contoh, anda bebas menggantinya dengan nama lain.