Kode Modular dan Reusable

1. Function Declaration (Dasar)

Cara paling tradisional untuk membuat fungsi adalah dengan menggunakan kata kunci function, diikuti dengan nama fungsi, tanda kurung (), dan kurung kurawal {} yang berisi kode yang akan dijalankan.

Syntax

function namaFungsi() {
  // Kode yang akan dijalankan
}

Contoh Implementasi

Mari kita buat fungsi sederhana untuk menyapa pengguna.

// 1. Membuat (Mendeklarasikan) Fungsi
function helloWorld() {
  console.log("Halo! Selamat belajar JavaScript.");
}

// 2. Memanggil (Invoke) Fungsi
helloWorld(); 
helloWorld(); 

Penjelasan:

• Saat kode dibaca, fungsi helloWorld didefinisikan, tetapi kodenya belum dijalankan.
• Kode di dalam {} baru berjalan ketika kamu memanggilnya dengan helloWorld().
• Kita memanggilnya dua kali, jadi pesan akan muncul dua kali di console.

2. Parameter dan Argument (Input)

Fungsi di atas bersifat statis (selalu mencetak hal yang sama). Agar fungsi lebih dinamis, kita bisa mengirimkan data ke dalamnya.

• Parameter: Variabel yang didefinisikan dalam tanda kurung saat membuat fungsi (sebagai penampung).
• Argument: Nilai asli yang dikirimkan saat memanggil fungsi.

Contoh Implementasi

// 'nama' dan 'waktu' adalah Parameter
function sayHayToUser(nama, waktu) {
  console.log("Selamat " + waktu + ", " + nama + "!");
}

// "Budi" dan "Pagi" adalah Argument
sayHayToUser("Budi", "Pagi"); 
// Output: Selamat Pagi, Budi!

sayHayToUser("Sarah", "Malam");
// Output: Selamat Malam, Sarah!

3. Return Statement (Output)

Ini adalah konsep yang sering membingungkan pemula.

• console.log hanya menampilkan sesuatu ke layar.
• return mengembalikan nilai dari fungsi ke tempat fungsi itu dipanggil, sehingga nilainya bisa disimpan dalam variabel atau diolah lagi.

Setelah kata kunci return dieksekusi, fungsi akan berhenti bekerja (keluar dari fungsi).

Contoh Perbandingan

// Fungsi Penjumlahan dengan Return
function tambah(a, b) {
  const hasil = a + b;
  return hasil; // Mengembalikan nilai hasil
  console.log("Ini tidak akan pernah dicetak"); // Unreachable code
}

// Kita bisa menyimpan hasilnya ke variabel baru
let total = tambah(5, 10); 
console.log(total); // Output: 15

// Kita juga bisa langsung menggunakannya dalam operasi lain
let totalBaru = tambah(5, 5) * 2;
console.log(totalBaru); // Output: 20 (karena 10 * 2)

4. Function Expression

Selain cara deklarasi biasa, kamu bisa menyimpan fungsi di dalam sebuah variabel. Ini disebut Function Expression. Biasanya fungsi ini tidak memiliki nama (disebut Anonymous Function).

const hitungLuas = function(panjang, lebar) {
  return panjang * lebar;
};

console.log(hitungLuas(10, 5)); // Output: 50

5. Arrow Function (ES6 Modern)

Sejak update JavaScript tahun 2015 (ES6), ada cara penulisan yang lebih ringkas menggunakan tanda panah =>. Ini adalah standar industri saat ini, terutama di framework seperti React.

Transformasi Syntax

Versi Lama:

const kaliDua = function(angka) {
  return angka * 2;
}

Versi Arrow Function:

const kaliDua = (angka) => {
  return angka * 2;
}

Versi Arrow Function (Paling Ringkas): Jika isi fungsi hanya satu baris dan langsung return, kamu bisa menghapus kurung kurawal {} dan kata kunci return. Ini disebut Implicit Return.

const kaliDua = angka => angka * 2;

console.log(kaliDua(5)); // Output: 10

6. Variable Scope (Cakupan Variabel)

Memahami scope sangat penting untuk menghindari bug. Di JavaScript, variabel memiliki jangkauan akses.

Local Scope (Di dalam Fungsi)

Variabel yang dibuat di dalam fungsi tidak bisa diakses dari luar fungsi.

function tesScope() {
  let pesanRahasia = "Ini rahasia";
  console.log(pesanRahasia); // Berhasil
}

tesScope();
// console.log(pesanRahasia); // ERROR! pesanRahasia is not defined

Global Scope (Di luar Fungsi)

Variabel yang dibuat di luar fungsi bisa diakses dari mana saja, termasuk dari dalam fungsi.

let namaGlobal = "TechTutor";

function cetakNama() {
  console.log(namaGlobal); // Berhasil mengakses variabel luar
}

Tips

1. Penamaan Fungsi: Gunakan kata kerja yang mendeskripsikan apa yang dilakukan fungsi tersebut. Gunakan format camelCase.

   • Benar : hitungTotal(), getUserData(), validateForm()
   • Salah : function1(), proses(), buat()

2. Satu Fungsi, Satu Tugas: Fungsi yang baik hanya melakukan satu hal spesifik. Jika fungsimu melakukan perhitungan, mengambil data API, dan mengubah warna layar sekaligus, sebaiknya pecah menjadi tiga fungsi terpisah.

3. Default Parameter: Kamu bisa memberikan nilai default jika argumen tidak diberikan.

   function salam(nama = "Pengunjung") {
   console.log("Halo " + nama);
   }
   salam(); // Output: Halo Pengunjung