Frontend Fundamentals

Seni Menulis Kode Bersih: Functional Programming

📖 25 menit baca 🏷️ Architecture Paradigm

Kamu pasti pernah mengalami *Bugs* menakutkan ini: Kamu mengubah sebuah Array di Baris ke-10, tapi tiba-tiba UI Websitemu di Baris ke-500 ikut hancur berantakan. Hal ini terjadi karena gaya *kodinganmu* saling menjajah dan mengotori data satu sama lain (Side Effects).

Selamat datang di Paradigma Functional Programming (FP). Ini bukanlah kode *Framework* baru, melainkan Pola Pikir (Mindset) gaya eksklusif untuk menulis kode yang anti-bocor, stabil, dan bisa diprediksi. Ini adalah pondasi mutlak yang wajib kamu kuasai sebelum menyentuh React.js maupun Next.js!

😇 1. Fungsi Suci tanpa Dosa (Pure Functions)

Fungsi di FP itu ibarat Mesin Pembuat Jus Jeruk. Mesin itu punya 2 Aturan Suci:
1. Jika kamu memberinya 2 Buah Jeruk, ia SELALU menghasilkan 1 Gelas Jus. Tidak pernah sekalipun ia tiba-tiba menghasilkan Jus Apel (Bisa Diprediksi).
2. Mesin itu tidak boleh menghancurkan dapur tempat ia diletakkan (Tanpa Efek Samping / No Side Effects).

❌ Impure Function (Kotor & Berbahaya)


let uangKas = 100000; // Variabel Global

function bayarListrik(tagihan) {
  // 🚨 DOSA 1: Ia MERUSAK variabel di luar tubuhnya! (Side Effect)
  uangKas = uangKas - tagihan; 
  
  // 🚨 DOSA 2: Bergantung pd angin cuaca.
  // Jika dipanggil 2x dengan angka yg SAMA, 
  // hasilnya beda karena kas aslinya sudah berubah!
  return uangKas;
}

✅ Pure Function (Suci & Dapat Diprediksi)


const uangKasAsli = 100000;

function hitungSisaUang(saldo, tagihan) {
  // 🛡️ SUCI 1: Ia hanya bergantung pada DATA YANG MASUK (Parameter).
  // 🛡️ SUCI 2: Ia TIDAK MENGUBAH `uangKasAsli` sedikitpun!
  // Ia hanya mengirimkan DATA BARU sbg Kalkulasi kalkulator murni.
  return saldo - tagihan;
}

const uangBaru = hitungSisaUang(uangKasAsli, 20000);

💎 2. Pantang Mutasi (Immutability)

Di dalam Kerajaan React.js dan Functional Programming, ada satu Undang-Undang Alam tertinggi: Kamu TIDAK BOLEH MENGUBAH Array atau Object yang sudah jadi! Alih-alih merusaknya (Mutasi), kamu WAJIB Memfotokopi (Clone) data aslinya, memberi coretan pada fotokopian tersebut, lalu menggantikan data aslinya dengan kertas hasil fotokopian yang baru!


// OBJEK KORBAN
const cartUser = { nama: "Andi", total: 1 };

// ❌ CARA TERKUTUK (MUTASI): Merobek/mengubah properti langsung
cartUser.total = 2;               // HARAM DI REACT & REDUX!
koleksiBarang.push("Sepatu");    // HARAM! (.push mengubah array asli)


// ✅ CARA FP (IMMUTABLE): Jurus Clone Bayangan "Spread Operator (...)"

// Fotokopi Object `cartUser`, lalu cetak ulang properti `total` nya dgn tipe-X aslinya utuh!
const newCart = { ...cartUser, total: 2 };

// Menambahkan barang di Array TANPA Push!
// Bongkar isi lama (...koleksiBarang), tempel "Sepatu" di ujungnya membentuk Array BARU [ ]
const koleksiBaru = [...koleksiBarang, "Sepatu"];

🛒 Studi Kasus Mahakarya: Immutable Cart (Pemanasan React.js)

Inilah cara keranjang belanja modern dibangun! Di bawah ini tidak ada 1 pun metode .push() atau manipulasi perusakan array[0] = X. Semua operasi Tambah, Ubah Jumlah, dan Hapus dilakukan secara Suci melalui fungsi bawaan JS: Filter, Map, dan Spread Operator. Bukalah Tab `app.js` untuk mengamati gaya penulisan state React.js level dewa!


<!-- Toko Online FP (Functional Programming) -->
<div class="toko-kamera">
   
   <div class="etalase">
      <button onclick="dispatchAksiTambah('Sony A7IV')">+ Beli Sony A7IV</button>
      <button onclick="dispatchAksiTambah('Lensa 50mm')">+ Beli Lensa 50mm</button>
   </div>

   <h3>🛒 Keranjangmu (<span id="total-qty">0</span> Item)</h3>
   
   <!-- Target Render UI -->
   <ul id="cart-list-ui"></ul>
   
