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

Related Posts