Bayangkan Anda sedang membangun aplikasi toko online. Anda perlu menyimpan daftar produk, data profil pengguna, dan keranjang belanja. Menyimpan semua data di variabel terpisah? Itu tidak praktis.

Arrays dan objects adalah dua struktur data fundamental yang menjadi solusi untuk masalah ini. Array menyimpan data dalam format list, sementara objects menyimpan data dalam format key-value. Keduanya sering digunakan bersamaan untuk mengelola data kompleks.

Di artikel ini, kita akan mempelajari cara membuat dan menggunakan arrays, berbagai methods untuk memanipulasi array, objects dan properties-nya, destructuring, spread operator, dan JSON. Setelah membaca ini, Anda akan mampu bekerja dengan data kompleks dalam JavaScript.

1. Array: Menyimpan Data dalam List

Array adalah kumpulan data yang tersusun dalam index urutan. Setiap elemen dalam array memiliki posisi yang bisa diakses melalui index, mulai dari 0.

// Membuat array
const buah = ["apel", "mangga", "jeruk", "mangga"];

// Akses elemen berdasarkan index
console.log(buah[0]);  // Output: apel
console.log(buah[2]);  // Output: jeruk

// Panjang array
console.log(buah.length);  // Output: 4

// Mengubah elemen
buah[1] = "pisang";
console.log(buah);  // Output: ["apel", "pisang", "jeruk", "mangga"]

Array bisa menyimpan berbagai tipe data — string, number, boolean, bahkan array lain dan objects. Tidak ada batasan tipe data dalam satu array.

// Array bisa menyimpan berbagai tipe data
const campur = [1, "dua", true, null, { nama: "Dika" }];
console.log(campur[4].nama);  // Output: Dika

2. Array Methods: Tools untuk Manipulasi Array

JavaScript menyediakan berbagai methods yang memudahkan manipulasi array. Berikut adalah methods yang paling sering digunakan:

Menambah & Menghapus Elemen

const fruits = ["apel", "mangga"];

// push() — tambah di akhir
fruits.push("jeruk");
console.log(fruits);  // Output: ["apel", "mangga", "jeruk"]

// pop() — hapus dari akhir
const terakhir = fruits.pop();
console.log(terakhir);  // Output: jeruk

// unshift() — tambah di awal
fruits.unshift("pisang");
console.log(fruits);  // Output: ["pisang", "apel", "mangga"]

// shift() — hapus dari awal
const pertama = fruits.shift();
console.log(pertama);  // Output: pisang

Iterating (Melakukan Sesuatu pada Setiap Elemen)

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

// forEach() — eksekusi function pada setiap elemen
angka.forEach((angka, index) => {
  console.log(`Index ${index}: ${angka}`);
});
// Output:
// Index 0: 10
// Index 1: 20
// Index 2: 30
// Index 3: 40
// Index 4: 50

map(), filter(), dan find()

const angka = [1, 2, 3, 4, 5, 6, 7, 8];

// map() — transformasi setiap elemen, menghasilkan array baru
const kuadrat = angka.map(a => a * a);
console.log(kuadrat);  // Output: [1, 4, 9, 16, 25, 36, 49, 64]

// filter() — ambil elemen yang memenuhi kondisi
const ganjil = angka.filter(a => a % 2 !== 0);
console.log(ganjil);  // Output: [1, 3, 5, 7]

// find() — cari satu elemen pertama yang memenuhi kondisi
const pertamaGanjil = angka.find(a => a % 2 !== 0);
console.log(pertamaGanjil);  // Output: 1

reduce()

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

// reduce() — akumulasi semua elemen jadi satu nilai
const total = angka.reduce((akumulator, angka) => {
  return akumulator + angka;
}, 0);

console.log(total);  // Output: 15

some() dan every()

const umur = [18, 22, 15, 30, 12];

// some() — cek apakah ADA setidaknya satu elemen yang memenuhi kondisi
const adaAnak = umur.some(u => u < 18);
console.log(adaAnak);  // Output: true

// every() — cek apakah SEMUA elemen memenuhi kondisi
const semuaDewasa = umur.every(u => u >= 18);
console.log(semuaDewasa);  // Output: false

