BAB 8 — Function dalam JavaScript: Membangun Logika yang Terstruktur & Reusable

BAB 8 — Function dalam JavaScript: Membangun Logika yang Terstruktur & Reusable

Fungsi (function) adalah “blok bangunan” logika dalam JavaScript. Hampir semua kode JavaScript modern menggunakan fungsi, baik fungsi kecil (helper), besar (modul), maupun fungsi tak terlihat seperti callback dan event handler.

Fungsi membuat kode lebih rapi, mudah dirawat, dan reusable.

Pada bab ini, kita membahas seluruh elemen penting fungsi dalam JavaScript, dari dasar hingga konsep modern ES6.


1. Function Declaration vs Function Expression

JavaScript menyediakan dua cara utama untuk membuat fungsi.


A. Function Declaration

Ditulis menggunakan kata kunci function dan di-hoist sehingga bisa dipanggil sebelum dideklarasikan.

Contoh:

function greet() {
  console.log("Hello");
}

greet();

Ciri utama:

  • Hoisting → bisa dipanggil sebelum definisi
  • Nama fungsi wajib ada

B. Function Expression

Fungsi disimpan dalam variabel. Tidak di-hoist secara penuh.

Contoh:

const greet = function() {
  console.log("Hello");
};

greet();

Ciri utama:

  • Tidak bisa dipanggil sebelum dideklarasikan
  • Bisa anonim (tanpa nama)
  • Lebih umum digunakan dalam JavaScript modern

Perbedaan penting:

Aspek
Declaration
Expression
Hoisting
bisa
tidak bisa
Nama
wajib
bisa anonim
Penulisan
lebih klasik
lebih fleksibel

2. Parameter & Argument

Parameter

Variabel yang dideklarasikan dalam fungsi.

Argument

Nilai yang dikirim saat fungsi dipanggil.

Contoh:

function tambah(a, b) { // a dan b = parameter
  return a + b;
}

tambah(5, 3); // 5 dan 3 = argument

3. Default Parameter

Default parameter memungkinkan nilai otomatis jika argument tidak diberikan.

Contoh:

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

greet();        // Hello, Guest
greet("Andi");  // Hello, Andi

4. Arrow Function (ES6)

Arrow function diperkenalkan di ES6 dan menjadi cara modern mendefinisikan fungsi.

Sintaks dasar:

const kali = (a, b) => {
  return a * b;
};

Jika hanya satu baris dan return langsung:

const kali = (a, b) => a * b;

Jika hanya satu parameter:

const hello = name => console.log(name);

Kelebihan Arrow Function:

  • lebih ringkas
  • tidak memiliki this sendiri
  • cocok untuk callback & array method

Kekurangan:

  • tidak bisa digunakan sebagai constructor
  • tidak memiliki arguments

5. Callback Function

Callback adalah fungsi yang dikirim sebagai argument ke fungsi lain.

Contoh sederhana:

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

function processUser(callback) {
  callback("Budi");
}

processUser(sayHello);

Callback banyak digunakan pada:

  • event listener
  • setTimeout
  • array method (map, filter, reduce)
  • asynchronous programming

Contoh pada array:

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

console.log(doubled);

6. Pure vs Impure Function

A. Pure Function

  • output hanya bergantung pada input
  • tidak mengubah data di luar dirinya (no side effect)

Contoh:

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

B. Impure Function

  • output bisa sama atau berbeda walau input sama
  • mengubah variabel di luar fungsi

Contoh:

let counter = 0;

function increment() {
  counter++;
}

Pure function lebih mudah diuji dan aman untuk programming fungsional.


7. Return Value

Fungsi bisa mengembalikan nilai menggunakan return.

Contoh:

function square(x) {
  return x * x;
}

let result = square(4);  
console.log(result); // 16

Catatan penting:

  • return langsung menghentikan fungsi
  • jika tidak ada return, nilai default adalah undefined

8. Function Scope

Setiap fungsi memiliki scope sendiri.

Variabel di dalam fungsi hanya bisa diakses dari dalam fungsi.

function test() {
  let x = 10;
}

// console.log(x); // Error: x is not defined

Fungsi bisa mengakses variabel luar (closure).

let a = 5;

function show() {
  console.log(a); // bisa akses
}

Bonus: Kapan Menggunakan Jenis Fungsi Tertentu?

Jenis Fungsi
Kapan Menggunakannya
Function Declaration
butuh hoisting
Function Expression
fleksibel, disimpan sebagai variabel
Arrow Function
callback, fungsi singkat
Pure Function
logika hitung, transformasi data
Impure Function
interaksi DOM, I/O, perubahan global