JavaScript Academy · Pelajaran

Transformasi Data Deklaratif

Transformasikan data dengan map, filter, dan reduce.

Transformasi Data Deklaratif adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Deklaratif vs Imperatif

Kode imperatif menyatakan HOW (perulangan, penghitung, perubahan). Kode deklaratif menyatakan WHAT. Metode larik seperti map, filter, dan reduce memungkinkan Anda menjelaskan transformasi tanpa perulangan manual.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: Mengubah Setiap Elemen

map mengembalikan larik baru dengan panjang yang sama, dengan setiap elemennya diubah oleh fungsi Anda. Larik asli tidak berubah.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: Mempertahankan Beberapa Elemen

filter mengembalikan larik baru yang hanya berisi elemen yang predikatnya mengembalikan nilai benar.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: Melipat Menjadi Satu Nilai

reduce meringkas larik menjadi satu nilai dengan mengakumulasikan nilai. Berikan fungsi pereduksi dan nilai awal.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Merangkai Operasi

Karena setiap metode mengembalikan larik baru, Anda dapat merangkainya menjadi alur pemrosesan yang mudah dibaca dari atas ke bawah.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Alur Pemrosesan yang Realistis

Gabungkan filter, map, dan reduce untuk menjawab pertanyaan tentang kumpulan data dalam satu ekspresi.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Memetakan ke Struktur Baru

map dapat mengubah bentuk objek, bukan hanya angka. Proyeksikan setiap catatan ke bidang yang Anda perlukan.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce Dapat Membuat Apa Saja

reduce tidak hanya digunakan untuk penjumlahan. Fungsi ini dapat membuat objek, mengelompokkan data, atau bahkan menerapkan ulang map dan filter.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

Urutan Itu Penting

Memfilter sebelum memetakan mencegah perubahan pada elemen yang nantinya akan dibuang. Letakkan filter yang murah di awal rangkaian agar kode lebih jelas dan efisien.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Tanpa Perubahan di Mana Pun

Metode-metode ini tidak pernah mengubah larik sumber. Hal itu membuat alur pemrosesan aman dan mudah diprediksi, sehingga sangat sesuai dengan gaya fungsional.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap untuk Hasil Bersarang

Saat map menghasilkan larik, flatMap memetakan dan meratakan satu tingkat dalam satu langkah.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Pemeriksaan Singkat

Transformasi deklaratif.

Ringkasan

Transformasi deklaratif menjelaskan WHAT, bukan HOW. map mengubah, filter memilih, dan reduce melipat menjadi satu nilai; rangkai semuanya menjadi alur pemrosesan yang mudah dibaca. Tidak ada yang mengubah sumber, pemfilteran di awal bersifat efisien, dan reduce dapat membuat struktur apa pun. Gunakan flatMap saat map menghasilkan larik.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Transformasi Data Deklaratif” gratis?

Ya — teks lengkap “Transformasi Data Deklaratif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Transformasi Data Deklaratif”?

Transformasikan data dengan map, filter, dan reduce. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Transformasi Data Deklaratif” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy