Frontend Academy · Pelajaran

Metode Array: map, filter, reduce, find

Transformasikan, filter, dan agregasikan array dengan metode tingkat tinggi, bukan loop manual. Rangkai metode tersebut untuk membuat pipeline data yang ekspresif.

Metode Array: map, filter, reduce, find adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Metode Larik?

Perulangan for imperatif dapat digunakan, tetapi menyamarkan maksud. Metode tingkat tinggi pada larik menyatakan apa yang Anda inginkan, bukan bagaimana melakukan perulangan. Metode ini menghasilkan kode yang lebih bersih, dapat diuji, dan dapat dikomposisikan, serta dapat dibaca seperti prosa.

Array.map() — Mengubah Setiap Elemen

map() mengembalikan larik baru yang setiap elemennya telah diubah oleh fungsi panggilan balik. Larik asli tidak diubah. Gunakan metode ini saat Anda perlu mengonversi satu larik menjadi larik lain.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Memilih Elemen yang Cocok

filter() mengembalikan larik baru yang hanya berisi elemen yang fungsi panggilan baliknya mengembalikan nilai truthy. Fungsi panggilan balik tersebut merupakan fungsi predikat.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Mengakumulasi Nilai

reduce(callback, initialValue) mengakumulasi semua elemen menjadi satu nilai. Fungsi panggilan balik menerima akumulator dan elemen saat ini. Nilai awal merupakan nilai awal akumulator.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — Kecocokan Pertama

find() mengembalikan elemen pertama yang cocok dengan predikat, atau undefined jika tidak ada. Gunakan metode ini untuk mencari item berdasarkan ID atau nilai properti.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() mirip dengan find(), tetapi mengembalikan indeks elemen yang cocok, atau -1 jika tidak ditemukan. Berguna untuk menemukan posisi elemen yang akan diperbarui dalam larik.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() dan Array.every()

some() mengembalikan true jika setidaknya satu elemen lolos pengujian. every() mengembalikan true hanya jika semua elemen lolos. Keduanya berhenti pada hasil pertama yang menentukan.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Memetakan Lalu Meratakan

flatMap() memetakan setiap elemen lalu meratakan hasilnya satu tingkat. Ini setara dengan .map(...).flat(), tetapi lebih efisien.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Merangkai Metode Larik

Metode mengembalikan larik baru, sehingga Anda dapat merangkainya. Baca rangkaian dari kiri ke kanan: lakukan filter terlebih dahulu, lalu transformasikan, kemudian agregasikan.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() dan Array.includes()

at(-1) mendapatkan elemen terakhir. includes(value) memeriksa apakah suatu nilai ada. Jauh lebih bersih daripada arr[arr.length - 1] dan arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Imutabilitas: Jangan Mengubah

map, filter, dan reduce mengembalikan larik baru. push, pop, dan splice mengubah larik asli. Dalam state React, selalu buat larik baru (dengan spread atau map), bukan mengubah state secara langsung.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Pemeriksaan Singkat

Metode larik mana yang mengembalikan larik baru berisi elemen yang fungsi panggilan baliknya mengembalikan true?

Ringkasan: Metode Larik

map() mengubah setiap elemen. filter() memilih elemen yang cocok. reduce() mengakumulasi menjadi satu nilai. find() mengembalikan kecocokan pertama. some()/every() menguji keanggotaan. Rangkaian metode ini menggantikan perulangan bertingkat dengan alur data yang mudah dibaca dan deklaratif.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Metode Array: map, filter, reduce, find” gratis?

Ya — teks lengkap “Metode Array: map, filter, reduce, find” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Metode Array: map, filter, reduce, find”?

Transformasikan, filter, dan agregasikan array dengan metode tingkat tinggi, bukan loop manual. Rangkai metode tersebut untuk membuat pipeline data yang ekspresif. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 4.

Berapa lama pelajaran “Metode Array: map, filter, reduce, find” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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 Frontend Academy