FluentStack

Array of Objects

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 4: JavaScript FundamentalsBeginner40 menitBahasa Indonesia

Array of Objects

Belajar menyimpan beberapa item UI terstruktur dengan array of objects.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami array of objects sebagai list item terstruktur
  • Membaca property dari object di dalam array
  • Mengenali pola data yang siap dipakai untuk card atau list UI
JavaScriptArray of ObjectsData Modeling

Isi lesson

7 blok
  1. 1.
    List UI biasanya berisi item yang terstrukturBelum selesaiWajib
  2. 2.
    Setiap object mewakili satu itemBelum selesaiWajib
  3. 3.
    List lesson cardBelum selesaiWajib
  4. 4.
    Jangan memisah data yang sebenarnya satu itemBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

List UI biasanya berisi item yang terstruktur

Wajib

Setelah memahami array dan object secara terpisah, kamu bisa menggabungkannya. Array of objects adalah array yang berisi beberapa object. Pola ini sering dipakai untuk data card, daftar task, daftar produk, daftar lesson, dan menu aplikasi.

Bagian ini memengaruhi progres lesson.

Setiap object mewakili satu item

Wajib

Bayangkan satu card lesson sebagai satu object. Kalau halaman punya beberapa card, kamu bisa menyimpannya sebagai array. Dengan begitu, setiap item tetap punya property sendiri seperti title, duration, dan required.

Bagian ini memengaruhi progres lesson.

List lesson card

Wajib
js
const lessonCards = [
  {
    title: "Array Dasar untuk Data UI",
    duration: 30,
    required: true,
  },
  {
    title: "Object Dasar untuk Satu Item",
    duration: 35,
    required: true,
  },
];

console.log(lessonCards[0].title);

lessonCards adalah array. Item pertamanya adalah object. lessonCards[0].title membaca property title dari object pertama.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan memisah data yang sebenarnya satu item

Kalau title, duration, dan required adalah informasi untuk card yang sama, simpan dalam satu object. Hindari membuat tiga array terpisah yang harus dicocokkan manual berdasarkan index, karena mudah tidak sinkron.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Struktur mana yang paling cocok untuk menyimpan beberapa card lesson, masing-masing punya title dan duration?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Menyusun array of objects

Latihan membuat list data terstruktur untuk beberapa card lesson.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Array of objects menyimpan beberapa item yang masing-masing punya property.
  • Pola ini sering dipakai untuk list card, task, produk, atau lesson.
  • Baca item dengan index, lalu baca property dengan dot notation.
  • Simpan data yang saling terkait di object yang sama.
  • Berikutnya, kamu akan memakai map dan filter untuk membentuk data sebelum ditampilkan.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: List UI biasanya berisi item yang terstruktur.

Memuat progresReview module