Fungsi JavaScript: Cara Membuat dan Memanggil Function

Dalam dunia pemrograman, terutama ketika kamu mulai membangun aplikasi web, kamu akan sering mendengar istilah fungsi JavaScript atau function JavaScript. Fungsi adalah blok kode yang dapat digunakan kembali (reusable), dapat menerima input, memproses sesuatu, dan mengembalikan output tertentu. Dengan memahami dasar-dasar fungsi, kamu akan jauh lebih mudah mengelola kode yang panjang, kompleks, dan bertingkat.

Secara sederhana:

Fungsi adalah alat untuk menyimpan logika agar bisa digunakan berkali-kali.

Contoh paling mudah: jika kamu ingin menampilkan pesan “Hello World” sebanyak 10 kali, kamu tidak perlu menulis 10 baris kode. Cukup buat satu fungsi dan panggil berulang-ulang. Inilah alasan mengapa function adalah fondasi penting dalam JavaScript.

Dalam artikel ini, kamu akan mempelajari:

• Pengertian fungsi JavaScript
• Cara membuat fungsi JavaScript
• Cara memanggil fungsi JavaScript
• Jenis-jenis function
• Contoh lengkap untuk pemula

Baca juga: Tutorial Looping JavaScript: For, While, dan Do While

Kenapa Fungsi Sangat Penting dalam JavaScript?

Saat kamu membangun aplikasi web, kamu pasti sering membuat fitur yang berulang, seperti:

• Validasi formulir
• Perhitungan (kalkulator, total belanja, dsb.)
• Manipulasi DOM
• Animasi
• Memproses API
• Mengatur interaksi pengguna

Bayangkan jika seluruh logika ditulis tanpa fungsi, maka kode akan:

• Panjang sekali
• Sulit dirawat
• Mbingungkan
• Rawan kesalahan

Itulah mengapa pemahaman function bukan hanya “wajib”, tetapi menjadi pondasi kuat saat belajar JavaScript level pemula hingga mahir.

Secara konsep, fungsi itu seperti mesin mini dalam program: kamu masukkan input (parameter), fungsi memprosesnya, dan mengeluarkan output (return value).

Contoh sederhana:

function sapa() {
    console.log("Halo, selamat datang!");
}

sapa(); // Memanggil fungsiCode language: JavaScript (javascript)

Dalam contoh ini, fungsi sapa menampilkan pesan di console. Fungsi ini dapat dipanggil kapan saja tanpa menulis ulang kode.

Manfaat Function dalam Pemrograman

Mengapa fungsi begitu penting dalam JavaScript? Berikut beberapa manfaatnya:

1. Mengurangi pengulangan kode
   Daripada menulis kode yang sama berulang-ulang, kita cukup membuat fungsi dan memanggilnya kapan saja.

2. Membuat kode lebih terstruktur
   Fungsi memisahkan logika program menjadi blok-blok kecil sehingga lebih mudah dipahami.

3. Meningkatkan modularitas
   Kode yang modular mudah dipelihara, diuji, dan dikembangkan.

4. Memudahkan debugging
   Saat ada error, kita hanya perlu menelusuri fungsi tertentu, bukan seluruh program.

5. Mendukung konsep reusable code
   Fungsi dapat digunakan di proyek lain tanpa menulis ulang kode.

Cara Kerja Fungsi

Secara sederhana, fungsi JavaScript bekerja dengan tiga tahap:

1. Definisi fungsi
   Kamu menulis fungsi dengan nama dan logika di dalamnya.

2. Pemanggilan fungsi
   Fungsi baru akan berjalan jika dipanggil dengan menulis nama fungsi diikuti tanda kurung ().

3. Menghasilkan output (opsional)
   Fungsi bisa memberikan hasil dengan keyword return, atau hanya menjalankan aksi tertentu (misal console.log).

Ilustrasi sederhana:

function tambah(a, b) {
    return a + b;
}

let hasil = tambah(5, 7);
console.log(hasil); // 12Code language: JavaScript (javascript)

Struktur Dasar Sebuah Fungsi

Fungsi memiliki struktur umum seperti ini:

function namaFungsi(parameter1, parameter2, ...) {
    // blok kode yang dijalankan
    return nilai; // opsional
}Code language: JavaScript (javascript)

