Organisasi Data Terstruktur

Kenapa ini penting

Data di dunia nyata jarang berupa satu angka atau satu teks. Profil pengguna punya nama, email, alamat, dan daftar pesanan. Setiap pesanan punya produk, jumlah, dan status. Untuk merepresentasikan data seperti ini, kamu menggabungkan object dan array, bahkan menumpuknya (nested). Dan ketika data itu harus dikirim ke server, disimpan ke file, atau diterima dari API, formatnya hampir selalu JSON. Modul ini adalah jembatan dari "belajar logika" ke "membangun aplikasi nyata", karena hampir semua aplikasi pada dasarnya adalah tentang mengatur, mengambil, dan mengubah data terstruktur.

Konsep inti

Object: data berlabel

Object menyimpan pasangan key: value. Cocok untuk satu "benda" dengan banyak atribut.

Membaca: dot notation user.nama atau bracket notation user["nama"]. Bracket wajib dipakai kalau nama key disimpan di variabel (user[kolom]) atau mengandung spasi/tanda minus.
Menambah/mengubah: user.umur = 21.
Menghapus: delete user.umur.
Mengecek key: "email" in user atau Object.hasOwn(user, "email").
Shorthand: { nama, umur } sama dengan { nama: nama, umur: umur }.
Method: property yang berisi function, misalnya { sapa() { ... } }.
Destructuring: const { nama, umur } = user mengambil beberapa property sekaligus.
Mengakses key yang tidak ada menghasilkan undefined, bukan error.

Array: data berurutan

Array menyimpan daftar nilai berurutan, diakses dengan index mulai 0. Elemen terakhir ada di arr.length - 1, atau gunakan arr.at(-1).

Method	Fungsi	Mengubah array asli?
`push(x)` / `pop()`	Tambah / ambil dari akhir	Ya
`unshift(x)` / `shift()`	Tambah / ambil dari awal	Ya
`splice(i, n)`	Hapus/sisip di posisi tertentu	Ya
`slice(a, b)`	Salin sebagian	Tidak
`includes(x)`	Apakah ada?	Tidak
`indexOf(x)`	Posisi elemen (−1 kalau tidak ada)	Tidak
`join(sep)`	Gabung jadi string	Tidak
`concat` / spread `[...a, ...b]`	Gabung array	Tidak

Destructuring array: const [pertama, kedua] = arr.

Kapan object, kapan array?

Array untuk banyak hal sejenis yang urutannya penting atau perlu di-loop: daftar produk, daftar nilai.
Object untuk satu hal dengan banyak atribut berbeda: satu produk (nama, harga, stok).
Pola paling umum di aplikasi nyata: array of objects. Contohnya [{ id: 1, nama: "Kaos" }, { id: 2, nama: "Topi" }].

Nested data

Object bisa berisi array, array bisa berisi object, dan seterusnya. Akses dengan merangkai dot dan bracket dari luar ke dalam: toko.produk[0].varian[1]. Untuk bagian yang belum tentu ada, gunakan ?. dari modul operator. Saat data bersarang sulit dibaca, console.log(JSON.stringify(data, null, 2)) atau console.dir(data, { depth: null }) menampilkannya secara rapi.

JSON: format pertukaran data

JSON (JavaScript Object Notation) adalah format teks untuk menyimpan dan mengirim data. Bentuknya mirip object JavaScript, tapi aturannya lebih ketat:

Aturan JSON	Contoh salah	Contoh benar
Key wajib diapit kutip ganda	`{nama: "A"}`	`{"nama": "A"}`
String wajib kutip ganda	`{"a": 'x'}`	`{"a": "x"}`
Tidak boleh koma di akhir	`{"a": 1,}`	`{"a": 1}`
Tidak ada komentar, function, `undefined`

Nilai yang didukung: string, number, boolean, null, array, object.

Dua function utama:

JSON.stringify(nilai): object JavaScript → teks JSON. Tambahkan null, 2 untuk format rapi dengan indentasi.
JSON.parse(teks): teks JSON → object JavaScript. Kalau teksnya tidak valid, muncul SyntaxError, jadi bungkus dengan try...catch saat teksnya berasal dari luar.

Perhatikan apa yang hilang atau berubah saat stringify: property bernilai undefined dan function dihapus, sedangkan Date berubah menjadi string.

Contoh kode

