Belajar Fungsi JavaScript: Deklarasi, Panggilan & Parameter Lengkap

Halo gaes! Apa kabar nih para calon developer kece di jagat per-JavaScript-an? Hari ini kita bakal spill tuntas salah satu inti kekuatan JavaScript yang bikin kode kita jadi lebih rapi, efisien, dan tentunya... reusable! Yup, bener banget, kita mau ngobrolin soal Fungsi dalam JavaScript.

Anggap aja fungsi itu kayak power bank buat kode kamu. Daripada nge-charge HP berkali-kali pake colokan beda, mending punya satu power bank yang bisa dipake berkali-kali kan? Nah, fungsi juga gitu, ngab. Daripada nulis kode yang sama berulang-ulang, mending bungkus jadi satu fungsi, terus tinggal panggil deh pas butuh!

Skuy, kita mulai bedah satu per satu!

Fungsi Itu Apaan Sih, Ngab?

Secara simpel, fungsi adalah blok kode JavaScript yang bisa kita definisikan sekali dan kemudian kita panggil (eksekusi) berulang kali sesuai kebutuhan. Fungsi ini bisa menerima masukan (disebut parameter) dan bisa juga mengembalikan nilai (disebut return value).

Vibes-nya kayak kamu punya resep masakan. Resep itu adalah fungsinya. Bahan-bahan yang kamu masukkin adalah parameternya. Dan masakan yang jadi itu adalah return valuenya. Gampang kan?

1. Deklarasi Fungsi: Cara Ngebangun Fungsi Kamu

Ada beberapa cara buat bikin fungsi di JavaScript, nih. Yuk, kita intip satu per satu.

a. Function Declaration (Cara Paling Klasik)

Ini adalah cara paling umum dan paling tradisional buat bikin fungsi. Mirip kayak kamu ngumumin sesuatu secara resmi.

function sapaDunia() {
  console.log("Halo gaes! Selamat datang di dunia JavaScript!");
}

// Keunggulan: Bisa dipanggil sebelum didefinisikan (hoisting)
sapaDunia(); 

Penjelasan:

• Kita pakai keyword function, diikuti nama fungsi (sapaDunia), kurung buka-tutup (), dan blok kode di dalam kurung kurawal {}.
• Salah satu keunikan Function Declaration adalah hoisting. Artinya, fungsi ini bisa kamu panggil sebelum kamu nulis deklarasinya di kode. JavaScript itu pinter, dia udah tau duluan ada fungsi ini.

b. Function Expression (Fungsi Sebagai Nilai)

Kalau yang ini, kita bikin fungsi dan langsung assign atau masukkan dia ke dalam sebuah variabel. Kayak kamu naro kue buatanmu ke dalam kotak kemasan.

const sapaNama = function(nama) {
  console.log(`Halo, ${nama}! Asik nih belajar JS bareng.`);
};

// Panggil fungsi melalui variabel
sapaNama("Budi"); // Output: Halo, Budi! Asik nih belajar JS bareng.

// Error: Tidak bisa dipanggil sebelum didefinisikan (no hoisting untuk variabel)
// sapaNamaLagi("Susi"); 
// const sapaNamaLagi = function(nama) { ... };

Penjelasan:

• Fungsi di sini adalah nilai yang disimpan dalam variabel sapaNama.
• Beda sama Function Declaration, Function Expression ini tidak di-hoist secara keseluruhan. Kamu cuma bisa panggil setelah variabelnya dideklarasikan dan diisi dengan fungsi.

c. Arrow Function (The New Kids on the Block - ES6)

Ini dia favorit anak muda zaman now! Arrow Function dikenalkan di ES6 (ECMAScript 2015) dan bikin sintaks fungsi jadi jauh lebih ringkas dan clean.

const sapaSalam = (salam) => {
  console.log(`Eh, ${salam} juga!`);
};

sapaSalam("Hai"); // Output: Eh, Hai juga!

// Kalau cuma ada satu parameter, kurung () bisa dihilangkan
const kuadrat = angka => {
  return angka * angka;
};
console.log(kuadrat(5)); // Output: 25

// Kalau cuma satu baris statement dan langsung return, bisa lebih singkat lagi
const tambahDua = angka => angka + 2;
console.log(tambahDua(8)); // Output: 10

Penjelasan:

• Ganti keyword function dengan tanda panah => setelah parameter.
• Super ringkas! Apalagi kalau parameternya cuma satu (kurung () boleh hilang) dan isinya cuma satu baris return (kurung kurawal {} dan keyword return boleh hilang).
• Arrow Function punya perilaku this yang beda dari fungsi biasa, tapi itu topik agak lanjut ya gaes. Buat sekarang, tahu kalau dia bikin kode lebih clean itu udah cukup banget.

2. Pemanggilan Fungsi: Jangan Cuma Dibikin Doang, Dipake Juga!

Setelah bikin fungsinya, tentu dong kita mau make fungsi itu! Cara manggilnya gampang banget, tinggal tulis nama fungsinya diikuti kurung buka-tutup ().

function ucapkanTerimaKasih() {
  console.log("Makasih banyak udah belajar bareng!");
}

// Panggil fungsi
ucapkanTerimaKasih(); // Output: Makasih banyak udah belajar bareng!

// Kalau fungsinya mengembalikan nilai, kita bisa simpan nilainya ke variabel
function hitungTotal(a, b) {
  return a + b; // Ini adalah nilai yang dikembalikan fungsi
}

