Array adalah wadah untuk banyak nilai sekaligus, disimpan berurutan. Anggap seperti playlist: setiap lagu punya nomor urut, dan nomor urut pertama adalah 0, bukan 1.

const buah = ["apel", "jeruk", "mangga"];

console.log(buah[0]);            // apel
console.log(buah[2]);            // mangga
console.log(buah.length);        // 3
console.log(buah[buah.length - 1]); // mangga (elemen terakhir)
console.log(buah[5]);            // undefined (index tidak ada)

Array di JavaScript boleh berisi tipe campuran ([1, "dua", true]), tapi dalam praktik sebaiknya isinya sejenis supaya mudah diolah. Mengakses index yang tidak ada tidak memicu error, hasilnya undefined. Sejak ES2022 ada juga buah.at(-1) untuk mengambil elemen terakhir dengan lebih ringkas.

Walaupun dideklarasikan dengan const, isi array tetap bisa diubah. const hanya melarang variabel diisi array lain, bukan mengubah isinya.

const antrean = ["Ayu", "Bima"];

antrean.push("Citra");     // ["Ayu", "Bima", "Citra"]
antrean.unshift("Dodi");   // ["Dodi", "Ayu", "Bima", "Citra"]
const keluar = antrean.shift();
console.log(keluar);       // Dodi
antrean.pop();
console.log(antrean);      // ["Ayu", "Bima"]

Keempat method ini mengubah array aslinya (istilahnya mutating). Ingat ini, karena method lain di bawah justru tidak mengubah aslinya.

Dua nama ini mirip, tapi sifatnya bertolak belakang.

• slice(awal, akhir) menyalin sebagian array. Index akhir tidak ikut. Array asli tetap utuh.
• splice(awal, jumlahHapus, ...elemenBaru) memotong langsung array asli: menghapus, menyisipkan, atau keduanya.

const angka = [10, 20, 30, 40, 50];

const potong = angka.slice(1, 3);
console.log(potong); // [20, 30]
console.log(angka);  // [10, 20, 30, 40, 50] (utuh)

const dihapus = angka.splice(1, 2, 99);
console.log(dihapus); // [20, 30]
console.log(angka);   // [10, 99, 40, 50] (berubah)

Cara mengingat: splice punya huruf p seperti potong, jadi dia memotong array aslinya. slice cuma mengambil irisan salinan, seperti memotret sepotong kue tanpa memakannya.

Method berikut menerima callback, fungsi yang dijalankan untuk setiap elemen. Semuanya tidak mengubah array asli.

const harga = [15000, 40000, 8000, 25000];

const diskon = harga.map(h => h * 0.9);
console.log(diskon); // [13500, 36000, 7200, 22500]

const mahal = harga.filter(h => h > 20000);
console.log(mahal);  // [40000, 25000]

const total = harga.reduce((jumlah, h) => jumlah + h, 0);
console.log(total);  // 88000

const pertamaMurah = harga.find(h => h < 10000);
console.log(pertamaMurah); // 8000

console.log(harga.includes(40000)); // true

• map mengubah setiap elemen, hasilnya array baru dengan panjang sama.
• filter menyaring, hasilnya array baru yang bisa lebih pendek.
• reduce meringkas seluruh array menjadi satu nilai. Parameter pertama callback adalah akumulator (hasil sementara), dan 0 di akhir adalah nilai awalnya.
• find mengembalikan elemen pertama yang cocok, atau undefined kalau tidak ada.
• includes (ES2016) hanya menjawab true atau false.

Cara membaca reduce langkah demi langkah: mulai dari 0, tambah 15000 jadi 15000, tambah 40000 jadi 55000, tambah 8000 jadi 63000, tambah 25000 jadi 88000.

Kalau array cocok untuk daftar, object cocok untuk mendeskripsikan satu hal dengan banyak sifat. Datanya disimpan sebagai pasangan key: value, seperti formulir biodata.

const mhs = {
  nama: "Sinta",
  nim: "021",
  "kota asal": "Bandung",
  sapa() {
    return "Halo, " + this.nama;
  },
};

console.log(mhs.nama);         // Sinta (dot notation)
console.log(mhs["nim"]);       // 021 (bracket notation)
console.log(mhs["kota asal"]); // Bandung
console.log(mhs.sapa());       // Halo, Sinta

Di dalam method, this merujuk ke object yang memanggilnya, jadi this.nama berarti mhs.nama.

Titik atau kurung?

Dot notation lebih ringkas dan dipakai sehari-hari. Bracket notation wajib dipakai saat nama properti mengandung spasi atau tanda minus, atau saat nama propertinya disimpan di variabel:

const kolom = "nim";
console.log(mhs[kolom]); // 021
console.log(mhs.kolom);  // undefined (mencari properti bernama "kolom")

Menambah, mengubah, menghapus

mhs.jurusan = "Informatika"; // menambah properti baru
mhs.nim = "022";             // mengubah nilai
delete mhs["kota asal"];     // menghapus properti

console.log("jurusan" in mhs); // true

Object tidak bisa langsung di-map seperti array. Tiga fungsi ini mengubahnya menjadi array dulu:

const nilai = { mtk: 85, ipa: 90, bing: 78 };

console.log(Object.keys(nilai));    // ["mtk", "ipa", "bing"]
console.log(Object.values(nilai));  // [85, 90, 78]
console.log(Object.entries(nilai)); // [["mtk", 85], ["ipa", 90], ["bing", 78]]

for (const [mapel, skor] of Object.entries(nilai)) {
  console.log(`${mapel}: ${skor}`);
}
// mtk: 85
// ipa: 90
// bing: 78

Data dari API atau database hampir selalu berbentuk array berisi object. Di sinilah semua yang kamu pelajari tadi bertemu.

const produk = [
  { nama: "Kaos", harga: 80000, stok: 5 },
  { nama: "Topi", harga: 45000, stok: 0 },
  { nama: "Tas", harga: 150000, stok: 2 },
];

const tersedia = produk.filter(p => p.stok > 0).map(p => p.nama);
console.log(tersedia); // ["Kaos", "Tas"]

const nilaiGudang = produk.reduce((t, p) => t + p.harga * p.stok, 0);
console.log(nilaiGudang); // 700000

console.log(produk.find(p => p.nama === "Topi").harga); // 45000

Rantai filter lalu map dibaca seperti kalimat: "ambil produk yang stoknya ada, lalu ambil namanya".

• Menganggap index mulai dari 1. Elemen pertama ada di [0], elemen terakhir di [length - 1].
• Tertukar slice dan splice. splice mengubah array asli, jadi data bisa hilang tanpa sadar.
• Lupa return di callback berkurung kurawal. harga.map(h => { h * 2 }) menghasilkan array berisi undefined.
• reduce tanpa nilai awal. Pada array kosong ini memicu TypeError; biasakan memberi nilai awal seperti 0.
• Memakai dot notation untuk key di variabel. obj.kolom mencari properti bernama "kolom", bukan isi variabelnya.