</div>


// 0. STATE UTAMA (Anggap sebagai Database React State)
let appState = []; // Array of Objects: [{id, nama, qty}]


// =========================================================
// == 1. AREA KESUCIAN: PURE FUNCTIONS (Haram Ada UI .innerHTML Di sini!) ==
// =========================================================

// Fungsi Murni 1: Menerima Array Lama, Keluarkan Array Baru 100% (+ Tambah)
function addItemUtuh(stateLama, namaBarangTambahan) {
    // Pakai Spread (...) untuk bongkar state lama tanpa melukainya!
    return [
        ...stateLama, 
        { id: Date.now(), nama: namaBarangTambahan, qty: 1 }
    ];
}

// Fungsi Murni 2: Menghapus Data TANPA MERUSAK pakai `filter()`
function hapusItemSesuaiID(stateLama, idDihapus) {
    // Filter menghasilkan Array Kosong Baru secara ototmatis! (Tidak memutasi)
    return stateLama.filter(item => item.id !== idDihapus);
}

// Fungsi Murni 3: Tambah Qty 1 Item TANPA Mengubah Array pakai `map()`
function tambahSatuQty(stateLama, idTarget) {
    return stateLama.map((item) => {
        // Jika ketemu barangnya, fotokopi objectnya, ubah totalnya!
        if(item.id === idTarget) {
            return { ...item, qty: item.qty + 1 }; 
        }
        // Kalo bukan barang targetnya, biarkan lewat utuh!
        return item; 
    });
}


// =========================================================
// == 2. AREA PENGHUBUNG KOTOR (SIDE EFFECTS / UI RENDER) ==
// =========================================================

function dispatchAksiTambah(nama) {
    appState = addItemUtuh(appState, nama); // Gantikan Data Asli dgn Fotokopian
    renderLayarUI(); // Lapor ke Mandor HTML
}

function dispatchAksiHapus(id) {
    appState = hapusItemSesuaiID(appState, id);
    renderLayarUI();
}

function dispatchAksiUpQty(id) {
    appState = tambahSatuQty(appState, id);
    renderLayarUI();
}

// Mesin Cetak HTML Kasar
function renderLayarUI() {
    document.getElementById("total-qty").innerText = appState.length;
    const ul = document.getElementById("cart-list-ui");
    
    ul.innerHTML = appState.map(brg => `
        <li class="item-cart">
           <span>📸 ${brg.nama} <strong>(x${brg.qty})</strong></span>
           <div>
               <button class="btn-kecil" onclick="dispatchAksiUpQty(${brg.id})">+1</button>
               <button class="btn-kecil" style="background:#ef4444;color:white" onclick="dispatchAksiHapus(${brg.id})">Silang</button>
           </div>
        </li>
    `).join("");
}

🎯 Demo Live: Sentuh Tombol UI di Bawah

🛒 Keranjang (0)

Keranjang kosong, tambahkan barang!

Aplikasi Toko Penjualan Kamera di atas 100% Bebas Bug Mutasi. Jika kamu mengklik "+1" pada Lensa, ia tidak akan mengubah properti 'Lensa' aslinya. Melainkan ia memfotokopi data Lensa, memperbarui qty nya menjadi 2 di dalam fotokopian tersebut, lalu JS menyingkirkan Data Lama dan menggantikannya dengan Array Hasil Fotokopian Baru. (Ini adalah prinsip state useState di React.js kelak!).

AI Assistants

Code Generators

Supporting Tools

AI IDE

Business Validation

Seni Menulis Kode Bersih: Functional Programming

😇 1. Fungsi Suci tanpa Dosa (Pure Functions)

❌ Impure Function (Kotor & Berbahaya)

✅ Pure Function (Suci & Dapat Diprediksi)

💎 2. Pantang Mutasi (Immutability)

🛒 Studi Kasus Mahakarya: Immutable Cart (Pemanasan React.js)

🎯 Demo Live: Sentuh Tombol UI di Bawah

🛒 Keranjang (0)

Frontend Fundamentals

Seni Menulis Kode Bersih: Functional Programming

😇 1. Fungsi Suci tanpa Dosa (Pure Functions)

❌ Impure Function (Kotor & Berbahaya)

✅ Pure Function (Suci & Dapat Diprediksi)

💎 2. Pantang Mutasi (Immutability)

🛒 Studi Kasus Mahakarya: Immutable Cart (Pemanasan React.js)

🎯 Demo Live: Sentuh Tombol UI di Bawah

🛒 Keranjang (0)

Selamat Datang!

Buat Akun