Object, array, dan nested data:

// Object
const user = {
  nama: "Maya",
  umur: 22,
  "kota asal": "Makassar",
  sapa() {
    return `Hai, saya ${this.nama}`;
  },
};
console.log(user.nama);           // → Maya
console.log(user["kota asal"]);   // → Makassar
const kolom = "umur";
console.log(user[kolom]);         // → 22
console.log(user.sapa());         // → Hai, saya Maya

user.email = "maya@contoh.id";    // tambah
user.umur = 23;                   // ubah
delete user["kota asal"];         // hapus
console.log("email" in user, user.hp); // → true undefined

// Destructuring dan shorthand
const { nama, umur } = user;
const ringkas = { nama, umur };
console.log(ringkas);             // → { nama: 'Maya', umur: 23 }

// Array
const antrean = ["Ali", "Budi"];
antrean.push("Cici");             // ["Ali", "Budi", "Cici"]
antrean.unshift("Zaki");          // ["Zaki", "Ali", "Budi", "Cici"]
const dilayani = antrean.shift(); // "Zaki"
console.log(dilayani, antrean);   // → Zaki [ 'Ali', 'Budi', 'Cici' ]
console.log(antrean.at(-1), antrean.includes("Budi"), antrean.indexOf("Dodi"));
// → Cici true -1
antrean.splice(1, 1);             // hapus 1 elemen di index 1 ("Budi")
console.log(antrean.join(", ")); // → Ali, Cici

const [pertama, ...sisanya] = ["a", "b", "c"];
console.log(pertama, sisanya);    // → a [ 'b', 'c' ]

// Nested: array of objects di dalam object
const toko = {
  nama: "Toko Kita",
  alamat: { kota: "Bogor", kodePos: "16111" },
  produk: [
    { id: 1, nama: "Kaos", varian: ["S", "M", "L"], harga: 80000 },
    { id: 2, nama: "Topi", varian: ["All size"], harga: 45000 },
  ],
};
console.log(toko.alamat.kota);           // → Bogor
console.log(toko.produk[0].varian[2]);   // → L
console.log(toko.produk[1]?.diskon ?? 0); // → 0

// Cari produk berdasarkan id dan ubah harganya
const target = toko.produk.find((p) => p.id === 2);
target.harga = 40000;
console.log(toko.produk[1].harga);       // → 40000 (by reference!)

// Loop array of objects
for (const p of toko.produk) {
  console.log(`${p.nama}: ${p.varian.length} varian`);
}
// → Kaos: 3 varian
// → Topi: 1 varian

JSON:

const pesanan = {
  id: 101,
  pelanggan: "Rina",
  item: [{ nama: "Kopi", qty: 2 }],
  lunas: false,
  catatan: undefined,           // akan hilang
  hitung() { return 1; },       // akan hilang
  dibuat: new Date("2026-10-23T08:00:00Z"),
};

// Object → JSON (teks)
const teks = JSON.stringify(pesanan);
console.log(typeof teks); // → string
console.log(teks);
// → {"id":101,"pelanggan":"Rina","item":[{"nama":"Kopi","qty":2}],"lunas":false,"dibuat":"2026-10-23T08:00:00.000Z"}

// Format rapi
console.log(JSON.stringify({ a: 1, b: [1, 2] }, null, 2));
// → {
// →   "a": 1,
// →   "b": [
// →     1,
// →     2
// →   ]
// → }

// JSON (teks) → object
const dariServer = '{"produk":"Teh","harga":5000,"tersedia":true}';
const data = JSON.parse(dariServer);
console.log(data.produk, data.harga + 1000); // → Teh 6000

// JSON tidak valid → SyntaxError, tangani dengan try...catch
const rusak = "{nama: 'Teh'}"; // key tanpa kutip ganda, string kutip tunggal
try {
  JSON.parse(rusak);
} catch (err) {
  console.log("Gagal parse:", err.name); // → Gagal parse: SyntaxError
}

// Salinan dalam ala lama (hanya untuk data JSON-friendly)
const salinan = JSON.parse(JSON.stringify({ a: { b: 1 } }));
salinan.a.b = 99;
console.log(salinan.a.b); // → 99

Kesalahan umum

