Tutorial JavaScript Part#6: Fungsi, Prosedur, dan Closure pada JavaScript

Tutorial Lengkap Fungsi, Prosedur, dan Closure dalam JavaScript

Halo para pembaca setia! Pada tutorial JavaScript kali ini, kita akan membahas konsep fundamental yang sangat penting dalam pemrograman - Fungsi (Function), Prosedur, Deklarasi Fungsi, Ekspresi Fungsi, Arrow Function, serta Scope dan Closure.

Pada tutorial sebelumnya kita sudah mempelajari materi tentang jenis perulangan pada javascript yang sering di gunakan, untuk link tutorial part#5 dapat di akses pada link berikut:

Tutorial Part#5: Jenis Perulangan Pada JavaScript

Pemahaman mendalam tentang konsep-konsep ini akan membawa skill coding Anda ke level berikutnya. Artikel ini dilengkapi dengan contoh kode praktis, penjelasan detail, dan studi kasus nyata yang akan membantu Anda menguasai materi dengan mudah. Mari kita mulai!

1. Fungsi (Function) dalam JavaScript

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu. Fungsi dapat menerima input (parameter) dan mengembalikan output (return value).
Studi Kasus: Kita akan membuat fungsi untuk menghitung diskon harga produk berdasarkan persentase tertentu.

Kode Contoh :

nama-file.js

// Deklarasi fungsi hitungDiskon
function hitungDiskon(harga, persenDiskon) {
  const diskon = harga * (persenDiskon / 100);
  const hargaAkhir = harga - diskon;
  return hargaAkhir;
}

// Memanggil fungsi
const hargaProduk = 500000;
const diskon = 20;
const hargaSetelahDiskon = hitungDiskon(hargaProduk, diskon);

console.log(`Harga setelah diskon: Rp${hargaSetelahDiskon}`);
  

Penjelasan Kode:
Kita mendefinisikan fungsi hitungDiskon dengan dua parameter: harga dan persenDiskon
Fungsi menghitung nilai diskon dan harga akhir
Hasil dikembalikan dengan pernyataan return
Fungsi dipanggil dengan nilai tertentu dan hasilnya ditampilkan

Hasil Running:
Harga setelah diskon: Rp400000

2. Prosedur dalam JavaScript

Prosedur pada dasarnya adalah fungsi yang tidak mengembalikan nilai (tidak ada return value). Dalam JavaScript, semua fungsi mengembalikan nilai (undefined jika tidak ditentukan), tetapi kita bisa membuat fungsi yang berperilaku seperti prosedur.
Studi Kasus: Membuat prosedur untuk menampilkan informasi produk ke konsol.

Kode Contoh :

function tampilkanInfoProduk(nama, harga, stok) {
  console.log(`=== Info Produk ===`);
  console.log(`Nama: ${nama}`);
  console.log(`Harga: Rp${harga}`);
  console.log(`Stok: ${stok} unit`);
  console.log(`===================`);
}

// Memanggil prosedur
tampilkanInfoProduk("Laptop ASUS", 8500000, 15);

Penjelasan Kode:
Fungsi tampilkanInfoProduk didefinisikan dengan tiga parameter
Fungsi hanya menampilkan informasi tanpa mengembalikan nilai
Dipanggil dengan data produk tertentu

Hasil Running:
=== Info Produk ===
Nama: Laptop ASUS
Harga: Rp8500000
Stok: 15 unit
===================

3. Fungsi Biasa (Declaration)

Fungsi deklarasi adalah cara tradisional mendefinisikan fungsi dengan kata kunci function. Fungsi deklarasi di-hoist (diangkat ke atas) sehingga bisa dipanggil sebelum dideklarasikan.
Studi Kasus: Membuat fungsi deklarasi untuk validasi form login.

Kode Contoh:

// Fungsi deklarasi
function validasiLogin(username, password) {
  if (!username || !password) {
    return "Username dan password harus diisi!";
  }
  
  if (password.length < 8) {
    return "Password minimal 8 karakter!";
  }
  return "Login valid!";
}

// Memanggil fungsi
console.log(validasiLogin("user123", "password")); // Valid
console.log(validasiLogin("", "pass")); // Tidak valid

Penjelasan Kode:
Fungsi validasiLogin dideklarasikan dengan cara tradisional
Melakukan beberapa pengecekan validasi
Mengembalikan pesan error atau sukses berdasarkan validasi

Hasil Running:
Login valid!
Username dan password harus diisi!

4. Fungsi Ekspresi

