Function JavaScript Adalah: Pengertian, Cara Membuat, dan Contohnya

Function JavaScript adalah blok kode yang diberi nama supaya bisa dipanggil (dijalankan) berulang kali tanpa perlu menulis ulang logikanya. Bayangkan fungsi seperti sebuah mesin: kamu masukkan bahan (disebut parameter), mesin mengolahnya, lalu mengeluarkan hasil (lewat return). Setiap kali kamu butuh hasil yang sama, tinggal panggil nama fungsinya, tidak perlu membangun ulang mesinnya dari awal. Fungsi adalah salah satu konsep paling mendasar di programming, dan menguasainya adalah pintu masuk untuk menulis kode yang rapi dan tidak berulang-ulang.

Di panduan ini kamu akan belajar function JavaScript benar-benar dari dasar: apa itu fungsi dan kenapa penting, anatomi sebuah fungsi (nama, parameter, body, return), berbagai cara menuliskannya termasuk arrow function, perbedaan fungsi dan method, sampai kesalahan umum yang sering bikin pemula bingung. Semua dengan contoh kode berkomentar bahasa Indonesia yang bisa langsung kamu coba.

Apa Itu Function di JavaScript?

Function (fungsi) adalah sekumpulan instruksi yang dibungkus jadi satu unit dengan sebuah nama, sehingga bisa dijalankan kapan saja hanya dengan memanggil namanya. Tanpa fungsi, kamu harus menyalin-tempel kode yang sama berkali-kali setiap kali membutuhkannya, dan itu bikin kode panjang, susah dirawat, dan rawan salah.

Coba lihat masalahnya. Tanpa fungsi, menyapa tiga orang berarti menulis logika yang sama tiga kali:

console.log("Halo, Budi! Selamat datang.")
console.log("Halo, Sari! Selamat datang.")
console.log("Halo, Andi! Selamat datang.")

Dengan fungsi, kamu tulis logikanya sekali, lalu panggil berkali-kali dengan input berbeda:

function sapa(nama) {
  console.log(`Halo, ${nama}! Selamat datang.`)
}

sapa("Budi")   // Halo, Budi! Selamat datang.
sapa("Sari")   // Halo, Sari! Selamat datang.
sapa("Andi")   // Halo, Andi! Selamat datang.

Inilah inti kegunaan fungsi: menulis logika sekali, memakainya berkali-kali. Prinsip ini punya nama di dunia programming, DRY (Don’t Repeat Yourself), “jangan mengulang dirimu sendiri”. Kalau nanti kamu ingin mengubah format sapaan, kamu cukup mengeditnya di satu tempat.

Fungsi juga bagian dari fondasi bahasa JavaScript secara keseluruhan, hampir setiap baris kode nyata yang kamu tulis nanti hidup di dalam sebuah fungsi.

Anatomi Sebuah Function

Sebelum menulis fungsi sendiri, kamu perlu mengenali bagian-bagiannya. Sebuah fungsi standar terdiri dari empat komponen:

function hitungLuas(panjang, lebar) {
  return panjang * lebar
}

• function, kata kunci yang memberi tahu JavaScript “ini adalah sebuah fungsi”.
• hitungLuas, nama fungsi. Dipakai untuk memanggilnya nanti. Konvensinya memakai gaya camelCase dan diawali kata kerja (hitung, ambil, buat).
• (panjang, lebar), parameter, yaitu input yang diterima fungsi. Ditulis di dalam kurung, dipisah koma.
• return panjang * lebar, body (isi) fungsi berada di dalam kurung kurawal { }, dan return menentukan nilai yang dikembalikan sebagai hasil.

Untuk memakainya, kamu memanggil (call) fungsi itu dengan menuliskan namanya diikuti kurung berisi nilai yang sebenarnya:

let hasil = hitungLuas(5, 3)   // 15
console.log(hasil)             // 15

Coba Sendiri: Mesin Function Interaktif