Keterangan:

• function → keyword untuk membuat fungsi
• namaFungsi → nama unik fungsi
• parameter1, parameter2 → input fungsi
• { ... } → blok kode fungsi
• return → mengembalikan nilai ke pemanggil fungsi

Perbedaan Function Declaration vs Function Expression

JavaScript memiliki dua cara utama membuat fungsi:

Function Declaration

• Fungsi didefinisikan dengan keyword function dan nama fungsi.
• Bisa dipanggil sebelum deklarasi karena hoisting.

sapa(); // Bisa dipanggil sebelum deklarasi

function sapa() {
    console.log("Halo dari function declaration!");
}Code language: JavaScript (javascript)

Function Expression

• Fungsi disimpan ke dalam variabel.
• Tidak bisa dipanggil sebelum dideklarasikan

const sapa = function() {
    console.log("Halo dari function expression!");
};

sapa(); // Harus dipanggil setelah deklarasiCode language: JavaScript (javascript)

Perbedaan utama:

Function Declaration	Function Expression
Bisa di-hoist	Tidak bisa di-hoist
Selalu punya nama	Bisa anonymous
Umum untuk fungsi global	Umum untuk modular code

Contoh Sederhana Fungsi Di JavaScript

Berikut contoh fungsi sederhana yang memproses input dan memberikan output:

function hitungLuasPersegi(panjang, lebar) {
    let luas = panjang * lebar;
    return luas;
}

let hasilLuas = hitungLuasPersegi(5, 3);
console.log("Luas persegi: " + hasilLuas);Code language: JavaScript (javascript)

Output:

Luas persegi: 15

Fungsi ini menunjukkan beberapa konsep penting:

• Parameter → panjang dan lebar
• Blok kode fungsi → perhitungan luas
• Return value → mengembalikan hasil ke variabel hasilLuas

Jenis-Jenis Function dalam JavaScript

Pada bagian ini, kita akan membahas secara lengkap berbagai jenis function JavaScript yang umum digunakan dalam pemrograman modern. Memahami setiap jenis function akan membuat kamu lebih fleksibel dalam menulis kode, lebih mudah mengatur struktur program, dan mampu memilih jenis fungsi yang paling tepat untuk kebutuhan tertentu.

Mari kita bahas satu per satu dengan penjelasan santai, mudah dipahami, dan tentunya disertai contoh kode.

1. Function Declaration

Function Declaration adalah cara paling dasar dan klasik dalam membuat fungsi JavaScript. Bentuk ini paling sering digunakan dalam materi dasar-dasar function JavaScript karena mudah dibaca dan dipahami.

Ciri-ciri Function Declaration

• Menggunakan keyword function dan wajib memiliki nama.
• Dapat dipanggil sebelum didefinisikan (karena hoisting).
• Cocok untuk fungsi global yang dipanggil berulang.

Contoh Function Declaration

function sapaPengguna() {
    console.log("Halo! Selamat datang di tutorial fungsi JavaScript.");
}

sapaPengguna();Code language: JavaScript (javascript)

Kenapa bisa dipanggil sebelum dideklarasikan?

Karena JavaScript melakukan hoisting, yaitu memindahkan deklarasi fungsi ke bagian atas saat proses reading code.

Contoh:

tampilkanPesan(); // tetap bisa berjalan

function tampilkanPesan() {
    console.log("Ini adalah pesan dari function declaration!");
}Code language: JavaScript (javascript)

2. Function Expression

Berbeda dengan function declaration, Function Expression adalah fungsi yang disimpan ke dalam variabel. Umumnya digunakan dalam kode modern dan modular.

Ciri-ciri Function Expression

• Fungsi bisa anonymous atau memakai nama.
• Tidak di-hoist seperti function declaration.
• Menjadi pilihan favorit dalam callback dan program modular.

Contoh Function Expression

const hitungKeliling = function(panjang, lebar) {
    return 2 * (panjang + lebar);
};

console.log(hitungKeliling(5, 3));Code language: JavaScript (javascript)

Jika mencoba memanggil fungsi sebelum deklarasi:

console.log(hitungKeliling()); // ErrorCode language: JavaScript (javascript)