let hasilPenjumlahan = hitungTotal(10, 20); // Panggil dan simpan hasilnya
console.log(hasilPenjumlahan); // Output: 30

Penting: Kalau fungsi punya return value, nilai itu bisa kamu tangkap dan gunakan. Kalau enggak ada return statement, fungsi akan mengembalikan undefined secara default.

3. Parameter Fungsi: Biar Fungsi Makin Smart & Fleksibel!

Fungsi tanpa parameter itu kayak robot yang cuma bisa ngelakuin satu hal doang. Dengan parameter, fungsi kamu jadi lebih fleksibel dan bisa beradaptasi sama masukan yang berbeda-beda.

a. Basic Parameters (Yang Paling Umum)

Ini parameter standar yang kita masukkin saat deklarasi fungsi.

function sapaOrang(nama, waktu) { // 'nama' dan 'waktu' adalah parameter
  console.log(`Halo ${nama}, selamat ${waktu}!`);
}

sapaOrang("Agus", "pagi");   // Output: Halo Agus, selamat pagi!
sapaOrang("Santi", "siang"); // Output: Halo Santi, selamat siang!

Penjelasan:

• nama dan waktu adalah parameter. Saat kita memanggil sapaOrang("Agus", "pagi"), "Agus" dan "pagi" disebut argumen. Argumen adalah nilai yang kita berikan untuk parameter saat fungsi dipanggil.

b. Default Parameters (ES6: Bikin Hidup Lebih Mudah)

Kadang kita pengen kalau ada parameter yang gak diisi, dia otomatis punya nilai default. Nah, ES6 punya fitur Default Parameters yang keren banget!

function greeting(nama = "Teman", pesan = "Semoga harimu menyenangkan!") {
  console.log(`Halo ${nama}! ${pesan}`);
}

greeting("Dina");         // Output: Halo Dina! Semoga harimu menyenangkan!
greeting();               // Output: Halo Teman! Semoga harimu menyenangkan!
greeting("Andi", "Selamat datang!"); // Output: Halo Andi! Selamat datang!

Penjelasan:

• Kita bisa langsung kasih nilai default di deklarasi parameter. Kalau argumennya gak dikasih, nilai default ini yang bakal dipake.

c. Rest Parameters (...args: Nangkap Sisa Parameter)

Ini juga fitur ES6 yang powerful banget, gaes! Kadang kita gak tau berapa banyak argumen yang bakal dimasukkin ke fungsi. Nah, Rest Parameters ini memungkinkan kita untuk merepresentasikan jumlah argumen yang tidak terbatas sebagai sebuah array.

function kumpulkanHobi(nama, ...hobi) { // '...hobi' adalah rest parameter
  console.log(`${nama} punya hobi: ${hobi.join(", ")}`);
}

kumpulkanHobi("Rina", "membaca", "menulis", "berenang"); 
// Output: Rina punya hobi: membaca, menulis, berenang

kumpulkanHobi("Joko", "main game");
// Output: Joko punya hobi: main game

kumpulkanHobi("Lina");
// Output: Lina punya hobi:

Penjelasan:

• Tanda ... di depan nama parameter (...hobi) artinya "tangkap semua sisa argumen yang masuk ke fungsi ini, dan jadikan mereka array dengan nama hobi."
• Rest Parameters harus selalu jadi parameter terakhir dalam daftar.

Tips Praktis Biar Coding Makin Jago!

1. Nama Fungsi yang Jelas: Kasih nama fungsi yang deskriptif dan mencerminkan apa yang dilakukan fungsi itu (misal: hitungTotal, sapaPengguna, bukan fungsiA atau doSomething).
2. Satu Fungsi, Satu Tugas: Usahakan setiap fungsi punya satu tujuan yang jelas. Ini bikin kode lebih mudah dibaca, diuji, dan diperbaiki.
3. Hindari Side Effects Berlebihan: Fungsi yang baik itu kalau dikasih input yang sama, outputnya selalu sama, dan gak mengubah apa-apa di luar dirinya (kalau bisa).
4. Manfaatkan Default & Rest Parameters: Fitur ES6 ini bikin fungsi kamu lebih fleksibel dan robust.
5. Praktik, Praktik, Praktik! Ini kunci utama. Makin sering kamu bikin dan pake fungsi, makin natural ngerasanya.

Kesimpulan: Fungsi Adalah Superpower Kamu!

Oke gaes, gimana? Udah mulai paham kan gimana fungsi itu jadi tulang punggung dalam setiap aplikasi JavaScript modern? Dari Function Declaration yang klasik, Function Expression yang fleksibel, sampai Arrow Function yang kekinian, semua punya tempat dan kegunaannya masing-masing. Ditambah lagi dengan parameter basic, default parameters, dan rest parameters yang bikin fungsi kamu makin canggih!

Jadi, jangan males ya buat latihan bikin fungsi-fungsi sendiri. Bayangin aja kamu lagi bikin peralatan super buat misi coding kamu. Makin banyak fungsi yang kamu kuasai, makin jago dan efisien kode kamu nanti.

Semangat terus ngodingnya, ya! Skuy bikin aplikasi keren bareng JavaScript! Kalau ada pertanyaan, jangan sungkan buat eksplorasi lebih lanjut atau cari referensi lainnya. Keep learning and keep growing!