Cara tercepat memahami alur “input → body → return” adalah dengan melihatnya bergerak. Di bawah ini ada tiga fungsi contoh, pilih salah satu, lalu geser nilai parameternya dan perhatikan bagaimana body dijalankan dan hasil return berubah:

function lipatDua(angka) {
  return angka * 2
}

Perhatikan polanya: nilai yang kamu geser masuk lewat parameter, diolah di body, lalu keluar sebagai nilai return. Setiap fungsi di JavaScript bekerja persis seperti mesin ini. Kamu bisa berlatih menulis fungsi secara bertahap di materi fungsi dasar di Hyper Sheets yang langsung bisa dikerjakan di browser tanpa setup.

Nilai Return: Output dari Fungsi

return adalah kata kunci yang menentukan nilai apa yang “dikembalikan” sebuah fungsi ke tempat ia dipanggil. Begitu JavaScript menemukan return, fungsi langsung berhenti dan mengirim nilai itu keluar, baris apa pun setelah return tidak akan dijalankan.

function cekUmur(umur) {
  if (umur >= 18) {
    return "Dewasa"
  }
  return "Anak-anak"
  console.log("Baris ini tidak pernah jalan")  // tak terjangkau
}

console.log(cekUmur(20))   // "Dewasa"
console.log(cekUmur(15))   // "Anak-anak"

Fungsi yang tidak punya return (atau return kosong) akan mengembalikan nilai spesial bernama undefined. Ini penting dibedakan: fungsi seperti sapa() tadi hanya melakukan sesuatu (mencetak ke layar), sedangkan fungsi seperti hitungLuas() menghasilkan nilai yang bisa kamu simpan dan pakai lagi.

Parameter Default dan Banyak Parameter

Sebuah fungsi bisa menerima berapa pun parameter, dan kamu bisa memberi nilai default yang otomatis dipakai kalau argumennya tidak dikirim:

function hitungTotal(harga, pajak = 0.11) {
  return harga + harga * pajak
}

console.log(hitungTotal(100000))        // 111000 (pakai pajak default 0.11)
console.log(hitungTotal(100000, 0.05))  // 105000 (pajak dikustom jadi 0.05)

Nilai default sangat berguna supaya fungsi tetap aman dipanggil meski pemanggil lupa mengisi sebuah argumen. Tanpa default, pajak akan jadi undefined dan perhitungannya kacau (menghasilkan NaN).

Perlu diingat juga bahwa urutan argumen penting. JavaScript mencocokkan argumen ke parameter berdasarkan posisinya, bukan namanya. Jadi hitungTotal(0.05, 100000) akan salah total karena 0.05 dianggap harga dan 100000 dianggap pajak.

Arrow Function: Cara Modern Menulis Fungsi

Sejak tahun 2015, JavaScript punya sintaks yang lebih ringkas untuk menulis fungsi bernama arrow function, ditandai dengan panah =>. Fungsinya sama, tapi tulisannya lebih pendek:

// Fungsi biasa (function declaration)
function kuadrat(x) {
  return x * x
}

// Arrow function, hasilnya identik
const kuadrat2 = (x) => {
  return x * x
}

// Arrow function ringkas, kalau isinya cuma satu ekspresi return,
// kurung kurawal dan kata "return" boleh dihilangkan
const kuadrat3 = (x) => x * x

console.log(kuadrat3(5))   // 25

Arrow function sangat sering dipakai di JavaScript modern, terutama sebagai argumen untuk fungsi lain (seperti map, filter, dan event listener). Contoh nyata yang akan sering kamu temui:

let angka = [1, 2, 3, 4]

// Arrow function dipakai di dalam .map()
let dikaliDua = angka.map((n) => n * 2)
console.log(dikaliDua)   // [2, 4, 6, 8]

Kalau kamu ingin mendalami perbedaan halus keduanya, ada pelajaran arrow functions di Hyper Sheets yang membahasnya tuntas dengan latihan.

Function Declaration vs Function Expression

Ada dua cara umum “menyimpan” sebuah fungsi, dan bedanya penting dipahami:

// 1. Function declaration, punya nama, bisa dipanggil sebelum dideklarasikan
sapa()   // ✅ tetap jalan berkat hoisting
function sapa() {
  console.log("Halo!")
}

// 2. Function expression, fungsi disimpan ke variabel
const sapa2 = function () {
  console.log("Halo lagi!")
}
sapa2()   // ✅ harus dipanggil SETELAH baris ini

Perbedaan utamanya adalah hoisting: function declaration “diangkat” ke atas oleh JavaScript sehingga bisa dipanggil di baris mana pun. Sementara function expression (termasuk arrow function yang disimpan ke const) hanya ada setelah barisnya dieksekusi. Untuk pemula, aturan aman: deklarasikan dulu, panggil kemudian.

Function vs Method: Apa Bedanya?

Ini pertanyaan yang sering muncul. Jawaban singkatnya: method adalah fungsi yang menempel pada sebuah object. Cara menuliskan dan memanggilnya sedikit berbeda:

// Function biasa, berdiri sendiri, dipanggil langsung
function sapa(nama) {
  return `Halo, ${nama}!`
}
sapa("Budi")

// Method, fungsi milik object, dipanggil lewat titik (.)
let user = {
  nama: "Budi",
  sapa() {
    return `Halo, ${this.nama}!`
  },
}
user.sapa()   // dipanggil lewat object-nya

Perbedaannya bukan pada cara kerja internalnya (keduanya tetap fungsi), melainkan pada kepemilikan dan cara memanggil. Fungsi berdiri sendiri, sementara method dimiliki object dan dipanggil dengan notasi titik seperti user.sapa(). Method bisa mengakses data object-nya lewat kata kunci this. Kamu sudah sering memakai method tanpa sadar, misalnya array.push(), string.toUpperCase(), dan console.log() semuanya adalah method.

Contoh Nyata: Menggabungkan Beberapa Fungsi

Kekuatan fungsi terlihat saat kamu memecah masalah besar jadi fungsi-fungsi kecil yang saling memanggil. Ini contoh menghitung total belanja dengan diskon:

// Fungsi kecil 1: hitung subtotal
function hitungSubtotal(harga, jumlah) {
  return harga * jumlah
}

// Fungsi kecil 2: hitung diskon
function hitungDiskon(subtotal, persen) {
  return subtotal * (persen / 100)
}

// Fungsi utama: menggabungkan keduanya
function hitungTagihan(harga, jumlah, persenDiskon) {
  const subtotal = hitungSubtotal(harga, jumlah)
  const diskon = hitungDiskon(subtotal, persenDiskon)
  return subtotal - diskon
}

console.log(hitungTagihan(50000, 3, 10))   // 135000

Perhatikan bagaimana hitungTagihan memanggil dua fungsi lain di dalamnya. Setiap fungsi punya satu tugas jelas, ini disebut prinsip single responsibility, dan membuat kodemu jauh lebih mudah dibaca, diuji, dan diperbaiki. Kalau rumus diskon berubah, kamu cukup mengedit hitungDiskon tanpa menyentuh yang lain.

Kesalahan Umum Pemula dengan Function

Beberapa jebakan yang paling sering menjerat pemula saat mulai memakai fungsi:

1. Lupa menuliskan return. Kalau fungsi seharusnya menghasilkan nilai tapi kamu lupa return, hasilnya undefined. Contoh: function tambah(a, b) { a + b } menghitung tapi tidak mengembalikan apa-apa, seharusnya return a + b.

2. Lupa memanggil fungsi dengan (). Menulis sapa (tanpa kurung) hanya menyebut fungsinya, tidak menjalankannya. Untuk menjalankan, wajib pakai kurung: sapa().

3. Menaruh kode setelah return. Baris apa pun setelah return di jalur yang sama tidak akan pernah dieksekusi, karena return langsung menghentikan fungsi.

4. Salah urutan argumen. JavaScript mencocokkan argumen berdasarkan posisi, bukan nama. Memanggil hitungTagihan(3, 50000, 10) (jumlah dan harga tertukar) tidak error, tapi hasilnya salah.

5. Mengira console.log sama dengan return. Seperti dibahas di atas, console.log menampilkan, return memberikan nilai. Keduanya beda tujuan.

FAQ Seputar Function JavaScript

Apa itu function dalam JavaScript dengan bahasa sederhana?

Function adalah sekumpulan kode yang diberi nama supaya bisa dipakai berkali-kali. Bayangkan seperti resep masakan: kamu tulis langkah-langkahnya sekali, lalu tinggal “masak” kapan pun dibutuhkan dengan bahan (parameter) yang berbeda. Ini menghemat waktu dan membuat kode tidak berulang-ulang.

Apa perbedaan parameter dan argumen?

Parameter adalah nama variabel yang ditulis di definisi fungsi, seperti wadah kosong yang menunggu diisi. Argumen adalah nilai nyata yang kamu masukkan saat memanggil fungsi. Contoh: pada function sapa(nama), kata nama adalah parameter; saat kamu memanggil sapa("Budi"), maka "Budi" adalah argumen.

Apa itu return pada function?

return adalah kata kunci yang menentukan nilai hasil yang dikembalikan sebuah fungsi ke tempat ia dipanggil. Begitu return dijalankan, fungsi langsung berhenti. Tanpa return, fungsi mengembalikan undefined. return berbeda dari console.log, yang satu memberi nilai yang bisa dipakai, yang satu hanya menampilkan teks.

Apa bedanya function biasa dan arrow function?

Keduanya sama-sama fungsi dan sering menghasilkan output yang identik. Arrow function (=>) lebih ringkas dan populer untuk fungsi pendek, sedangkan function declaration biasa punya sifat hoisting dan sering lebih jelas untuk fungsi utama. Perbedaan teknis pentingnya ada pada perlakuan kata kunci this, yang jadi relevan saat belajar React.

Apa perbedaan function dan method?

Method pada dasarnya adalah fungsi yang menempel pada sebuah object dan dipanggil lewat notasi titik, misalnya user.sapa() atau array.push(). Fungsi biasa berdiri sendiri dan dipanggil langsung seperti sapa(). Method bisa mengakses data object-nya lewat this, sedangkan fungsi biasa tidak terikat object mana pun.

Kenapa fungsi saya mengembalikan undefined?

Penyebab paling umum adalah lupa menuliskan return di dalam fungsi, atau di dalam fungsi hanya ada console.log tanpa return. Fungsi yang tidak secara eksplisit mengembalikan nilai akan otomatis mengembalikan undefined. Pastikan ada baris return yang mengembalikan nilai yang kamu inginkan.

Setelah Menguasai Function, Belajar Apa?

Fungsi adalah fondasi, dan hampir semua konsep JavaScript berikutnya dibangun di atasnya:

1. Array dan method-nya, map, filter, dan reduce semuanya menerima fungsi sebagai argumen. Ini contoh sempurna kenapa fungsi begitu penting.
2. Event dan DOM, saat membuat halaman interaktif, kamu memberi fungsi ke sebuah event (misalnya “jalankan fungsi ini saat tombol diklik”).
3. Higher-order functions, konsep fungsi yang menerima atau mengembalikan fungsi lain. Pelajari lebih lanjut di materi higher-order functions.
4. React, di React, setiap komponen pada dasarnya adalah sebuah fungsi. Kalau fondasi fungsimu kuat, belajar React dari nol akan terasa jauh lebih mulus.

Kuasai fungsi dengan benar, dan kamu sudah memegang salah satu kunci terpenting dalam programming. Tulis banyak fungsi kecil, beri nama yang jelas, dan biasakan memecah masalah besar jadi bagian-bagian kecil yang bisa dipanggil ulang. Untuk memantapkan pemahaman sambil praktik langsung, kerjakan latihan fungsi interaktif di Hyper Sheets yang membangun konsep ini langkah demi langkah.