Karena function expression bukan hoisted.

3. Anonymous Function

Anonymous Function atau fungsi tanpa nama biasanya digunakan sebagai callback atau dalam function expression. Anonymous function sangat umum dalam JavaScript modern terutama ketika kita hanya memerlukan fungsi sementara.

Kapan digunakan?

• Dalam event listener
• Callback function
• Function expression
• Array method seperti .map(), .filter()

Contoh Anonymous Function dalam event listener

document.addEventListener("click", function() {
    console.log("Dokumen diklik!");
});Code language: JavaScript (javascript)

Contoh Anonymous Function dalam setTimeout

setTimeout(function() {
    console.log("Ini muncul setelah 2 detik");
}, 2000);Code language: JavaScript (javascript)

Anonymous function membuat kode lebih ringkas, tetapi karena tidak memiliki nama, debugging bisa sedikit lebih sulit.

4. Arrow Function (ES6)

Arrow Function adalah cara modern yang diperkenalkan pada ES6 (ECMAScript 2015) untuk membuat fungsi yang lebih ringkas dan cepat ditulis. Arrow function sangat populer dalam JavaScript modern.

Ciri-ciri Arrow Function

• Penulisan lebih pendek.
• Tidak memiliki this, sehingga bersifat lexically bound.
• Cocok untuk callback, array operations, dan fungsi sederhana.
• Tidak cocok digunakan sebagai constructor.

Format Dasar Arrow Function

const namaFungsi = () => {
    // kode program
};Code language: JavaScript (javascript)

Contoh Arrow Function sederhana

const sapa = () => {
    console.log("Halo dari arrow function!");
};

sapa();Code language: JavaScript (javascript)

Arrow Function dengan parameter

const kali = (a, b) => {
    return a * b;
};Code language: JavaScript (javascript)

Implicit Return (Lebih Singkat!)

Jika hanya satu baris:

const kali = (a, b) => a * b;Code language: JavaScript (javascript)

Arrow Function dalam array method

const angka = [1, 2, 3, 4];

const hasil = angka.map(item => item * 2);
console.log(hasil);Code language: JavaScript (javascript)

5. Named Function

Named Function adalah function expression yang diberikan nama. Berbeda dengan anonymous function, fungsi jenis ini memiliki nama internal yang bisa digunakan untuk debugging atau rekursi.

Contoh Named Function Expression

const cekUmur = function validasiUmur(umur) {
    if (umur >= 18) {
        return "Dewasa";
    } else {
        return "Belum Dewasa";
    }
};

console.log(cekUmur(20));Code language: JavaScript (javascript)

Nama validasiUmur hanya dikenal di dalam fungsi itu sendiri.

Kegunaan:

• Debugging lebih mudah
• Membantu saat membuat fungsi rekursif

6. Immediately Invoked Function Expression (IIFE)

IIFE (dibaca: “iffy”) adalah fungsi yang langsung dipanggil/dijalankan setelah dibuat. Umumnya digunakan untuk membuat scope baru, mencegah konflik variabel dengan global scope, dan sering ditemukan dalam pola modul JavaScript sebelum era ES6 modules.

Format IIFE

(function() {
    console.log("Ini adalah IIFE!");
})();Code language: JavaScript (javascript)

IIFE dengan parameter

(function(nama) {
    console.log("Halo " + nama);
})("Aris");Code language: JavaScript (javascript)

Kenapa menggunakan IIFE?

• Menghindari konflik variabel global
• Membuat modul sederhana
• Menjalankan fungsi hanya satu kali saat program dimulai

Sebelum ES6, banyak library JavaScript (jQuery, misalnya) memakai pola IIFE untuk melindungi variabel internal.

Parameter, Argument, Return Value, Scope & Nested Function

Dalam pembelajaran fungsi JavaScript, salah satu hal yang paling penting dipahami adalah bagaimana function menerima data (parameter & argument), mengembalikan data (return), serta bagaimana JavaScript mengatur ruang lingkup variabel (scope). Pada bagian ini kita akan membahas semuanya secara lengkap, termasuk konsep lanjutan seperti lexical scope, nested function, dan closure.

Parameter dan Argument (Dinamis & Default)

