JavaScript
Lanjutan

Teori

Fungsi adalah blok kode yang bisa dipanggil berulang kali untuk menjalankan tugas tertentu, tanpa harus menulis ulang kodenya. Fungsi bisa menerima input (parameter) dan mengembalikan output (return value).

Ada 3 cara umum menulis fungsi di JS:

Salin// 1. Function Declaration
function sapa(nama) {
  return `Halo, ${nama}!`;
}

// 2. Function Expression
const sapa2 = function (nama) {
  return `Halo, ${nama}!`;
};

// 3. Arrow Function (paling sering dipakai di kode modern)
const sapa3 = (nama) => {
  return `Halo, ${nama}!`;
};

// Arrow function singkat (implicit return)
const sapa4 = (nama) => `Halo, ${nama}!`;

Konsep

• Parameter = variabel yang didefinisikan di fungsi, tempat "menampung" nilai yang dikirim.
• Argument = nilai asli yang dikirim saat memanggil fungsi.
• Return = nilai yang dikeluarkan fungsi, bisa ditampung di variabel lain.
• Fungsi tanpa return otomatis menghasilkan undefined.

Contoh Penggunaan Nyata

Menghitung total harga belanja dengan diskon:

Salinfunction hitungTotal(harga, diskonPersen) {
  const potongan = harga * (diskonPersen / 100);
  return harga - potongan;
}

console.log(hitungTotal(100000, 10)); // 90000

Teori

Array adalah struktur data untuk menyimpan banyak nilai dalam satu variabel, berurutan berdasarkan index (dimulai dari 0). JavaScript modern punya banyak method bawaan untuk mengolah array tanpa perlu loop manual (for).

Method yang paling penting untuk dikuasai:

• .forEach() → menjalankan fungsi untuk setiap elemen (tidak menghasilkan array baru).
• .map() → membuat array baru hasil transformasi tiap elemen.
• .filter() → membuat array baru berisi elemen yang lolos kondisi tertentu.
• .reduce() → "meringkas" seluruh array jadi satu nilai (misal total, rata-rata).
• .find() → mencari satu elemen pertama yang cocok dengan kondisi.

Konsep

Salinconst angka = [1, 2, 3, 4, 5];

angka.forEach(n => console.log(n));

const dobel = angka.map(n => n * 2);          // [2, 4, 6, 8, 10]
const genap = angka.filter(n => n % 2 === 0); // [2, 4]
const total = angka.reduce((acc, n) => acc + n, 0); // 15
const ketemu = angka.find(n => n > 3);        // 4

Contoh Penggunaan Nyata

Menampilkan daftar produk dan menghitung total harga keranjang belanja:

Salinconst keranjang = [
  { nama: 'Kopi', harga: 25000 },
  { nama: 'Roti', harga: 15000 },
  { nama: 'Susu', harga: 20000 },
];

const totalBelanja = keranjang.reduce((acc, item) => acc + item.harga, 0);
console.log(totalBelanja); // 60000

const namaProduk = keranjang.map(item => item.nama);
console.log(namaProduk); // ['Kopi', 'Roti', 'Susu']

Teori

Objek digunakan untuk menyimpan data yang berkaitan dalam bentuk pasangan key: value. Kalau array cocok untuk daftar data sejenis (semua angka, semua string), objek cocok untuk menggambarkan satu entitas dengan banyak atribut — misalnya satu user, satu produk, satu mobil.

Konsep

Salinconst user = {
  nama: 'Zain',
  umur: 25,
  kota: 'Jakarta',
  sapa: function () {
    return `Halo, saya ${this.nama}`;
  }
};

console.log(user.nama);        // akses pakai dot notation
console.log(user['kota']);     // akses pakai bracket notation
console.log(user.sapa());      // panggil method di dalam objek

// Destructuring — ambil beberapa properti sekaligus
const { nama, kota } = user;
console.log(nama, kota);

this di dalam method objek merujuk ke objek itu sendiri.

Contoh Penggunaan Nyata

Menyimpan data profil user yang didapat dari form pendaftaran:

Salinconst pendaftar = {
  nama: document.querySelector('#nama').value,
  email: document.querySelector('#email').value,
  status: 'belum diverifikasi',
};

console.log(`${pendaftar.nama} mendaftar dengan email ${pendaftar.email}`);

Array of objects untuk data tabel di dashboard (kombinasi array + objek — sering banget dipakai bareng):

Salinconst siswa = [
  { nama: 'Andi', nilai: 88 },
  { nama: 'Sari', nilai: 92 },
];

Teori

Callback adalah fungsi yang dikirim sebagai argument ke fungsi lain, lalu dipanggil (di-"call back") di dalam fungsi tersebut — biasanya setelah suatu proses selesai. Konsep ini adalah fondasi penting sebelum belajar Promise dan async/await.

Konsep

Salinfunction proses(nama, callback) {
  console.log(`Memproses ${nama}...`);
  callback();
}

proses('Data User', function () {
  console.log('Selesai diproses!');
});

// Method array yang sudah dipelajari (map, filter, forEach)
// sebenarnya semuanya menerima callback sebagai argument!
[1, 2, 3].forEach(function (angka) {
  console.log(angka);
});

// Callback sering dipakai untuk hal yang butuh waktu (asynchronous)
setTimeout(() => {
  console.log('Muncul setelah 2 detik');
}, 2000);

Contoh Penggunaan Nyata

Menjalankan animasi setelah data selesai dimuat, atau validasi setelah user berhenti mengetik (debounce) — semuanya berbasis callback. Contoh sederhana loading data dummy:

Salinfunction ambilData(callback) {
  setTimeout(() => {
    const data = { nama: 'Produk A', harga: 50000 };
    callback(data);
  }, 1000);
}

ambilData(function (data) {
  console.log('Data diterima:', data.nama);
});

Teori

fetch() adalah fungsi bawaan JavaScript untuk mengambil data dari server/API lewat internet, tanpa perlu reload halaman. Ini yang bikin website bisa nampilin data real-time seperti cuaca, harga saham, atau daftar produk dari database.

fetch() bersifat asynchronous (butuh waktu, tidak langsung selesai), makanya dipakai bareng .then() atau async/await.

Konsep

Salin// Cara 1: pakai .then()
fetch('https://api.example.com/produk')
  .then(response => response.json()) // ubah response jadi JSON
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Gagal ambil data:', error);
  });

// Cara 2: pakai async/await (lebih rapi, sering dipakai)
async function ambilProduk() {
  try {
    const response = await fetch('https://api.example.com/produk');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Gagal ambil data:', error);
  }
}

ambilProduk();

Contoh Penggunaan Nyata

Menampilkan daftar postingan dari API publik ke dalam halaman HTML:

Salinasync function tampilkanPostingan() {
  const container = document.querySelector('#daftarPostingan');
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();

  data.slice(0, 5).forEach(post => {
    const p = document.createElement('p');
    p.textContent = post.title;
    container.appendChild(p);
  });
}

tampilkanPostingan();

Ini contoh nyata gabungan semua materi hari ini: querySelector (ambil container), fetch (ambil data), forEach + createElement (loop dan bikin elemen baru), dan mengubah HTML (appendChild).