Tutorial

Jago JavaScript #6: Array & Object (Kelola Data Kompleks Jadi Gampang!)

· 3 min read
Javascript Programming
Jago JavaScript #6: Array & Object (Kelola Data Kompleks Jadi Gampang!)

Dalam pemrograman, kita butuh struktur data untuk mengelompokkan informasi yang saling berhubungan. JavaScript punya dua cara utama: Array (untuk daftar urut) dan Object (untuk data dengan label/identitas).

🧩 Apa yang Akan Dipelajari

  • Menggunakan Array untuk membuat daftar data.
  • Memahami cara akses data menggunakan Index.
  • Menggunakan Object untuk menyimpan data dengan sistem kunci-nilai (key-value).
  • Teknik menggabungkan keduanya (Array of Objects) yang sering dipakai di aplikasi nyata.

⚙️ Persiapan

  • Buka Console di browser (F12).
  • Pastikan kamu sudah paham materi Perulangan (Looping) karena Array dan Loop itu sahabat sejati.

🚀 Langkah-Langkah

1. Array: Si Daftar Antrean

Array adalah tipe data yang isinya daftar nilai yang berurutan. Bayangkan seperti deretan kursi yang punya nomor urut. Penting: Di JavaScript, nomor urut (Index) selalu dimulai dari 0, bukan 1.

let daftarBelanja = ["Susu", "Telur", "Kopi", "Roti"];

// Akses data pakai index [n]
console.log(daftarBelanja[0]); // Hasil: "Susu"
console.log(daftarBelanja[2]); // Hasil: "Kopi"

// Update data
daftarBelanja[1] = "Daging"; 
console.log(daftarBelanja); // Hasil: ["Susu", "Daging", "Kopi", "Roti"]

2. Manipulasi Array

Kamu bisa nambah atau hapus isi array dengan fungsi bawaan:

  • push(): Nambah di paling belakang.
  • pop(): Hapus yang paling belakang.
  • unshift(): Nambah di paling depan.
  • shift(): Hapus yang paling depan.
let hobi = ["Ngoding"];
hobi.push("Main Game"); // ["Ngoding", "Main Game"]

3. Object: Si Brankas Berlabel

Kalau Array pakai nomor urut, Object pakai "Label" atau Key. Ini cocok banget buat nyimpen informasi satu benda secara detail.

let user = {
    nama: "Kay",
    umur: 25,
    pekerjaan: "Developer",
    isPremium: true
};

// Akses data pakai titik (dot notation)
console.log(user.nama); // Hasil: "Kay"
console.log(user.pekerjaan); // Hasil: "Developer"

4. Array of Objects (Dunia Nyata)

Di aplikasi asli (seperti daftar chat atau katalog produk), kita biasanya gabungin keduanya. Daftar (Array) yang isinya adalah kumpulan detail (Object).

let daftarProduk = [
    { id: 1, nama: "Laptop", harga: 15000000 },
    { id: 2, nama: "Mouse", harga: 300000 },
    { id: 3, nama: "Keyboard", harga: 800000 }
];

// Cara akses harga Mouse:
console.log(daftarProduk[1].harga); // Hasil: 300000

💡 Tips Tambahan

  • Kapan pakai Array? Pakai kalau urutan itu penting (misal: daftar peringkat, antrean).
  • Kapan pakai Object? Pakai kalau kamu mau mendeskripsikan sesuatu secara detail (misal: spesifikasi HP, data diri).
  • Const vs Let: Untuk Array dan Object, disarankan pakai const. Kenapa? Karena meskipun isinya bisa diubah, kita gak pengen variabel itu mendadak berubah jadi tipe data lain (seperti tiba-tiba jadi angka).

❗ Troubleshooting

Masalah: Kenapa hasil akses array saya undefined? Solusi: Cek index-nya. Kalau isi array cuma ada 3 (index 0, 1, 2), terus kamu panggil array[3], hasilnya pasti undefined karena kursi nomor 3 itu gak ada!


🎯 Kesimpulan

Selamat! Kamu sekarang sudah tahu cara mengelola data yang rapi. Array buat daftar, Object buat detail. Dengan menguasai kedua hal ini, kamu sudah siap untuk belajar cara mengambil data dari internet (API) di materi mendatang!

Share this article