Dalam JavaScript, ketika membuat function, kita bisa menentukan parameter, yaitu variabel yang menerima data dari luar. Sedangkan argument adalah nilai yang dikirim ketika function dipanggil.

Contoh sederhana:

function halo(nama) {
    console.log("Halo, " + nama);
}

halo("Aris");     // "Aris" adalah argumentCode language: JavaScript (javascript)

Parameter Dinamis

JavaScript tidak membatasi jumlah argument yang dikirim.

function jumlah(a, b) {
    console.log(a + b);
}

jumlah(3, 5, 10); // argument lebih banyak -> argument ke-3 diabaikan
jumlah(3);        // argument kurang -> b menjadi undefinedCode language: JavaScript (javascript)

Inilah alasan JavaScript disebut dinamis.

Parameter Default

Agar parameter tetap memiliki nilai, kita bisa memberi default value.

function sapa(nama = "Pengunjung") {
    console.log("Halo " + nama);
}

sapa();              // Halo Pengunjung
sapa("Aris");         // Halo ArisCode language: JavaScript (javascript)

Default parameter sangat membantu untuk menghindari nilai undefined.

Rest Parameter (...parameter)

Jika kamu ingin menangkap semua argument, gunakan rest parameter.

function total(...angka) {
    let hasil = 0;

    for (let n of angka) {
        hasil += n;
    }

    return hasil;
}

console.log(total(1, 2, 3, 4, 5)); // 15Code language: JavaScript (javascript)

Rest parameter menghasilkan sebuah array sehingga bisa di-looping dengan mudah.

Return Value yang Benar

Fungsi bisa mengembalikan nilai menggunakan return.

function kali(a, b) {
    return a * b;
}

let hasil = kali(3, 4);
console.log(hasil); // 12Code language: JavaScript (javascript)

Catatan penting tentang return:

Setelah return dieksekusi, function langsung berhenti.

Jika tidak memakai return, function mengembalikan undefined secara otomatis.

Contoh:

function coba() {
    return "Hello";
    console.log("Ini tidak akan tampil");
}

console.log(coba()); // HelloCode language: JavaScript (javascript)

Variable Scope (Global, Local, Block)

Scope adalah bagaimana JavaScript menentukan di mana variabel bisa diakses.

Global Scope

Variabel dibuat di luar function → bisa diakses di mana saja.

let pesan = "Selamat datang"; // global

function tampil() {
    console.log(pesan);
}

tampil(); // bisa mengaksesCode language: JavaScript (javascript)

Local Scope (Function Scope)

Variabel dibuat di dalam function → hanya bisa diakses di function itu.

function contoh() {
    let teks = "Local scope";
    console.log(teks);
}

contoh();
// console.log(teks); // error: teks is not definedCode language: JavaScript (javascript)

Block Scope

Variabel yang dideklarasikan dengan let atau const di dalam blok { } hanya berlaku di blok itu.

if (true) {
    let angka = 10;
    console.log(angka); // 10
}

// console.log(angka); // errorCode language: JavaScript (javascript)

Lexical Scope (Pondasi Closure)

Lexical scope berarti sebuah function dapat mengakses variabel dari parent-nya, sesuai posisi function saat didefinisikan, bukan saat dipanggil.

Contoh:

function luar() {
    let nama = "Aris";

    function dalam() {
        console.log(nama);
    }

    dalam();
}

luar(); // "Aris"Code language: JavaScript (javascript)

Kenapa disebut “lexical”?

Karena penentuan scope berdasarkan posisi function dalam kode, bukan lokasi saat menjalankan function.

Nested Function & Closure

Nested function berarti membuat function di dalam function.

function induk() {
    function anak() {
        console.log("Ini nested function");
    }

    anak();
}

induk();Code language: JavaScript (javascript)

Apa itu Closure?

Closure terjadi ketika function anak tetap mengingat variabel pada function induk, bahkan setelah induk selesai dieksekusi.

Contoh Closure yang Paling Mudah Dipahami

function buatCounter() {
    let hitung = 0;

    return function () {
        hitung++;
        return hitung;
    };
}

let counter = buatCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3Code language: JavaScript (javascript)

Kenapa bisa begitu?

