📘 Seri Belajar JavaScript Artikel ke-4 ⚡ Pemula

Fungsi JavaScript:
Cara Buat, Pakai, dan
Sederhanakan Kode Kamu

Capek nulis kode yang sama berulang-ulang? Fungsi adalah solusinya — dan ini adalah skill paling penting yang akan mengubah cara kamu menulis JavaScript selamanya.

⏱️

Estimasi Baca

10–12 Menit

🎯

Level

Pemula Absolut

📅

Diperbarui

2026

Bayangin kamu bekerja di restoran. Setiap kali ada tamu yang pesan nasi goreng spesial, kamu harus nulis ulang seluruh resepnya dari awal — mulai dari nyalain kompor, ambil wajan, sampai plating. Capek banget, kan? Nah, begitulah rasanya nulis kode JavaScript tanpa mengenal yang namanya fungsi (function) JavaScript.

Di artikel ke-4 Seri Belajar JavaScript from Zero to Zorro ini, kita akan bahas tuntas apa itu fungsi, kenapa ini jadi tulang punggung setiap program JavaScript, dan bagaimana cara memakainya — bahkan untuk kamu yang baru pertama kali belajar kode. Siap? Mari mulai!

🧠 Definisi Kunci

Fungsi (function) dalam JavaScript adalah blok kode yang bisa kamu beri nama, simpan, dan panggil kapan saja — tanpa harus menulisnya ulang dari awal. Satu kali tulis, bisa dipakai berkali-kali.

🍳 Kenapa Fungsi JavaScript Penting untuk Pemula?

Sebelum kamu kenal fungsi, mungkin kodemu terlihat seperti ini — panjang, berulang, dan melelahkan:

tanpa-fungsi.js

// Menyapa pengguna pertama
console.log("Halo, Budi! Selamat datang!");
console.log("Semoga hari kamu menyenangkan!");

// Menyapa pengguna kedua
console.log("Halo, Siti! Selamat datang!");
console.log("Semoga hari kamu menyenangkan!");

// Menyapa pengguna ketiga... dan seterusnya 😩

Dengan fungsi, semua itu bisa dipangkas jadi hanya beberapa baris saja. Kode lebih bersih, lebih mudah diperbaiki, dan jauh lebih profesional. Inilah alasan kenapa semua developer — dari pemula sampai senior — wajib menguasai fungsi JavaScript.

🔥

Fakta Menarik