3. Object: Menyimpan Data dengan Key-Value

Object adalah struktur data yang menyimpan data dalam format key-value. Berbeda dengan array yang menggunakan index, object menggunakan key (atau property) untuk mengakses nilainya.

// Membuat object
const siswa = {
  nama: "Dika",
  umur: 22,
  jurusan: "Teknik Informatika",
  lulus: false
};

// Akses property dengan dot notation
console.log(siswa.nama);  // Output: Dika

// Akses property dengan bracket notation
console.log(siswa["jurusan"]);  // Output: Teknik Informatika

// Mengubah property
siswa.umur = 23;
console.log(siswa.umur);  // Output: 23

// Menambah property baru
siswa.nim = "12345678";
console.log(siswa.nim);  // Output: 12345678

// Menghapus property
delete siswa.lulus;
console.log(siswa);  // Output: { nama: "Dika", umur: 23, jurusan: "Teknik Informatika", nim: "12345678" }

Bracket vs Dot Notation

Dot notation (siswa.nama) lebih simpel dan sering digunakan. Bracket notation (siswa["nama"]) diperlukan ketika key dinamis atau mengandung spasi:

const data = {
  "nama lengkap": "Andika Rekatias",
  umur: 22
};

// Bracket notation untuk key dengan spasi
console.log(data["nama lengkap"]);  // Output: Andika Rekatias

// Bracket notation untuk key dinamis
const key = "umur";
console.log(data[key]);  // Output: 22

4. Iterating Object

Untuk iterasi pada object, kita bisa menggunakan beberapa methods:

const mahasiswa = {
  nama: "Dika",
  umur: 22,
  jurusan: "Teknik Informatika"
};

// Object.keys() — array of keys
console.log(Object.keys(mahasiswa));  // Output: ["nama", "umur", "jurusan"]

// Object.values() — array of values
console.log(Object.values(mahasiswa));  // Output: ["Dika", 22, "Teknik Informatika"]

// Object.entries() — array of [key, value] pairs
console.log(Object.entries(mahasiswa));
// Output: [["nama", "Dika"], ["umur", 22], ["jurusan", "Teknik Informatika"]]

// for...in loop
for (const key in mahasiswa) {
  console.log(`${key}: ${mahasiswa[key]}`);
}
// Output:
// nama: Dika
// umur: 22
// jurusan: Teknik Informatika

5. Destructuring: Unpacking Data dengan Elegan

Destructuring memungkinkan Anda mengambil nilai dari array atau object dan menyimpannya ke variabel secara langsung, tanpa perlu menulis satu per satu.

Array Destructuring

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

// Tanpa destructuring
const pertama = buah[0];
const kedua = buah[1];

// Dengan destructuring
const [a, b, c] = buah;
console.log(a);  // Output: apel
console.log(b);  // Output: mangga
console.log(c);  // Output: jeruk

// Skip elemen
const [satu, , tiga] = buah;
console.log(satu);  // Output: apel
console.log(tiga);  // Output: jeruk

// Rest element
const [first, ...sisanya] = buah;
console.log(first);   // Output: apel
console.log(sisanya); // Output: ["mangga", "jeruk"]

Object Destructuring

const siswa = {
  nama: "Dika",
  umur: 22,
  jurusan: "Teknik Informatika",
  kota: "Jakarta"
};

// Destructuring object
const { nama, umur, jurusan } = siswa;
console.log(nama);     // Output: Dika
console.log(umur);     // Output: 22
console.log(jurusan);  // Output: Teknik Informatika

// Ganti nama variabel
const { nama: namaSiswa, kota: asalKota } = siswa;
console.log(namaSiswa);  // Output: Dika
console.log(asalKota);   // Output: Jakarta

// Default value
const { usia = 0, gender = "tidak diketahui" } = siswa;
console.log(usia);     // Output: 0
console.log(gender);   // Output: tidak diketahui

6. Spread Operator: Menyebar Data

Spread operator (...) memungkinkan Anda menyebar elemen array atau object ke tempat lain. Sangat berguna untuk menggabungkan atau menyalin data.

Spread pada Array

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Menggabungkan array
const gabungan = [...arr1, ...arr2];
console.log(gabungan);  // Output: [1, 2, 3, 4, 5, 6]

