Function di JavaScript

1Perbedaan var, let & const

Sebelum membuat function, kita perlu tahu cara membuat variabel. Ada tiga keyword: var, let, dan const — masing-masing punya aturan berbeda soal scope, deklarasi ulang, dan pengubahan nilai.

1. var — gaya lama (function scope)

var x = 1;
var x = 2; // boleh dideklarasi ulang
x = 3;     // boleh diubah

function contoh() {
  if (true) {
    var y = 10;
  }
  console.log(y); // -> 10  (var TIDAK mengenal block scope)
}

2. let — modern (block scope, bisa diubah)

let a = 1;
a = 2;        // boleh diubah
// let a = 3; // ERROR: tidak boleh dideklarasi ulang

if (true) {
  let b = 10;
}
// console.log(b); // ERROR: b hanya hidup di dalam block { }

3. const — nilai tetap (pengganti "final")

const PI = 3.14;
// PI = 3.15; // ERROR: const tidak boleh di-reassign

// Catatan penting: untuk array/object, ISINYA masih bisa diubah,
// yang dilarang hanya MENGGANTI seluruh referensinya.
const daftar = [1, 2];
daftar.push(3);       // boleh
console.log(daftar);  // -> [1, 2, 3]
// daftar = [9];      // ERROR: tidak boleh ganti seluruh array

2Apa itu Function?

Function (fungsi) adalah blok kode yang diberi nama dan dapat dijalankan berkali-kali. Bayangkan function seperti mesin: kita beri masukan (input), mesin memprosesnya, lalu mengeluarkan hasil (output).

Tujuan utamanya: menulis kode sekali, pakai berulang kali.

// Membuat function bernama "sapa"
function sapa() {
  console.log("Halo, selamat belajar JavaScript!");
}

// Memanggil (menjalankan) function
sapa();   // -> Halo, selamat belajar JavaScript!
sapa();   // -> bisa dipanggil lagi sesuka hati

3Kenapa Pakai Function?

• Menghindari pengulangan — tulis logika sekali, panggil di banyak tempat.
• Lebih mudah dibaca — kode dipecah jadi bagian-bagian kecil yang jelas.
• Mudah diperbaiki — kalau ada bug, cukup ubah di satu tempat.
• Bisa diuji — tiap function dapat dicek secara terpisah.

4Function Declaration

Cara paling umum membuat function. Pola dasarnya:

function namaFunction(parameter1, parameter2) {
  // badan function (kode yang dijalankan)
  return hasil;
}

Contoh function yang menjumlahkan dua angka:

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

console.log(tambah(3, 5)); // -> 8

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

// Ambil nilai dari kedua input, lalu tampilkan hasilnya
const a = 3;
const b = 5;
console.log(tambah(a, b)); // -> 8

5Parameter & Argument

Parameter adalah variabel yang ditulis saat membuat function. Argument adalah nilai nyata yang kita kirim saat memanggil function.

// "nama" adalah PARAMETER
function perkenalan(nama) {
  console.log("Nama saya " + nama);
}

perkenalan("Andi");  // "Andi" adalah ARGUMENT
perkenalan("Siti");  // "Siti" adalah ARGUMENT

Sebuah function boleh punya banyak parameter, dipisah dengan koma.

6Return Value (Nilai Kembalian)

Kata kunci return mengirim hasil keluar dari function sehingga bisa disimpan atau dipakai lagi. Setelah return dijalankan, function langsung berhenti.

function luasPersegi(sisi) {
  return sisi * sisi;
}

let hasil = luasPersegi(4);
console.log(hasil); // -> 16

7Default Parameter

Kita bisa memberi nilai bawaan untuk parameter, dipakai jika argument tidak dikirim.

function sapa(nama = "Teman") {
  return "Halo, " + nama + "!";
}

console.log(sapa("Budi")); // -> Halo, Budi!
console.log(sapa());        // -> Halo, Teman!

8Function Expression

Function juga bisa disimpan ke dalam variabel. Ini disebut function expression. Function tanpa nama seperti ini disebut anonymous function.

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

console.log(kali(4, 5)); // -> 20

9Arrow Function (ES6)

Cara modern menulis function yang lebih ringkas, memakai tanda =>. Sangat populer di JavaScript masa kini.

// Function biasa
const tambah1 = function (a, b) {
  return a + b;
};

// Arrow function (sama persis hasilnya)
const tambah2 = (a, b) => {
  return a + b;
};

// Jika isinya cuma 1 baris return, bisa lebih singkat:
const tambah3 = (a, b) => a + b;

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

console.log(tambah3(2, 3)); // -> 5
console.log(kuadrat(5));    // -> 25

10Scope Variabel

Scope menentukan di mana sebuah variabel bisa diakses. Variabel yang dibuat di dalam function tidak bisa diakses dari luar (local scope).

let pesan = "global"; // bisa diakses di mana saja

function contoh() {
  let rahasia = "lokal"; // hanya hidup di dalam function ini
  console.log(pesan);    // -> global (boleh)
  console.log(rahasia);  // -> lokal (boleh)
}

contoh();
console.log(rahasia); // ERROR: rahasia tidak dikenal di luar function

11Callback Function

Function bisa dikirim sebagai argument ke function lain. Function yang dikirim itu disebut callback. Banyak dipakai untuk event dan proses asinkron.

function prosesData(data, callback) {
  let hasil = data * 2;
  callback(hasil); // panggil function yang dikirim
}

prosesData(5, function (nilai) {
  console.log("Hasilnya: " + nilai); // -> Hasilnya: 10
});

// Contoh nyata: setTimeout menerima callback
setTimeout(() => {
  console.log("Muncul setelah 1 detik");
}, 1000);

12Rest Parameter

Dengan ... kita bisa menerima jumlah argument yang tidak terbatas, lalu memprosesnya sebagai array.

function jumlahkan(...angka) {
  let total = 0;
  for (let n of angka) {
    total += n;
  }
  return total;
}

console.log(jumlahkan(1, 2, 3));        // -> 6
console.log(jumlahkan(10, 20, 30, 40)); // -> 100

13Hoisting

Function declaration "diangkat" ke atas, sehingga bisa dipanggil sebelum baris pembuatannya. Tapi function expression & arrow function tidak demikian.

// BISA — function declaration di-hoisting
sapa();
function sapa() {
  console.log("Halo!");
}

// ERROR — expression belum terdefinisi saat dipanggil
sapaLagi();
const sapaLagi = function () {
  console.log("Hai!");
};