Belajar JavaScript - Fungsi dan Scope Variabel

#Pendahuluan

Kode yang ditulis berjajar dari atas ke bawah akan cepat menjadi berantakan begitu program tumbuh. Fungsi adalah jawaban JavaScript untuk masalah ini: sebuah blok logika bernama yang bisa dipanggil kapan pun dibutuhkan, sehingga kalian tidak menulis ulang kode yang sama berkali-kali.

Episode 4 membahas dua hal yang saling berkaitan. Pertama, fungsi itu sendiri: cara mendeklarasikannya, cara mengirim data lewat parameter, dan cara menerima hasil lewat return. Kedua, scope: aturan ke mana saja sebuah variabel bisa diakses, yang menentukan apakah variabel itu aman dipakai di dalam atau di luar fungsi.

Scope dan fungsi adalah pasangan yang tidak bisa dipisahkan. Begitu kalian memahami keduanya, kode kalian akan lebih terstruktur dan lebih mudah dicari kesalahannya.

#Deklarasi Fungsi

#Function Declaration

Cara paling dasar mendefinisikan fungsi adalah dengan kata kunci function:

Function declaration

function sapa(nama) {
  return `Halo, ${nama}!`;
}
 
console.log(sapa("Arman"));

function sapa(nama) mendeklarasikan fungsi bernama sapa yang menerima satu parameter nama dan mengembalikan string. Memanggilnya dengan sapa("Arman") menghasilkan Halo, Arman!. Kata kunci return menentukan nilai yang dikembalikan; tanpa return, fungsi mengembalikan undefined.

#Fungsi sebagai Cetak Biru

Fungsi idealnya melakukan satu pekerjaan dengan jelas. Fungsi yang mencampur banyak tanggung jawab sulit diuji dan sulit dipakai ulang. Contoh sederhana yang benar:

Fungsi yang melakukan satu pekerjaan

function hitungLuasPersegi(sisi) {
  return sisi * sisi;
}
 
function hitungLuasSegitiga(alas, tinggi) {
  return (alas * tinggi) / 2;
}
 
console.log(hitungLuasPersegi(5));
console.log(hitungLuasSegitiga(6, 4));

hitungLuasPersegi(5) mengembalikan 25, dan hitungLuasSegitiga(6, 4) mengembalikan 12. Setiap fungsi punya satu tanggung jawab yang jelas, dan keduanya bisa dipanggil kapan saja. Ini pola yang akan kalian pertahankan di seluruh series.

#Parameter dan Return

#Parameter Lebih dari Satu

Fungsi bisa menerima banyak parameter, dan pemanggil bertanggung jawab mengirim nilainya dengan urutan yang sama:

Fungsi dengan beberapa parameter

function hitungDiskon(harga, persen) {
  return harga - (harga * persen) / 100;
}
 
console.log(hitungDiskon(200000, 25));

hitungDiskon(200000, 25) mengembalikan 150000 — harga 200000 dikurangi diskon 25 persen. Parameter berperilaku seperti variabel lokal di dalam fungsi: nilainya berasal dari pemanggil, dan perubahan di dalamnya tidak bocor keluar.

#return Menghentikan Eksekusi

Setiap pernyataan return langsung menghentikan eksekusi fungsi. Kode setelah return tidak pernah dijalankan:

return menghentikan eksekusi

function klasifikasiNilai(nilai) {
  if (nilai >= 75) {
    return "Lulus";
  }
  return "Belum lulus";
}
 
console.log(klasifikasiNilai(80));
console.log(klasifikasiNilai(60));

return "Lulus" mengembalikan hasil dan mengakhiri fungsi; baris berikutnya hanya berjalan jika kondisi pertama salah. Pola early return seperti ini membuat fungsi lebih mudah dibaca daripada deretan else.

#Scope Variabel

#Global, Function, dan Block

Scope menentukan di mana sebuah variabel bisa diakses. JavaScript punya tiga tingkatan utama:

• Global scope: variabel di luar fungsi mana pun, bisa diakses di mana saja.
• Function scope: variabel yang dideklarasikan di dalam fungsi, hanya bisa diakses di dalam fungsi itu.
• Block scope: variabel let dan const di dalam {}, hanya berlaku di dalam blok tersebut.

Scope global vs block

const global = "bisa diakses di mana saja";
 
if (true) {
  const lokal = "hanya di dalam blok";
  console.log(global);
  console.log(lokal);
}
 
console.log(global);

const lokal dideklarasikan di dalam blok if dan tidak bisa diakses di luar blok itu — mencobanya akan memicu ReferenceError. Ini yang membedakan let dan const dari var yang tidak menghormati block scope.

#Variabel Function-Scope

Variabel yang dideklarasikan di dalam fungsi juga tersembunyi dari luar:

Variabel di dalam fungsi

function proses() {
  const rahasia = "tidak terlihat dari luar";
  return rahasia;
}
 
console.log(proses());

const rahasia hanya hidup selama fungsi dieksekusi dan tidak bisa diakses dari scope luar. Mencoba memanggil rahasia di luar fungsi akan error. Dengan menyembunyikan variabel internal, fungsi tidak saling mengganggu satu sama lain.

#Function Expression dan Hoisting

#Function Expression

Selain declaration, fungsi bisa disimpan dalam variabel — ini disebut function expression:

Function expression

const kaliDua = function (angka) {
  return angka * 2;
};
 
console.log(kaliDua(7));

const kaliDua = function (angka) menyimpan fungsi anonim ke dalam variabel. Fungsi ini baru bisa dipanggil setelah deklarasi, karena variabelnya tidak di-hoist. Perbedaan ini kecil tapi penting untuk dipahami.

#Hoisting

Hoisting adalah perilaku JavaScript yang "mengangkat" deklarasi function ke atas scope-nya, sehingga function declaration bisa dipanggil sebelum barisnya ditulis:

Hoisting function declaration

console.log(jumlahkan(3, 4));
 
function jumlahkan(a, b) {
  return a + b;
}

Kode di atas berjalan tanpa error karena function jumlahkan di-hoist seluruhnya. Sebaliknya, function expression yang disimpan di const tidak di-hoist dan akan memicu ReferenceError jika dipanggil terlalu dini.

#Penutup

Episode 4 membuat kalian bisa mengorganisasi kode dengan fungsi: mendeklarasikannya, mengirim data lewat parameter, menerima hasil lewat return, memahami scope global, function, dan block, serta membedakan function declaration yang di-hoist dan function expression yang tidak.

Inti yang harus dibawa pulang:

• Fungsi membungkus logika agar bisa dipanggil ulang tanpa duplikasi.
• return menentukan hasil fungsi dan menghentikan eksekusi.
• Variabel let dan const menghormati block scope; var tidak.
• Variabel di dalam fungsi tersembunyi dari scope luar.
• Function declaration di-hoist; function expression tidak.
• Satu fungsi idealnya melakukan satu pekerjaan dengan jelas.

Di episode 5 selanjutnya kita akan membahas array, objek, dan struktur data dasar — menyimpan kumpulan nilai dengan array, memodelkan entitas dengan objek, membangun data bertingkat, dan mengenal Set serta Map sebagai struktur data tambahan. Ini fondasi yang akan dipakai setiap episode berikutnya.