map, filter, dan Data Transformasi Dasar
Belajar memakai map dan filter untuk membentuk data sederhana sebelum dipakai UI.
Tujuan belajar
- Memahami transformasi data untuk kebutuhan UI
- Memakai map untuk membuat array baru dari array lama
- Memakai filter untuk mengambil item yang memenuhi kondisi
Isi lesson
8 blok- 1.Data mentah sering perlu dibentuk duluBelum selesaiWajib
- 2.map membuat array baruBelum selesaiWajib
- 3.filter memilih sebagian itemBelum selesaiWajib
- 4.Membentuk data untuk UIBelum selesaiWajib
- 5.Pilih method sesuai tujuanBelum selesaiWajib
- 6.Cek pemahamanBelum selesaiWajib
- 7.Coding practiceBelum selesaiWajib
- 8.RingkasanBelum selesaiWajib
Data mentah sering perlu dibentuk dulu
WajibArray of objects membuat data lebih rapi, tetapi UI sering tidak memakai data mentah apa adanya. Kadang kamu hanya butuh title, kadang hanya butuh item wajib, kadang perlu membuat label singkat. Transformasi data adalah proses membentuk data agar siap dipakai UI.
Bagian ini memengaruhi progres lesson.
map membuat array baru
Wajibmap membaca setiap item di array dan mengembalikan array baru. Gunakan map saat jumlah item tetap sama, tetapi bentuk value yang dibutuhkan berubah. Contohnya dari list object lesson menjadi list title lesson.
Bagian ini memengaruhi progres lesson.
filter memilih sebagian item
Wajibfilter juga membaca setiap item, tetapi hanya menyimpan item yang memenuhi kondisi. Gunakan filter saat kamu ingin menampilkan sebagian data, misalnya hanya lesson wajib atau hanya task yang belum selesai.
Bagian ini memengaruhi progres lesson.
Membentuk data untuk UI
Wajibconst lessons = [
{ title: "Array Dasar", required: true },
{ title: "Object Dasar", required: true },
{ title: "Catatan tambahan", required: false },
];
const lessonTitles = lessons.map((lesson) => lesson.title);
const requiredLessons = lessons.filter((lesson) => lesson.required);
console.log(lessonTitles);
console.log(requiredLessons);lessonTitles berisi title dari setiap lesson. requiredLessons berisi object lesson yang property required-nya true.
Bagian ini memengaruhi progres lesson.
Catatan penting
WajibPilih method sesuai tujuan
Pakai map jika kamu ingin mengubah bentuk setiap item. Pakai filter jika kamu ingin mengambil sebagian item. Jangan memakai filter untuk mengubah bentuk data, dan jangan memakai map jika tujuanmu hanya memilih item tertentu.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Kamu punya array lesson dan ingin mengambil hanya lesson yang required. Method mana yang paling tepat?
Progres lesson naik setelah jawaban benar.
Coding practice
WajibDibuka di workspace khususMentransformasi data UI
Latihan memakai map dan filter untuk membentuk data lesson sederhana.
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.
Ringkasan
Wajib- Transformasi data membantu menyiapkan data sebelum dipakai UI.
- map membuat array baru dari setiap item yang dibaca.
- filter memilih item yang memenuhi kondisi.
- map cocok untuk mengubah bentuk data, filter cocok untuk memilih sebagian data.
- Berikutnya, Uji Kompetensi akan mengecek apakah kamu siap memakai data ini di module DOM dan events.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Data mentah sering perlu dibentuk dulu.