Fungsi ekspresi adalah fungsi yang didefinisikan sebagai bagian dari ekspresi. Biasanya disimpan dalam variabel dan tidak di-hoist seperti fungsi deklarasi.
Studi Kasus: Membuat kalkulator sederhana dengan fungsi ekspresi.

Kode Contoh:

// Fungsi ekspresi
const kalkulator = {
  tambah: function(a, b) {
    return a + b;
  },
  kurang: function(a, b) {
    return a - b;
  },
  kali: function(a, b) {
    return a * b;
  },
  bagi: function(a, b) {
    return a / b;
  }
};

// Menggunakan kalkulator
console.log(`5 + 3 = ${kalkulator.tambah(5, 3)}`);
console.log(`10 - 4 = ${kalkulator.kurang(10, 4)}`);
console.log(`6 * 7 = ${kalkulator.kali(6, 7)}`);
console.log(`20 / 5 = ${kalkulator.bagi(20, 5)}`);

Penjelasan Kode:
Membuat objek kalkulator yang berisi beberapa fungsi ekspresi
Setiap fungsi melakukan operasi matematika dasar
Fungsi dipanggil melalui objek kalkulator

Hasil Running:
5 + 3 = 8
10 - 4 = 6
6 * 7 = 42
20 / 5 = 4

5. Arrow Function

Arrow function adalah sintaks ringkas untuk menulis fungsi, diperkenalkan di ES6. Sangat berguna untuk fungsi sederhana dan menjaga konteks this.
Studi Kasus: Menggunakan arrow function untuk memproses array data siswa.
kode Contoh:

// Data siswa
const siswa = [
  { nama: "Andi", nilai: 85 },
  { nama: "Budi", nilai: 72 },
  { nama: "Cindy", nilai: 90 },
  { nama: "Dedi", nilai: 65 }
];

// Arrow function untuk filter dan map
const lulus = siswa.filter(s => s.nilai >= 75);
const namaLulus = lulus.map(s => s.nama);

console.log("Siswa yang lulus:", namaLulus);

// Arrow function dengan multiple statement
const rataRata = siswa.reduce((acc, curr) => {
  return acc + curr.nilai;
}, 0) / siswa.length;

console.log(`Rata-rata nilai: ${rataRata.toFixed(2)}`);

Penjelasan Kode:
Menggunakan arrow function untuk filter dan map array
Arrow function dengan satu parameter dan statement bisa tanpa kurung dan return
Untuk multiple statement, gunakan kurung kurawal dan return eksplisit

Hasil Running:
Siswa yang lulus: ["Andi", "Budi", "Cindy"]
Rata-rata nilai: 78.00

6. Memahami Scope dan Closure

Scope menentukan visibilitas variabel, sedangkan closure adalah fungsi yang mengingat lingkungan tempat ia dibuat.
Studi Kasus: Membuat counter menggunakan closure untuk mempertahankan state.

Kode Contoh:

// Fungsi factory untuk membuat counter
function buatCounter() {
  let count = 0; // Variabel private
  
  // Mengembalikan objek dengan metode counter
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

// Membuat counter
const counter = buatCounter();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount());  // 1

Penjelasan Kode:
Fungsi buatCounter memiliki variabel lokal count
Mengembalikan objek dengan beberapa metode yang memiliki akses ke count (closure)
Variabel count terjaga privasinya dan hanya bisa diakses melalui metode yang disediakan

Hasil Running:
1
2
1
1

Demikian tutorial lengkap tentang fungsi, prosedur, dan closure dalam JavaScript. Konsep-konsep ini adalah dasar yang sangat penting untuk pengembangan aplikasi JavaScript yang lebih kompleks.
Bagaimana pengalaman Anda mengikuti tutorial ini? Apakah ada bagian yang masih membingungkan? Silakan tinggalkan komentar di bawah untuk berdiskusi atau bertanya. Saya akan dengan senang hati membantu!

jika ada saran dan masukan atau pertanyaan dalam materi pada tutorial kali ini. bisa di berikan pada kolom komentar..

Semoga bermanfaat! Jangan lupa like dan share jika artikel ini membantu.

Happy Coding...!!!

Incoming Search Terms:

• tutorial fungsi javascript
• contoh arrow function
• perbedaan fungsi dan prosedur
• cara menggunakan closure javascript
• contoh fungsi deklarasi dan ekspresi
• belajar scope variabel javascript
• studi kasus penggunaan closure
• panduan lengkap fungsi javascript
• contoh praktis arrow function
• memahami hoisting fungsi

Share this post

𝕏