Fungsi adalah salah satu konsep paling fundamental dalam JavaScript yang memungkinkan kita untuk mengorganisir dan menggunakan kembali blok kode. Dengan fungsi, kita dapat membungkus serangkaian instruksi menjadi satu unit yang bisa dipanggil kapan saja dan berulang kali.
Sering kali ketika kita membuat program menggunakan javascript khususnya, ada beberapa hal yang mungkin akan dilakukan berkali kali. Contohnya kita perlu menampilkan nama ucapan terima kasih kepada customer disertai dengan namanya ketika selesai memesan kopi.
console.log("Terima kasih Kak Sandy, Pesanan kamu sedang dibuatkan, mohon menunggu.");
console.log("Terima kasih Kak Budi, Pesanan kamu sedang dibuatkan, mohon menunggu.");
console.log("Terima kasih Kak Dewi, Pesanan kamu sedang dibuatkan, mohon menunggu.");
Jika kita menuliskan kalimat di atas berulang kali di dalam program kita tentu akan merepotkan dan sangat melelahkan bukan? Bayangkan jika kita punya 100 customer yang berbeda!
Hal-hal yang sifatnya dilakukan berulang-ulang (repetitif) seperti di atas bisa di handle dengan menggunakan fungsi. Dengan menggunakan fungsi, kode yang kita buat menjadi reusable, artinya kita dapat menggunakannya berulang kali tanpa harus melakukan penulisan berkali-kali.
Sebenarnya pada materi-materi sebelumnya kita sudah menggunakan beberapa fungsi yang disediakan oleh javascript yang ada pada object dan array, kali ini kita akan coba membuat fungsi kita sendiri.
1. Deklarasi Fungsi
Ada beberapa cara untuk mendeklarasikan fungsi di JavaScript. Cara paling umum adalah dengan menggunakan kata kunci function:
function sayThanks(nama) {
console.log("Terima kasih Kak " + nama + ", Pesanan kamu sedang dibuatkan, mohon menunggu.");
}
Pada contoh di atas, kita membuat fungsi bernama sayThanks yang menerima sebuah parameter bernama nama. Parameter ini akan digunakan di dalam fungsi untuk menyesuaikan pesan yang ditampilkan.
Untuk memanggil fungsi tersebut, kita cukup menuliskan nama fungsi diikuti dengan tanda kurung dan nilai yang ingin kita masukkan sebagai parameter:
sayThanks("Sandy");
// Output: Terima kasih Kak Sandy, Pesanan kamu sedang dibuatkan, mohon menunggu.
sayThanks("Budi");
// Output: Terima kasih Kak Budi, Pesanan kamu sedang dibuatkan, mohon menunggu.
sayThanks("Dewi");
// Output: Terima kasih Kak Dewi, Pesanan kamu sedang dibuatkan, mohon menunggu.
Lihat betapa efisiennya kode kita sekarang? Hanya dengan satu baris kode, kita bisa menghasilkan pesan yang berbeda sesuai dengan nama yang kita berikan.
2. Fungsi dengan Return Value
Terkadang kita tidak hanya ingin fungsi melakukan sesuatu, tetapi juga mengembalikan nilai yang bisa kita gunakan. Untuk itu, kita menggunakan kata kunci return:
function hitungTotal(harga, jumlah) {
return harga * jumlah;
}
const totalHarga = hitungTotal(15000, 2);
console.log("Total belanja: Rp " + totalHarga);
// Output: Total belanja: Rp 30000
Fungsi hitungTotal di atas menerima dua parameter: harga dan jumlah. Fungsi ini kemudian mengembalikan hasil perkalian dari kedua nilai tersebut. Nilai yang dikembalikan bisa kita simpan dalam variabel dan digunakan sesuai kebutuhan.
3. Function Expression
Selain deklarasi fungsi seperti di atas, kita juga bisa membuat fungsi menggunakan function expression:
const greeting = function(waktu, nama) {
if (waktu < 12) {
return "Selamat pagi, " + nama + "!";
} else if (waktu < 18) {
return "Selamat siang, " + nama + "!";
} else {
return "Selamat malam, " + nama + "!";
}
};
console.log(greeting(10, "Andi"));
// Output: Selamat pagi, Andi!
console.log(greeting(15, "Budi"));
// Output: Selamat siang, Budi!
console.log(greeting(20, "Citra"));
// Output: Selamat malam, Citra!
Pada contoh di atas, kita membuat fungsi tanpa nama (anonymous function) dan menyimpannya dalam variabel greeting. Cara ini sangat berguna terutama ketika kita ingin meneruskan fungsi sebagai parameter ke fungsi lain.
4. Arrow Function
ES6 (ECMAScript 2015) memperkenalkan cara baru untuk menulis fungsi yang lebih singkat dan lebih elegan, yaitu arrow function:
const multiply = (a, b) => a * b;
console.log(multiply(5, 3));
// Output: 15
Arrow function sangat cocok untuk fungsi sederhana yang hanya terdiri dari satu baris kode. Untuk fungsi yang lebih kompleks, kita bisa menggunakan tanda kurung kurawal:
const checkAge = (age) => {
if (age >= 18) {
return "Anda sudah dewasa";
} else {
return "Anda masih di bawah umur";
}
};
console.log(checkAge(20));
// Output: Anda sudah dewasa
console.log(checkAge(15));
// Output: Anda masih di bawah umur
5. Default Parameter
ES6 juga memperkenalkan fitur default parameter, yang memungkinkan kita menetapkan nilai default untuk parameter jika tidak ada nilai yang diberikan saat fungsi dipanggil:
function sapaPelanggan(nama = "Pelanggan", produk = "kopi") {
console.log(`Halo ${nama}, terima kasih telah membeli ${produk} dari kami!`);
}
sapaPelanggan("Dodi", "teh");
// Output: Halo Dodi, terima kasih telah membeli teh dari kami!
sapaPelanggan("Eka");
// Output: Halo Eka, terima kasih telah membeli kopi dari kami!
sapaPelanggan();
// Output: Halo Pelanggan, terima kasih telah membeli kopi dari kami!
6. Rest Parameter
Rest parameter memungkinkan kita untuk menerima sejumlah argumen yang tidak ditentukan dalam sebuah array:
function jumlahkan(...angka) {
let total = 0;
for (let i = 0; i < angka.length; i++) {
total += angka[i];
}
return total;
}
console.log(jumlahkan(1, 2, 3));
// Output: 6
console.log(jumlahkan(5, 10, 15, 20));
// Output: 50
7. Scope dalam Fungsi
Penting untuk memahami konsep scope dalam JavaScript. Variabel yang dideklarasikan di dalam fungsi hanya dapat diakses di dalam fungsi tersebut (kecuali jika dideklarasikan dengan var yang memiliki perilaku berbeda):
function contohScope() {
const lokal = "Ini variabel lokal";
console.log(lokal); // Bisa diakses
}
contohScope();
console.log(lokal); // Error: lokal is not defined
Kesimpulan
Di dalam pembahasan kali ini kita telah mengetahui beberapa hal tentang fungsi di JavaScript:
- Fungsi memungkinkan kita untuk menggunakan kembali blok kode yang sama
- Ada berbagai cara untuk mendeklarasikan fungsi: deklarasi fungsi, function expression, dan arrow function
- Fungsi dapat menerima parameter dan mengembalikan nilai
- ES6 memperkenalkan fitur-fitur baru seperti default parameter dan rest parameter
- Variabel yang dideklarasikan di dalam fungsi memiliki scope terbatas pada fungsi tersebut
Fungsi adalah salah satu konsep yang sangat kuat dalam JavaScript. Dengan memahami cara membuat dan menggunakan fungsi dengan baik, kita dapat membuat kode yang lebih efisien, mudah dibaca, dan mudah dikelola.
Selanjutnya, kita akan mempelajari lebih jauh tentang konsep-konsep lanjutan dalam JavaScript. Terus belajar dan sampai jumpa di artikel lainnya... 😃