Dalam dunia nyata, data sering kali kompleks dan saling bertumpuk. JavaScript memungkinkan kita untuk menyusun data secara bertingkat dengan nested array dan nested object. Ini sangat berguna untuk menggambarkan struktur seperti daftar siswa dengan nilai, data produk dengan kategori, atau komentar berantai dalam forum.
🔹 Apa Itu Nested Array?
Nested array adalah array yang berisi array lain di dalamnya.
1let angka = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7console.log(angka[1][2]); // Output: 6
8
1let angka = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7console.log(angka[1][2]); // Output: 6
8
Struktur seperti ini sering digunakan untuk menyimpan data berbentuk tabel atau grid.
🔹 Apa Itu Nested Object?
Nested object adalah object yang memiliki properti berupa object lain.
1let siswa = {
2 nama: "Rian",
3 alamat: {
4 jalan: "Jl. Merpati",
5 kota: "Surabaya",
6 kodePos: 60123
7 }
8};
9
10console.log(siswa.alamat.kota); // Output: Surabaya
11
1let siswa = {
2 nama: "Rian",
3 alamat: {
4 jalan: "Jl. Merpati",
5 kota: "Surabaya",
6 kodePos: 60123
7 }
8};
9
10console.log(siswa.alamat.kota); // Output: Surabaya
11
🔹 Kombinasi: Array dalam Object
Kamu bisa menyimpan array di dalam object:
1let mahasiswa = {
2 nama: "Sinta",
3 nilai: [80, 90, 85]
4};
5
6console.log(mahasiswa.nilai[1]); // Output: 90
7
1let mahasiswa = {
2 nama: "Sinta",
3 nilai: [80, 90, 85]
4};
5
6console.log(mahasiswa.nilai[1]); // Output: 90
7
🔹 Kombinasi: Object dalam Array
Kamu juga bisa menyimpan object dalam array—ini umum digunakan untuk menyimpan daftar data.
1let daftarProduk = [
2 { nama: "Laptop", harga: 10000000 },
3 { nama: "Mouse", harga: 200000 },
4 { nama: "Keyboard", harga: 500000 }
5];
6
7console.log(daftarProduk[2].nama); // Output: Keyboard
8
1let daftarProduk = [
2 { nama: "Laptop", harga: 10000000 },
3 { nama: "Mouse", harga: 200000 },
4 { nama: "Keyboard", harga: 500000 }
5];
6
7console.log(daftarProduk[2].nama); // Output: Keyboard
8
🔹 Kombinasi Lebih Dalam: Nested Object dalam Array dalam Object 😄
Struktur kompleks seperti ini biasa digunakan dalam aplikasi nyata:
1let toko = {
2 nama: "Toko Online",
3 produk: [
4 {
5 nama: "Buku",
6 stok: 20,
7 supplier: {
8 nama: "CV Cerdas",
9 alamat: "Jakarta"
10 }
11 },
12 {
13 nama: "Pulpen",
14 stok: 100,
15 supplier: {
16 nama: "PT Tulis",
17 alamat: "Bandung"
18 }
19 }
20 ]
21};
22
23console.log(toko.produk[0].supplier.nama); // Output: CV Cerdas
24
1let toko = {
2 nama: "Toko Online",
3 produk: [
4 {
5 nama: "Buku",
6 stok: 20,
7 supplier: {
8 nama: "CV Cerdas",
9 alamat: "Jakarta"
10 }
11 },
12 {
13 nama: "Pulpen",
14 stok: 100,
15 supplier: {
16 nama: "PT Tulis",
17 alamat: "Bandung"
18 }
19 }
20 ]
21};
22
23console.log(toko.produk[0].supplier.nama); // Output: CV Cerdas
24
🔹 Menelusuri Data Bersarang
Gunakan kombinasi loop dan metode seperti for, forEach(), atau map() untuk menjelajahi struktur bersarang:
1toko.produk.forEach((item) => {
2 console.log(item.nama + " - " + item.supplier.alamat);
3});
4
1toko.produk.forEach((item) => {
2 console.log(item.nama + " - " + item.supplier.alamat);
3});
4
📌 Tips Saat Menggunakan Struktur Bersarang
- Jangan buat terlalu dalam jika tidak diperlukan. Struktur data yang terlalu kompleks bisa menyulitkan debugging.
- Pastikan properti yang kamu akses memang ada (gunakan optional chaining
?. bila perlu).
- Konsisten dalam menamai key agar mudah dibaca dan dikelola.
Dengan memahami nested array dan nested object, kamu akan lebih siap dalam menangani data nyata yang kompleks, baik dari API, form input, hingga manipulasi DOM atau UI modern.