Karena function yang dikembalikan tetap menyimpan context lexical scope dari buatCounter(), yaitu variabel hitung.

Closure sangat bermanfaat untuk:

• Menyimpan state tanpa global variable
• Membuat fungsi private
• Membuat helper functions yang efisien

Contoh Kasus Penggunaan Nyata Fungsi + Parameter + Scope + Closure

Berikut contoh mini-program kalkulator sederhana berbasis function modular:

function buatKalkulator(nama) {
    let total = 0; // closure variable

    function tambah(n) {
        total += n;
        console.log("Ditambah: " + n);
    }

    function kurang(n) {
        total -= n;
        console.log("Dikurangi: " + n);
    }

    function hasil() {
        console.log("Hasil akhir untuk " + nama + " adalah: " + total);
    }

    return {
        tambah,
        kurang,
        hasil
    };
}

const kalku = buatKalkulator("Aris");

kalku.tambah(10);   // Ditambah: 10
kalku.tambah(5);    // Ditambah: 5
kalku.kurang(3);    // Dikurangi: 3
kalku.hasil();      // Hasil akhir untuk Aris adalah: 12Code language: JavaScript (javascript)

Program di atas memperlihatkan:

• Closure (total disimpan secara privat)
• Nested function (tambah, kurang, hasil)
• Modulasi function untuk membuat fungsi yang rapi dan reusable
• Penggunaan parameter sebagai identitas pengguna

Penggunaan Fungsi dalam Program JavaScript

Pada bagian ini, kita akan membahas bagaimana fungsi JavaScript digunakan dalam program nyata. Kita akan mempelajari bagaimana fungsi dapat ditulis secara modular, digunakan berulang kali, dipakai sebagai callback function, serta bagaimana JavaScript memperlakukan function sebagai first-class citizen sehingga dapat ditempatkan di dalam array, object, bahkan sebagai event handler.

Bagian ini sangat penting karena inilah inti pemanfaatan fungsi JavaScript dalam program, bukan hanya teori.

1. Fungsi sebagai Reusable Code

Salah satu kekuatan utama function adalah sifatnya yang reusable—code dapat digunakan berulang tanpa menulis ulang logika yang sama.

Contoh sederhana:

function formatRupiah(angka) {
    return "Rp " + angka.toLocaleString("id-ID");
}

console.log(formatRupiah(20000));
console.log(formatRupiah(1500000));
console.log(formatRupiah(987654321));Code language: JavaScript (javascript)

Daripada menulis format berkali-kali di seluruh aplikasi, cukup gunakan satu function yang dapat dipanggil kapan saja.

Contoh Reusable Function untuk Validasi

function isEmailValid(email) {
    return email.includes("@") && email.includes(".");
}

console.log(isEmailValid("aris@mail.com")); // true
console.log(isEmailValid("aris"));          // falseCode language: JavaScript (javascript)

Dengan cara ini, function menjadi alat penting untuk membuat kode:

• lebih rapi
• lebih mudah dirawat
• tidak duplikatif
• lebih cepat dikembangkan

2. Callback Function

Callback function adalah fungsi yang dikirim sebagai argument ke function lain, kemudian dipanggil di dalam function tersebut.

Karena JavaScript memperlakukan function sebagai first-class object, sesuatu yang umum dilakukan.

Contoh Callback Sederhana:

function prosesData(data, callback) {
    console.log("Memproses data:", data);
    callback(); // memanggil function yang dikirim sebagai parameter
}

prosesData("User123", function() {
    console.log("Proses selesai!");
});Code language: JavaScript (javascript)

Callback dalam Loop

function forEachCustom(array, callback) {
    for (let item of array) {
        callback(item);
    }
}

forEachCustom([1, 2, 3], function(n) {
    console.log("Angka:", n);
});Code language: JavaScript (javascript)

Callback sangat umum digunakan dalam:

• event handling
• asynchronous programming (setTimeout, fetch, dsb)
• manipulasi array
• logika modular

3. Higher-Order Function (HOF)

Higher-order function adalah function yang:

menerima function lain sebagai parameter atau

mengembalikan function lain

Ini adalah konsep lanjutan tetapi sangat penting dalam JavaScript modern.

Contoh Higher-Order Function yang Menerima Function Lain

