FluentStack

Array Dasar untuk Data UI

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

Array Dasar untuk Data UI

Belajar menyimpan beberapa value yang sejenis di dalam array untuk kebutuhan UI.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami array sebagai list value
  • Membaca item array dengan index
  • Memakai length untuk mengetahui jumlah item
JavaScriptArraysUI Data

Isi lesson

7 blok
  1. 1.
    UI sering punya data berbentuk daftarBelum selesaiWajib
  2. 2.
    Array menyimpan value secara berurutanBelum selesaiWajib
  3. 3.
    List label navigasiBelum selesaiWajib
  4. 4.
    Item pertama bukan index 1Belum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

UI sering punya data berbentuk daftar

Wajib

Di module sebelumnya, kamu menyimpan satu value di satu variable. Di halaman web nyata, data sering berbentuk daftar: label navigasi, tag artikel, nama lesson, atau item checklist. Array membantu JavaScript menyimpan beberapa value di satu tempat.

Bagian ini memengaruhi progres lesson.

Array menyimpan value secara berurutan

Wajib

Array ditulis dengan kurung siku. Setiap item punya posisi yang disebut index. JavaScript mulai menghitung index dari 0, jadi item pertama berada di index 0. Untuk mengetahui jumlah item, kamu bisa membaca property length.

Bagian ini memengaruhi progres lesson.

List label navigasi

Wajib
js
const navigationLabels = ["Dashboard", "Lessons", "Profile"];

console.log(navigationLabels[0]);
console.log(navigationLabels.length);

navigationLabels menyimpan tiga string. navigationLabels[0] membaca item pertama, yaitu "Dashboard". navigationLabels.length memberi jumlah item di dalam array.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Item pertama bukan index 1

Saat baru belajar array, kesalahan yang sering muncul adalah membaca item pertama dengan index 1. Di JavaScript, item pertama ada di index 0. Index 1 berarti item kedua.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kalau kamu ingin menyimpan tiga label navigasi dalam satu variable, struktur data apa yang paling cocok?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Menyusun list label UI

Latihan membuat array sederhana dan membaca item serta jumlah datanya.

Tujuan awal: Fokus di tab JS. HTML dan CSS hanya memberi konteks preview.

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

Tombol selesai aktif setelah semua validasi wajib lolos.

3 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Array menyimpan beberapa value di satu variable.
  • Array cocok untuk data UI yang berbentuk daftar.
  • Index array dimulai dari 0.
  • length memberi jumlah item di dalam array.
  • Berikutnya, kamu akan belajar object untuk menyimpan beberapa informasi tentang satu item.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: UI sering punya data berbentuk daftar.

Memuat progresReview module