0Pricing
JavaScript Academy · Pelajaran

map dan filter — dasar-dasar

Transformasikan dan pilih data dengan map dan filter; rangkai keduanya dan hindari mutasi agar kode lebih aman

map dan filter — dasar-dasar adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 2. 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 2 pelajaran total.

Pengantar map & filter

Tujuan: Mengubah item dengan map dan memilih item dengan filter.

  • map: mengubah
  • filter: memilih
  • Merangkai map → filter
  • Tanpa perubahan
map dan filter — dasar-dasar — ilustrasi 1

Dasar-dasar map

map menerapkan fungsi ke setiap elemen dan mengembalikan larik baru (dengan panjang yang sama).

// map transforms each value and returns a new array
const nums = [1, 2, 3];

const doubled = nums.map(function (n) {
  return n * 2;
});

console.log("nums:", nums);
console.log("doubled:", doubled);
map dan filter — dasar-dasar — ilustrasi 2

Dasar-dasar filter

filter hanya mengembalikan item yang fungsi panggilan baliknya menghasilkan true (panjangnya dapat berubah).

// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];

const evens = values.filter(function (n) {
  return n % 2 === 0;
});

console.log("values:", values);
console.log("evens:", evens);
map dan filter — dasar-dasar — ilustrasi 3

Contoh perangkaian

Gabungkan langkah-langkah: gunakan map untuk mengubah, lalu filter untuk memilih.

// Chain methods for clarity
const prices = [4, 7, 10];

// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
  return p * 1.1;
});

const expensive = withTax.filter(function (p) {
  return p > 8;
});

console.log("withTax:", withTax);
console.log("expensive:", expensive);
map dan filter — dasar-dasar — ilustrasi 4

Demo tanpa perubahan

Imutabilitas: map/filter mengembalikan larik baru; larik asli tidak berubah.

// map and filter do not mutate the original array
const base = [2, 4, 6];

const plusOne = base.map(function (n) {
  return n + 1;
});

const small = base.filter(function (n) {
  return n < 5;
});

console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
map dan filter — dasar-dasar — ilustrasi 5

Kiat untuk larik yang rapi

Kiat:

  • Beri nama fungsi panggilan balik kecil dengan baik (n, item) agar jelas.
  • Buat rangkaian tetap singkat (maksimal 2–3 langkah).
  • Utamakan fungsi panggilan balik murni (tanpa efek samping).
map dan filter — dasar-dasar — ilustrasi 6

Kuis map vs filter

Pemeriksaan singkat: Mengubah setiap elemen.

map dan filter — dasar-dasar — ilustrasi 7

Ringkasan

Ringkasan: Gunakan map untuk mengubah nilai, filter untuk memilih beberapa nilai, lalu rangkai keduanya tanpa mengubah larik asli.

map dan filter — dasar-dasar — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “map dan filter — dasar-dasar” gratis?

Ya — teks lengkap “map dan filter — dasar-dasar” 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 2 pelajaran total.

Apa yang akan aku pelajari di “map dan filter — dasar-dasar”?

Transformasikan dan pilih data dengan map dan filter; rangkai keduanya dan hindari mutasi agar kode lebih aman 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 1 dari 2.

Berapa lama pelajaran “map dan filter — dasar-dasar” 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

  1. map dan filter — dasar-dasar
  2. reduce, some/every, find — pola sederhana
← Kembali ke JavaScript Academy