// Menyalin array
const salinan = [...arr1];
console.log(salinan);  // Output: [1, 2, 3]

// Menambah elemen
const denganBaru = [...arr1, 99, 100];
console.log(denganBaru);  // Output: [1, 2, 3, 99, 100]

Spread pada Object

const profil = { nama: "Dika", umur: 22 };
const lokasi = { kota: "Jakarta", negara: "Indonesia" };

// Menggabungkan object
const lengkap = { ...profil, ...lokasi };
console.log(lengkap);
// Output: { nama: "Dika", umur: 22, kota: "Jakarta", negara: "Indonesia" }

// Menambah/mengubah property
const updated = { ...profil, umur: 23, email: "[email protected]" };
console.log(updated);
// Output: { nama: "Dika", umur: 23, email: "[email protected]" }

7. JSON: Format Pertukaran Data Universal

JSON (JavaScript Object Notation) adalah format teks untuk pertukaran data antara client dan server. Hampir semua API mengembalikan data dalam format JSON.

Konversi ke JSON

const produk = {
  id: 1,
  nama: "Laptop ASUS",
  harga: 12000000,
  spesifikasi: {
    ram: "16GB",
    storage: "512GB SSD"
  }
};

// Konversi object ke JSON string
const json = JSON.stringify(produk);
console.log(json);
// Output: {"id":1,"nama":"Laptop ASUS","harga":12000000,"spesifikasi":{"ram":"16GB","storage":"512GB SSD"}}

// JSON string yang formatted (mudah dibaca)
const jsonFormatted = JSON.stringify(produk, null, 2);
console.log(jsonFormatted);

Konversi dari JSON

const jsonString = '{"nama":"Dika","umur":22,"hobi":["coding","gaming"]}';

// Konversi JSON string ke object
const data = JSON.parse(jsonString);
console.log(data.nama);    // Output: Dika
console.log(data.hobi[0]); // Output: coding

Array of Objects: Kombinasi Powerful

const mahasiswa = [
  { nama: "Dika", nilai: [85, 90, 88] },
  { nama: "Budi", nilai: [78, 82, 95] },
  { nama: "Ani",  nilai: [92, 88, 91] }
];

// Hitung rata-rata setiap mahasiswa
const denganRataRata = mahasiswa.map(m => ({
  ...m,
  rataRata: m.nilai.reduce((a, b) => a + b, 0) / m.nilai.length
}));

console.log(denganRataRata);
// Output:
// [
//   { nama: "Dika", nilai: [85, 90, 88], rataRata: 87.67 },
//   { nama: "Budi", nilai: [78, 82, 95], rataRata: 85 },
//   { nama: "Ani",  nilai: [92, 88, 91], rataRata: 90.33 }
// ]

// Filter mahasiswa dengan rata-rata di atas 87
const terbaik = denganRataRata.filter(m => m.rataRata > 87);
console.log(terbaik.map(m => m.nama));  // Output: ["Dika", "Ani"]

---

Recap

Konsep	Penjelasan
Array	Kumpulan data berurutan, diakses dengan index
Array Methods	push, pop, map, filter, reduce, forEach, some, every
Object	Struktur data key-value
Dot vs Bracket Notation	Akses property: dot untuk static, bracket untuk dinamis
Object Iteration	Object.keys(), Object.values(), Object.entries(), for…in
Array Destructuring	Unpacking array ke variabel: const [a, b] = arr
Object Destructuring	Unpacking object ke variabel: const { a, b } = obj
Spread Operator	Menyebar array/object: ...
JSON.stringify()	Konversi object ke JSON string
JSON.parse()	Konversi JSON string ke object

---

Penutup

Arrays dan objects adalah dua pilar data management dalam JavaScript. Dengan memahami cara membuat, memanipulasi, dan menggabungkan keduanya, Anda akan mampu bekerja dengan data kompleks dalam skenario nyata — dari mengelola data API hingga membangun aplikasi full-stack.

Di artikel selanjutnya, kita akan membahas DOM Manipulation — cara JavaScript berinteraksi dengan elemen-elemen di halaman web.

Selamat belajar! 🚀