Belajar Javascript Dasar Part 9 – Function Sebagai Sebuah Nilai

Pada seri belajar JavaScript Dasar Part 8, kita telah mempelajari Function Expression sebagai salah satu cara untuk membuat function. Pada Part 9 ini, kita akan memahami konsep yang tidak kalah penting, yaitu function dapat diperlakukan seperti sebuah nilai.

Konsep ini memungkinkan function disimpan ke dalam variabel, dikirim sebagai argument, hingga digunakan sebagai nilai yang dapat diproses oleh function lainnya. Memahami konsep ini akan membantu Anda mengenal cara kerja function dengan lebih baik saat belajar JavaScript.

Yuk, simak pembahasan berikut untuk memahami konsep function sebagai sebuah nilai beserta contoh penggunaannya dalam JavaScript.

Function Bisa Disimpan di Variabel

Kita sudah sering menjumpai bahwa nilai bisa disimpan ke dalam variabel. Sebagai contoh, menyimpan angka atau teks ke dalam variabel :

const tinggiBadan = 170;
const nama = 'Budi';

Kedua contoh diatas mungkin tidak asing lagi buatmu. Di materi ini, kami akan memperkenalkan bahwa function ternyata juga bisa disimpan ke dalam variabel dengan cara yang sama.

Contoh function disimpan ke dalaman variabel.

const ucapkanSalam = function (nama) {
  return "Halo, " + nama;
};

Function tersebut bisa dijalankan dengan memanggil nama variabelnya diikuti dengan parameter.

console.log(ucapkanSalam("Budi"));

// Output:
// Halo, Budi

Jadi, sederhananya, function bisa diperlakukan seperti nilai biasa, disimpan di variabel dan dipanggil kapan pun saat dibutuhkan.

Function Bisa Dikirim ke Function Lain

Yang menarik dari pembelajaran ini adalah, function yang tersimpan di variabel bisa dikirim ke function lain sebagai argument. Perhatikan contoh berikut:

Contoh sebelumnya ;

const ucapkanSalam = function (nama) {
  return "Halo, " + nama;
};

Selanjutnya tambahkan script berikut.

function proses(nama, fungsi) {
  return fungsi(nama);
}

const hasil = proses("Budi", ucapkanSalam);

console.log(hasil);

// Output:
// Halo, Budi

Keterangan:
Function proses punya dua parameter:

• nama : data yang mau diproses
• fungsi : function yang mau digunakan

Saat kita menulis proses(“Budi”, ucapkanSalam) , artinya:

nama   = "Budi"
fungsi = ucapkanSalam

Sehingga baris return fungsi(nama) sebenarnya sama dengan:

return ucapkanSalam("Budi");

Itulah kenapa hasilnya tetap “Halo, Budi”.

Satu Function untuk Banyak Keperluan

Sekarang kita buat function lain dengan pola serupa:

const ucapkanSelamatTinggal = function (nama) {
  return "Selamat tinggal, " + nama;
};

Function ini juga bisa langsung dimasukkan ke proses, tanpa mengubah kode proses sedikit pun:

const hasil1 = proses("Budi", ucapkanSalam);
const hasil2 = proses("Budi", ucapkanSelamatTinggal);

console.log(hasil1); // Halo, Budi
console.log(hasil2); // Selamat tinggal, Budi

Di sinilah letak manfaatnya. Function proses tidak tahu, dan tidak perlu tahu, function apa yang akan diberikan kepadanya. Ia hanya menjalankan apa pun function yang dikirim lewat parameter fungsi. Karena itu, satu proses bisa dipakai untuk banyak keperluan berbeda, cukup dengan mengganti function yang dikirim.

Contoh screenshot saat code program dijalankan

Nama Parameter Bebas, yang Penting Isinya

Jangan terpaku pada nama fungsi sebagai parameter. Nama itu hanyalah label, bisa diganti apa saja:

function proses(nama, x) {
  return x(nama);
}

// atau

function proses(nama, pekerjaan) {
  return pekerjaan(nama);
}

Kedua penulisan di atas adalah sama, sehingga hasilnya pun juga sama. Yang menentukan hasilnya bukan nama parameternya, melainkan nilai yang dikirim saat function dipanggil. Ketika kita menulis proses(“Budi”, ucapkanSalam) , parameter tersebut akan berisi nama = “Budi” dan fungsi/x/pekerjaan = ucapkanSalam, apa pun nama yang dipakai.

Inilah yang Disebut Callback Function

Konsep yang baru saja kita bahas punya nama, yaitu callback function. Ringkasnya seperti ini.

Callback adalah ketika kita mengirim sebuah function sebagai argument ke function lain, kemudian function tersebut menjalankan function yang diterimanya.

Karena proses menerima function dari luar, ia bahkan bisa menjalankan function yang ditulis langsung di tempat, tanpa disimpan ke variabel terlebih dahulu. Contoh

proses("Budi", function (nama) {
  return nama.toUpperCase();
});

Hasil saat dijalankan dalam 1 code program lengkap ;

Kemampuan mengirim function sebagai argument inilah yang membuat JavaScript sangat fleksibel untuk membangun logika program yang dinamis, dan menjadi dasar dari konsep yang lebih luas bernama first-class function. Kamu tidak perlu menghafal istilah-istilah ini sekarang, cukup pahami intinya.

Penutup

Pada materi ini, kita telah memahami bahwa function dapat diperlakukan seperti sebuah nilai. Function dapat disimpan ke dalam variabel, kemudian dikirim sebagai argument ke function lainnya.

Konsep tersebut menjadi dasar dari first-class function di JavaScript dan memungkinkan penggunaan callback function dalam berbagai kebutuhan pemrograman.

Semoga materi ini membantu Anda memahami konsep function dengan lebih baik dan mendukung proses belajar JavaScript Anda. Sampai jumpa di materi berikutnya!

Quiz

Yuk, coba kuis belajar JavaScript dasar Part 9 tentang function bisa diperlakukan seperti sebuah nilai, berikut untuk menguji pemahaman kamu!

const ucapkanSalam = function (nama) {
  return "Halo, " + nama;
};

function proses(nama, fungsi) {
  return fungsi(nama);
}

const hasil = proses("Budi", ucapkanSalam);

proses("Budi", function (nama) {
  return nama.toUpperCase();
});