Prinsip DRY (Don't Repeat Yourself) adalah salah satu prinsip paling fundamental dalam pemrograman. Fungsi adalah cara paling dasar untuk menerapkannya. Developer yang belum paham fungsi cenderung menghasilkan kode yang 3–5x lebih panjang dari seharusnya.

✍️ Cara Membuat Fungsi JavaScript — Step by Step

Ada beberapa cara menulis fungsi di JavaScript. Kita mulai dari yang paling dasar dulu, lalu nanti kita bahas variasi modernnya.

Function Declaration (Cara Klasik)

Ini adalah cara paling umum dan mudah dipahami. Pakai kata kunci function, lalu beri nama yang jelas.

function sapaPengguna(nama) {
  console.log("Halo, " + nama + "! Selamat datang!");
  console.log("Semoga hari kamu menyenangkan!");
}

// Panggil fungsi untuk berbagai nama
sapaPengguna("Budi");
sapaPengguna("Siti");
sapaPengguna("Adi");

Parameter dan Argumen

Parameter adalah "slot kosong" dalam definisi fungsi. Argumen adalah nilai nyata yang kamu masukkan saat memanggil fungsi. Analoginya: parameter = formulir kosong, argumen = data yang kamu isi.

function hitungLuas(panjang, lebar) {  // ← parameter
  return panjang * lebar;
}

let hasil = hitungLuas(10, 5);  // ← argumen: 10 dan 5
console.log("Luas: " + hasil);  // Output: Luas: 50

Kata Kunci `return`

Fungsi bisa sekedar "melakukan sesuatu" atau bisa juga "mengembalikan hasil". Pakai return kalau kamu butuh hasilnya untuk dipakai di tempat lain. Setelah return dieksekusi, fungsi langsung berhenti.

function tambah(a, b) {
  return a + b;  // ← hasilnya dikembalikan
}

let total = tambah(7, 3);
console.log(total);  // Output: 10

// Bisa langsung dipakai dalam ekspresi!
console.log(tambah(2, 8) * 3);  // Output: 30

💡

Tips Penamaan Fungsi

Beri nama fungsi dengan format kata kerja + kata benda — misalnya hitungHarga(), tampilkanPesan(), ambilData(). Nama yang deskriptif membuat kodemu bisa "dibaca seperti bahasa manusia".

⚡ Arrow Function: Cara Modern Menulis Fungsi JavaScript

Sejak ES6 (versi JavaScript modern), ada cara penulisan fungsi yang lebih singkat: Arrow Function. Sintaksnya pakai tanda => yang terlihat seperti panah. Ini bukan cara baru yang menggantikan cara lama — keduanya masih dipakai, tergantung kebutuhan.

arrow-function.js

// Cara biasa
function kuadrat(x) {
  return x * x;
}

// Arrow Function — lebih singkat!
const kuadrat = (x) => x * x;

// Kalau hanya 1 parameter, kurung boleh dihilangkan
const kuadrat = x => x * x;

// Dengan beberapa baris kode, tetap pakai kurung kurawal
const hitungDiskon = (harga, persen) => {
  let diskon = harga * (persen / 100);
  return harga - diskon;
};

console.log(hitungDiskon(200000, 20)); // Output: 160000

⚖️ Kapan Pakai Yang Mana?

Aspek	Function Declaration	Arrow Function
Keterbacaan	✅ Sangat jelas, mudah dibaca pemula	⚡ Ringkas, cocok untuk fungsi pendek
Panjang kode	Lebih panjang	✅ Jauh lebih singkat
Hoisting	✅ Bisa dipanggil sebelum didefinisikan	❌ Harus didefinisikan dulu
Konteks `this`	Punya konteks sendiri	✅ Mewarisi konteks parent (lebih aman)

⚡

Insight Penting

Kalau kamu melihat kode JavaScript modern di GitHub atau proyek nyata, Arrow Function lebih sering dipakai — terutama untuk fungsi yang dipakai sebagai argumen (callback). Biasakan membaca keduanya agar tidak bingung saat belajar lebih lanjut.

🧩 Fungsi di Dalam Fungsi dan Scope: Jangan Sampai Bingung!

Satu hal yang sering bikin pemula pusing adalah soal scope — atau "jangkauan" variabel. Variabel yang dibuat di dalam sebuah fungsi hanya bisa diakses dari dalam fungsi itu saja. Bayangkan ini seperti catatan yang kamu tulis di buku pribadi — hanya kamu yang bisa baca, bukan orang lain.

scope-contoh.js

let nama = "Global";  // ← bisa diakses dari mana saja

function contohScope() {
  let pesan = "Hanya ada di sini";  // ← hanya di dalam fungsi ini
  console.log(nama);   // ✅ Bisa: "Global"
  console.log(pesan);  // ✅ Bisa: "Hanya ada di sini"
}

contohScope();
console.log(pesan);  // ❌ Error! pesan tidak ada di sini

⚠️

Perhatian!

Jangan biasakan membuat semua variabel sebagai variabel global (di luar fungsi) hanya supaya mudah diakses. Ini kebiasaan buruk yang bisa menyebabkan bug susah dilacak. Simpan variabel sedekat mungkin dengan tempat ia dibutuhkan.

🚀 Praktik Nyata: Fungsi di Halaman Web

Oke, sekarang saatnya lihat bagaimana fungsi JavaScript pemula dipakai di konteks yang nyata — yaitu di halaman web yang kamu buat dengan HTML. Contoh berikut akan membuat tombol yang ketika diklik, menampilkan pesan personal.

contoh-web.html

<!-- HTML -->
<input type="text" id="inputNama" placeholder="Masukkan namamu...">
<button onclick="tampilkanSalam()">Sapa Aku!</button>
<p id="hasilSalam"></p>

<!-- JavaScript -->
<script>
  function tampilkanSalam() {
    let nama = document.getElementById("inputNama").value;
    
    if (nama === "") {
      document.getElementById("hasilSalam").textContent
        = "Ups! Kamu belum masukkan nama.";
    } else {
      document.getElementById("hasilSalam").textContent
        = "👋 Halo, " + nama + "! Kamu keren banget belajar JavaScript!";
    }
  }
</script>

Perhatikan: fungsi tampilkanSalam() dipanggil dari atribut onclick di HTML. Ini adalah cara paling dasar menghubungkan JavaScript dengan HTML — dan kamu baru saja membuat halaman web interaktif pertamamu menggunakan fungsi! 🎉

💡

Tips Belajar Cepat

Coba buka browser kamu → klik kanan → Inspect → tab Console. Di sana kamu bisa langsung mengetikkan dan menjalankan kode JavaScript — termasuk membuat dan memanggil fungsi — tanpa perlu membuat file apapun. Lab eksperimen gratis ada di setiap browser!

🎯

Kesimpulan: Fungsi adalah Superpower-mu

Setelah membaca artikel ini, kamu sudah tahu cara membuat dan menggunakan fungsi (function) JavaScript — dari deklarasi biasa, penggunaan parameter dan return, sampai cara modern dengan arrow function. Kamu juga sudah paham soal scope dan bagaimana fungsi dipakai di halaman web nyata.

Ingat: fungsi adalah pondasi dari hampir semua kode JavaScript yang akan kamu tulis ke depannya. Semakin kamu terbiasa "berpikir dalam fungsi", semakin bersih dan profesional kodenya. Sekarang, coba buat sendiri 3 fungsi sederhana hari ini — tidak perlu rumit, cukup yang berguna untuk kamu!

💬 Punya pertanyaan tentang fungsi JavaScript? Atau ada bagian yang masih membingungkan? Tulis di kolom komentar di bawah — kita diskusi bareng! Kalau artikel ini membantu, share ke teman yang juga lagi belajar JavaScript dan jangan lupa subscribe supaya tidak ketinggalan artikel berikutnya! 🚀

#JavaScript #FungsiJavaScript #BelajarKoding #Pemula #Tutorial #WebDevelopment

📚