Array dan objek

Idenya

Data sungguhan datang dalam dua bentuk: daftar berisi banyak hal (produk di keranjang) dan record yang mendeskripsikan satu hal (nama, harga, dan stok sebuah produk). JavaScript punya struktur untuk masing-masing: array untuk daftar dan objek untuk record. Gabungkan keduanya (array berisi objek) dan kamu bisa merepresentasikan hampir semua data yang ditangani aplikasi web, termasuk JSON dari API.

Kalau kamu tahu Python: array itu seperti list, dan objek seperti dictionary.

Array

Keranjang belanja adalah daftar barang yang bertambah dan berkurang selama pelanggan berbelanja. Di JavaScript, daftar berurutan seperti itu disebut array, ditulis dengan kurung siku. Cara kerjanya mirip sekali dengan list Python:

const cart = ["Arabica Gayo", "French Press"];
cart.push("Grinder");              // add to the end
console.log(cart.length, cart[0], cart[cart.length - 1]);

const last = cart.pop();           // remove from the end
console.log(last, cart);
console.log(cart.includes("French Press"), cart.indexOf("Grinder"));

3 Arabica Gayo Grinder
Grinder ["Arabica Gayo", "French Press"]
true -1

• Indeks dimulai dari 0; item terakhir ada di length - 1. Indeks negatif tidak berfungsi (cart[-1] bernilai undefined), tetapi cart.at(-1) berfungsi.
• push/pop menambah dan menghapus di akhir; unshift/shift di awal.
• includes mengecek keanggotaan; indexOf mengembalikan posisinya atau -1.
• const mencegah variabel di-assign ulang, tetapi array-nya sendiri tetap bisa berubah. const berarti "selalu array ini", bukan "array ini tidak pernah berubah".

Objek

Sebuah produk bukan cuma satu nilai. Produk punya nama, harga, status stok, beberapa tag. Objek mengelompokkan semua fakta itu di bawah satu nama, masing-masing dengan labelnya sendiri, mirip dictionary di Python:

const product = {
  name: "Arabica Gayo",
  price: 95000,
  inStock: true,
  tags: ["arabica", "aceh"],
};

console.log(product.name, product.price);
console.log(product["inStock"]);

product.price = 89000;             // update
product.weightGrams = 250;         // add a new property
delete product.inStock;            // remove one
console.log(product);

const field = "price";
console.log(product[field]);       // bracket notation with a variable
console.log(product.rating);       // missing property

Arabica Gayo 95000
true
{ name: "Arabica Gayo", price: 89000, tags: ["arabica", "aceh"], weightGrams: 250 }
89000
undefined

• Property adalah pasangan key: value. Baca dengan titik (product.name) atau kurung siku (product["name"]). Gunakan kurung siku saat key-nya berada di sebuah variabel.
• Membaca property yang tidak ada menghasilkan undefined, bukan error (Python akan memunculkan KeyError).
• Koma setelah property terakhir diperbolehkan dan menjaga diff tetap rapi.

Array berisi objek

Gabungkan keduanya dan kamu mendapat bentuk sebagian besar data sungguhan: daftar berisi hal-hal, di mana setiap hal punya beberapa property. Katalog produk adalah array berisi objek-objek produk, dan kamu bisa melakukan loop atasnya untuk menghitung hal seperti nilai seluruh stok:

const products = [
  { name: "Arabica Gayo", price: 95000, stock: 12 },
  { name: "Toraja Kalosi", price: 110000, stock: 0 },
  { name: "French Press", price: 245000, stock: 4 },
];

let stockValue = 0;
for (const p of products) {
  stockValue += p.price * p.stock;
}
console.log(products.length, products[1].name, stockValue);

3 Toraja Kalosi 2120000

Destructuring dan spread

Destructuring mengeluarkan nilai-nilai ke dalam variabel; spread (...) menyalinnya ke array atau objek baru:

const product = { name: "Moka Pot", price: 320000, stock: 6 };
const { name, price } = product;
console.log(name, price);

const [first, second] = ["Gayo", "Toraja", "Kintamani"];
console.log(first, second);

const discounted = { ...product, price: 288000 };   // copy, then override
console.log(discounted.price, product.price);

const more = [...["Gayo", "Toraja"], "Kintamani"];
console.log(more);
console.log(Object.keys(product), Object.entries(product)[0]);

Moka Pot 320000
Gayo Toraja
288000 320000
["Gayo", "Toraja", "Kintamani"]
["name", "price", "stock"] ["name", "Moka Pot"]

{ ...product, price: 288000 } membuat objek baru, membiarkan yang asli tidak tersentuh. Kebiasaan itu (salin lalu ubah alih-alih mengubah di tempat) mencegah seluruh golongan bug di mana satu bagian kode mengubah data yang masih dipakai bagian lain.

Mengapa ini penting untuk kode yang bersih

Memilih bentuk yang tepat membuat sisa kodenya sederhana. Array berisi objek produk bisa di-loop, disaring, diurutkan, dan ditampilkan dengan beberapa baris; data yang sama yang tersebar di array-array paralel (names, prices, stocks) rusak begitu satu array tidak sejajar lagi. Kelompokkan data yang memang satu kesatuan ke dalam objek.

Rangkuman

• Array: [a, b], arr[0], arr.length, push/pop, includes, indexOf, at(-1).
• Objek: { key: value }, obj.key / obj["key"], tambah dengan meng-assign, delete obj.key.
• Indeks atau property yang tidak ada → undefined.
• const mencegah assign ulang, bukan perubahan isi.
• Destructuring const { a, b } = obj, const [x, y] = arr; spread [...arr], { ...obj, key: newValue }.
• Object.keys, Object.values, Object.entries.