function hitung(a, b, operator) {
    return operator(a, b);
}

function tambah(x, y) {
    return x + y;
}

function kali(x, y) {
    return x * y;
}

console.log(hitung(5, 3, tambah)); // 8
console.log(hitung(5, 3, kali));   // 15Code language: JavaScript (javascript)

Di sini, hitung() menjadi fungsi generik yang bisa digunakan untuk berbagai operasi matematika.

Contoh HOF yang Mengembalikan Function (Closure)

function buatPesan(pembuka) {
    return function(nama) {
        return pembuka + ", " + nama + "!";
    };
}

const halo = buatPesan("Halo");
console.log(halo("Aris")); // Halo, Aris!Code language: JavaScript (javascript)

Higher-order function mendasari banyak fitur JavaScript seperti:

• .map()
• .filter()
• .reduce()
• middleware (Express.js)
• React hooks
• event pipeline

4. Function dalam Array

Karena function adalah objek, kamu bisa menyimpannya dalam array.

const operasi = [
    function(x) { return x + 2; },
    function(x) { return x * 3; },
    function(x) { return x - 1; }
];

let nilai = 10;

for (let fn of operasi) {
    nilai = fn(nilai);
}

console.log(nilai); // 10 +2 → 12 *3 → 36 -1 → 35Code language: JavaScript (javascript)

Ini sangat berguna untuk:

• pipeline data
• middleware
• manipulasi step-by-step
• dynamic logic

5. Function dalam Object (Method)

Menempatkan function dalam object adalah praktik dasar untuk membuat modularisasi kode.

const user = {
    nama: "Aris",
    
    sapa: function() {
        console.log("Halo, saya " + this.nama);
    }
};

user.sapa();Code language: JavaScript (javascript)

Ini disebut method, seperti pada OOP (Object-Oriented Programming).

6. Function sebagai Event Handler

Dalam DOM JavaScript, function sering digunakan sebagai event handler untuk tombol, input, atau elemen lainnya.

Contoh (jika di lingkungan browser):

document.getElementById("klik").addEventListener("click", function() {
    console.log("Tombol diklik!");
});Code language: JavaScript (javascript)

Atau menggunakan arrow function:

document.getElementById("klik").addEventListener("click", () => {
    console.log("Klik memakai arrow function");
});Code language: JavaScript (javascript)

Function dalam event sangat penting untuk:

• interaksi pengguna
• validasi form
• aplikasi web dinamis
• SPA (Single Page Application)

7. Contoh Program Lengkap: Event + Callback + HOF + Reusable Function

Berikut contoh sederhana simulasi sistem logging modular:

function waktu() {
    return new Date().toLocaleTimeString();
}

function buatLogger(prefix) {
    return function(pesan) {
        console.log("[" + waktu() + "] " + prefix + ": " + pesan);
    };
}

const info = buatLogger("INFO");
const error = buatLogger("ERROR");

function prosesData(data, callback) {
    info("Memulai proses data: " + data);

    setTimeout(() => {
        callback(data);
        info("Proses selesai");
    }, 1000);
}

prosesData("User123", function(d) {
    console.log("Data diproses:", d);
});Code language: JavaScript (javascript)

Kode tersebut menggunakan:

• reusable function
• higher-order function
• callback
• closure
• modular structure

Kesimpulan

Fungsi JavaScript adalah elemen penting dalam pemrograman modern, terutama untuk membuat kode yang rapi, efisien, dan mudah digunakan ulang. Setelah mempelajari berbagai konsep seperti function declaration, function expression, arrow function, parameter dan argument, return, scope, callback, hingga higher-order function, kamu kini telah memahami bagaimana function bekerja bukan hanya secara teori, tetapi juga penggunaannya dalam program nyata.

Kuncinya adalah memahami bahwa function adalah first-class citizen dalam JavaScript. Artinya function dapat:

• Disimpan ke variabel
• Dikirim sebagai parameter
• Dikembalikan sebagai nilai
• Dimasukkan ke array atau object
• Digunakan untuk event handler
• Dan membentuk pola yang lebih kompleks seperti closure

Dengan pemahaman ini, kamu bisa mulai menulis kode JavaScript yang modular, reusable, scalable, dan profesional.