Menulis JSON dengan kutip tunggal atau tanpa kutip di key. Itu object JavaScript, bukan JSON valid. JSON wajib kutip ganda untuk key dan string.
Lupa bahwa JSON.stringify membuang undefined dan function, serta mengubah Date jadi string. Setelah JSON.parse, dibuat menjadi string, bukan Date. Ubah balik dengan new Date(teks) kalau perlu.
JSON.parse tanpa try...catch untuk data dari luar. Satu karakter salah membuat seluruh program crash.
Mengakses index di luar batas atau key yang salah ketik. Hasilnya undefined diam-diam, lalu error belakangan saat undefined.nama diakses. Cek data dengan console.log dan gunakan ?. untuk bagian opsional.
Mencampur method yang mengubah dan tidak mengubah array. push, splice, sort mengubah array asli. slice, map, filter, spread tidak. Kalau data asli harus utuh, pakai versi yang tidak mengubah.

Latihan

Mudah, Buat object buku dengan property judul, penulis, tahun, dan genre (array). Tambahkan property halaman, ubah tahun, lalu cetak judul dan genre kedua.
Sedang, Diberikan array of objects nilai siswa [{ nama: "Ani", nilai: [80, 90] }, { nama: "Bayu", nilai: [70, 65] }, { nama: "Cindy", nilai: [95, 88] }]. Buat array baru berisi { nama, rata } dan cetak nama siswa dengan rata-rata tertinggi.
Menantang, Buat function keranjangKeJson(keranjang) yang menerima array { nama, harga, qty } dan mengembalikan teks JSON rapi berisi { item, totalItem, totalHarga }. Lalu buat function bacaKeranjang(teks) yang mem-parse JSON tersebut dan mengembalikan null kalau teksnya tidak valid.

Lihat solusi

const buku = {
  judul: "Laskar Pelangi",
  penulis: "Andrea Hirata",
  tahun: 2004,
  genre: ["Novel", "Inspirasi"],
};
buku.halaman = 529;
buku.tahun = 2005;
console.log(buku.judul, buku.genre[1]); // → Laskar Pelangi Inspirasi

const siswa = [
  { nama: "Ani", nilai: [80, 90] },
  { nama: "Bayu", nilai: [70, 65] },
  { nama: "Cindy", nilai: [95, 88] },
];

const rekap = siswa.map((s) => ({
  nama: s.nama,
  rata: s.nilai.reduce((a, b) => a + b, 0) / s.nilai.length,
}));
console.log(rekap);
// → [ { nama: 'Ani', rata: 85 }, { nama: 'Bayu', rata: 67.5 }, { nama: 'Cindy', rata: 91.5 } ]

const terbaik = rekap.reduce((best, s) => (s.rata > best.rata ? s : best));
console.log("Terbaik:", terbaik.nama); // → Terbaik: Cindy

Di sini reduce tanpa nilai awal aman karena rekap pasti berisi data. Kalau array-nya bisa kosong, cek dulu panjangnya.

function keranjangKeJson(keranjang) {
  const totalItem = keranjang.reduce((n, i) => n + i.qty, 0);
  const totalHarga = keranjang.reduce((n, i) => n + i.harga * i.qty, 0);
  return JSON.stringify({ item: keranjang, totalItem, totalHarga }, null, 2);
}

function bacaKeranjang(teks) {
  try {
    return JSON.parse(teks);
  } catch {
    return null;
  }
}

const json = keranjangKeJson([
  { nama: "Buku", harga: 45000, qty: 2 },
  { nama: "Pena", harga: 5000, qty: 3 },
]);
console.log(json);
// → {
// →   "item": [ ...dua item... ],
// →   "totalItem": 5,
// →   "totalHarga": 105000
// → }

console.log(bacaKeranjang(json).totalHarga); // → 105000
console.log(bacaKeranjang("{rusak"));         // → null

Ringkasan

Object untuk satu hal dengan banyak atribut (key: value). Array untuk daftar berurutan (index mulai 0).
Akses data bersarang dari luar ke dalam: toko.produk[0].varian[2]. Gunakan ?. untuk bagian opsional.
Kenali method array yang mengubah (push, pop, splice, sort) dan yang tidak mengubah (slice, map, filter, spread).
JSON adalah format teks dengan aturan ketat: kutip ganda, tanpa koma akhir, tanpa function/undefined.
JSON.stringify mengubah object ke teks, JSON.parse mengubah teks ke object. Bungkus parse dengan try...catch.