Setelah kamu paham struktur program dan kontrol alur, sekarang saatnya belajar tentang function—salah satu konsep paling powerful di JavaScript. Function itu seperti mesin mini dalam program kamu yang bisa digunakan berulang kali untuk melakukan tugas tertentu.
Apa itu Function?
Function adalah blok kode yang dikemas jadi satu unit dan bisa dipanggil kapan saja. Bayangkan function seperti resep masakan—sekali kamu tulis resepnya, kamu bisa menggunakannya berkali-kali tanpa perlu nulis ulang.
function sapaPengguna() {
console.log("Halo! Selamat datang di website kami!");
}
// Panggil function
sapaPengguna();
sapaPengguna();
Output:
Halo! Selamat datang di website kami!
Halo! Selamat datang di website kami!
Function di atas akan menampilkan pesan yang sama setiap kali dipanggil.
Membuat Function dengan Parameter
Parameter adalah input yang bisa kamu berikan ke function. Seperti mesin juicer yang butuh buah sebagai input.
function hitungLuas(panjang, lebar) {
let luas = panjang * lebar;
console.log("Luas persegi panjang: " + luas);
}
hitungLuas(5, 3);
hitungLuas(10, 2);
Output:
Luas persegi panjang: 15
Luas persegi panjang: 20
Kamu juga bisa membuat function dengan parameter yang punya nilai default:
function buatPesan(nama, umur = 20) {
console.log(`Nama: ${nama}, Umur: ${umur} tahun`);
}
buatPesan("Andi");
buatPesan("Budi", 25);
Output:
Nama: Andi, Umur: 20 tahun
Nama: Budi, Umur: 25 tahun
Return Value: Function yang Mengembalikan Nilai
Function tidak hanya bisa menampilkan sesuatu, tapi juga bisa mengembalikan nilai untuk digunakan di tempat lain.
function tambah(a, b) {
return a + b;
}
function kali(a, b) {
return a * b;
}
let hasil1 = tambah(5, 3);
let hasil2 = kali(4, 6);
console.log("Hasil penjumlahan: " + hasil1);
console.log("Hasil perkalian: " + hasil2);
Output:
Hasil penjumlahan: 8
Hasil perkalian: 24
Contoh function yang lebih praktis:
function hitungGrade(nilai) {
if (nilai >= 85) {
return "A";
} else if (nilai >= 70) {
return "B";
} else if (nilai >= 60) {
return "C";
} else {
return "D";
}
}
console.log("Grade kamu: " + hitungGrade(78));
console.log("Grade kamu: " + hitungGrade(92));
Output:
Grade kamu: B
Grade kamu: A
Function Expression dan Arrow Function
Selain cara biasa membuat function, ada cara lain yang lebih modern:
Function Expression
const hitungKeliling = function(panjang, lebar) {
return 2 * (panjang + lebar);
};
console.log("Keliling: " + hitungKeliling(8, 5));
Output:
Keliling: 26
Arrow Function
Arrow function adalah cara singkat menulis function expression:
// Arrow function sederhana
const kuadrat = (x) => {
return x * x;
};
// Arrow function yang lebih singkat
const kubik = x => x * x * x;
// Arrow function tanpa parameter
const sapaan = () => "Halo dunia!";
console.log("5 kuadrat = " + kuadrat(5));
console.log("3 kubik = " + kubik(3));
console.log(sapaan());
Output:
5 kuadrat = 25
3 kubik = 27
Halo dunia!
Local dan Global Scope
Scope adalah ruang lingkup di mana variable bisa diakses. Ada dua jenis: global dan local scope.
let namaGlobal = "Global Variable"; // Variable global
function cobaScope() {
let namaLokal = "Local Variable"; // Variable lokal
console.log("Dari dalam function:");
console.log("- " + namaGlobal); // Bisa akses global
console.log("- " + namaLokal); // Bisa akses lokal
}
cobaScope();
console.log("Dari luar function:");
console.log("- " + namaGlobal); // Bisa akses global
// console.log("- " + namaLokal); // Error! Tidak bisa akses lokal
Output:
Dari dalam function:
- Global Variable
- Local Variable
Dari luar function:
- Global Variable
Closure: Function yang “Mengingat”
Closure adalah fitur powerful di JavaScript di mana function bisa “mengingat” variable dari scope luarnya, bahkan setelah function luar selesai dijalankan.
function buatCounter() {
let hitungan = 0;
return function() {
hitungan++;
return hitungan;
};
}
let counter1 = buatCounter();
let counter2 = buatCounter();
console.log("Counter 1:");
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3
console.log("Counter 2:");
console.log(counter2()); // 1
console.log(counter2()); // 2
Output:
Counter 1:
1
2
3
Counter 2:
1
2
Setiap counter punya “memori” sendiri-sendiri!
Function sebagai Parameter
Function bisa dijadikan parameter untuk function lain. Ini disebut higher-order function.
function operasiMatematika(a, b, operasi) {
return operasi(a, b);
}
function tambah(x, y) {
return x + y;
}
function kali(x, y) {
return x * y;
}
let hasil1 = operasiMatematika(5, 3, tambah);
let hasil2 = operasiMatematika(5, 3, kali);
console.log("5 + 3 = " + hasil1);
console.log("5 × 3 = " + hasil2);
Output:
5 + 3 = 8
5 × 3 = 15
Recursive Function
Function bisa memanggil dirinya sendiri. Ini disebut recursion, berguna untuk masalah yang bisa dipecah jadi bagian-bagian kecil.
function faktorial(n) {
if (n <= 1) {
return 1;
} else {
return n * faktorial(n - 1);
}
}
console.log("5! = " + faktorial(5));
console.log("4! = " + faktorial(4));
Output:
5! = 120
4! = 24
Hati-hati dengan recursion, pastikan ada kondisi berhenti supaya tidak infinite loop!
Latihan Praktis
Mari buat beberapa function berguna:
1. Function Validasi Email
function validasiEmail(email) {
if (email.includes("@") && email.includes(".")) {
return true;
} else {
return false;
}
}
console.log("andi@gmail.com valid? " + validasiEmail("andi@gmail.com"));
console.log("email-salah valid? " + validasiEmail("email-salah"));
Output:
andi@gmail.com valid? true
email-salah valid? false
2. Function Format Rupiah
function formatRupiah(angka) {
return "Rp " + angka.toLocaleString("id-ID");
}
console.log(formatRupiah(150000));
console.log(formatRupiah(2500000));
Output:
Rp 150.000
Rp 2.500.000
3. Function Cek Bilangan Prima
function cekPrima(n) {
if (n <= 1) return false;
for (let i = 2; i < n; i++) {
if (n % i === 0) {
return false;
}
}
return true;
}
console.log("7 prima? " + cekPrima(7));
console.log("8 prima? " + cekPrima(8));
console.log("17 prima? " + cekPrima(17));
Output:
7 prima? true
8 prima? false
17 prima? true
Error Umum dan Solusinya
1. Lupa Return Statement
// Salah
function hitungDouble(x) {
x * 2; // Lupa return!
}
console.log(hitungDouble(5)); // undefined
Output:
undefined
// Benar
function hitungDouble(x) {
return x * 2;
}
console.log(hitungDouble(5)); // 10
Output:
10
2. Salah Scope Variable
function contohSalah() {
if (true) {
let temp = "Halo";
}
console.log(temp); // Error: temp tidak bisa diakses
}
// contohSalah(); // Uncomment untuk lihat error
Solusi: Deklarasikan variable di scope yang tepat.
Tips Menulis Function yang Baik
Gunakan nama yang deskriptif:
// Buruk function calc(a, b) { return a + b; } // Baik function hitungTotalHarga(harga, pajak) { return harga + pajak; }Satu function, satu tugas:
// Function fokus satu tugas function validasiInput(input) { return input.length > 0; } function tampilkanPesan(pesan) { console.log(pesan); }Gunakan parameter default untuk fleksibilitas:
function buatProfile(nama, umur = 18, kota = "Jakarta") { return `${nama}, ${umur} tahun, tinggal di ${kota}`; }
Penutup
Function adalah fondasi penting dalam programming. Dengan menguasai function, kamu bisa:
- Menulis kode yang bisa digunakan berulang kali
- Mengorganisir program jadi bagian-bagian kecil yang mudah dikelola
- Membuat program yang lebih fleksibel dan powerful
Di bab ini kamu sudah belajar:
- Cara membuat function dengan dan tanpa parameter
- Return value dan cara menggunakannya
- Function expression dan arrow function
- Scope dan closure
- Recursive function dan higher-order function
- Tips menulis function yang baik
Selanjutnya, kita akan belajar tentang array dan object—cara menyimpan dan mengorganisir data dalam JavaScript. Siap lanjut ke bab berikutnya?