Intro: Apa itu Array
Bayangin kamu punya kotak pensil. Nah, di dalam kotak pensil itu kamu bisa simpen banyak alat tulis sekaligus kan? Ada pensil, penghapus, pulpen, penggaris, dan masih banyak lagi. Array itu kurang lebih konsepnya sama kayak kotak pensil tadi.
Jadi array adalah sebuah variable yang bisa nyimpen banyak value sekaligus dalam satu wadah. Daripada kamu bikin variable satu-satu buat setiap data, mendingan pake array aja biar lebih rapi dan efisien. Misalnya kalo kamu mau simpen nama-nama siswa di kelas, daripada bikin variable nama1, nama2, nama3, dan seterusnya sampe puluhan, mending bikin satu array aja yang isinya semua nama siswa.
Nah yang perlu kamu tau, setiap item atau element yang ada di dalam array itu punya posisi atau istilahnya index. Yang unik dari index ini adalah dimulai dari angka 0, bukan 1. Jadi element pertama posisinya di index 0, element kedua di index 1, element ketiga di index 2, begitu seterusnya. Ini emang agak membingungkan di awal, tapi lama-lama kamu bakal terbiasa kok.
Contohnya gini, kalo kamu punya array berisi nama buah:
const fruits = ["apel", "jeruk", "mangga", "pisang"];
Posisinya kayak gini:
- "apel" ada di index 0
- "jeruk" ada di index 1
- "mangga" ada di index 2
- "pisang" ada di index 3
Terus array juga punya property yang namanya length. Property ini berguna banget buat tau berapa banyak sih jumlah element yang ada di dalam array kamu. Cara pakainya gampang, tinggal tulis nama arraynya trus kasih titik dan length.
const fruits = ["apel", "jeruk", "mangga", "pisang"];
console.log(fruits.length); // hasilnya 4
Kenapa hasilnya 4? Karena emang ada 4 buah element di dalam array fruits tadi. Simpel kan?
Yang menarik dari length property ini adalah dia ngitung jumlah elementnya, bukan index terakhir. Makanya kalo kamu liat lagi contoh tadi, index terakhir adalah 3 (pisang), tapi lengthnya 4. Ini karena index mulai dari 0, sedangkan length ngitung total keseluruhan element.
Array ini bakal sering banget kamu pake pas bikin aplikasi web. Misalnya buat simpen daftar produk di toko online, daftar komentar di blog, daftar todo list, atau bahkan data user yang login ke platform BuildWithAngga. Intinya, kalo ada data yang sifatnya koleksi atau kumpulan, array adalah solusi terbaiknya.
Di episode ini kita bakal belajar lebih dalam tentang array dan berbagai method-method yang bisa kamu pake buat manipulasi data di dalamnya. Percaya deh, setelah paham array dengan baik, coding kamu bakal naik level signifikan.
Membuat & Mengakses Array
Oke sekarang kita masuk ke bagian praktikal. Gimana sih cara bikin array di JavaScript? Ada dua cara yang bisa kamu pake, tapi percaya deh, cuma satu yang sebenernya kamu butuhin.
Cara pertama dan paling umum adalah pake literal syntax. Ini adalah cara yang paling simple dan recommended banget. Kamu tinggal tulis kurung siku, terus isi dengan value-value yang mau kamu simpen, pisahin pake koma.
const numbers = [1, 2, 3, 4, 5];
const names = ["Budi", "Ani", "Citra"];
const mixed = [1, "dua", true, null];
Liat kan? Gampang banget. Kamu bahkan bisa simpen berbagai tipe data dalam satu array, meskipun di praktiknya jarang banget dilakuin karena bikin bingung.
Nah cara kedua adalah pake constructor dengan keyword new Array(). Tapi jujur aja, cara ini jarang dipake dan sebenernya nggak direkomendasiin. Kenapa? Karena bisa bikin confusion dan nggak konsisten.
const arr1 = new Array(1, 2, 3); // hasilnya [1, 2, 3]
const arr2 = new Array(3); // hasilnya array kosong dengan 3 slot
Liat bedanya? Kalo kamu kasih satu angka doang, dia bakal bikin array kosong sebanyak angka itu. Tapi kalo kamu kasih lebih dari satu value, dia bakal bikin array berisi value-value tersebut. Ribet kan? Makanya mending stick aja sama literal syntax pake kurung siku.
Setelah bikin array, kamu pasti pengen akses data yang ada di dalemnya dong. Caranya gampang, tinggal tulis nama arraynya trus tambahkan kurung siku dengan index yang mau kamu akses.
const fruits = ["apel", "jeruk", "mangga"];
console.log(fruits[0]); // "apel"
console.log(fruits[1]); // "jeruk"
console.log(fruits[2]); // "mangga"
Inget ya, index selalu mulai dari 0. Jadi element pertama ada di index 0, bukan 1. Ini salah satu hal yang sering bikin pemula bingung di awal.
Terus gimana kalo kamu mau tau berapa banyak element di dalam array? Pake property length yang udah kita bahas sebelumnya.
const students = ["Andi", "Budi", "Citra", "Dewi"];
console.log(students.length); // 4
Simple banget kan? Length ini berguna banget nanti pas kamu mau loop through array atau validasi apakah array itu kosong atau nggak.
Yang menarik dari array adalah kamu juga bisa modify atau ubah value yang udah ada. Caranya sama kayak akses element tadi, tapi kamu assign value baru ke index tertentu.
const scores = [80, 75, 90];
console.log(scores[0]); // 80
scores[0] = 95; // ubah nilai index 0
console.log(scores[0]); // 95
console.log(scores); // [95, 75, 90]
Liat tuh, nilai di index 0 yang tadinya 80 sekarang berubah jadi 95. Tapi hati-hati ya, meskipun kamu declare arraynya pake const, kamu tetep bisa ubah isi elementnya. Yang nggak bisa kamu lakuin adalah reassign keseluruhan arraynya.
const myArray = [1, 2, 3];
myArray[0] = 10; // ini boleh
myArray = [4, 5, 6]; // ini error, nggak boleh
Ini karena const cuma prevent reassignment variable secara keseluruhan, bukan isi dari array atau objectnya. Kalo kamu pengen array yang bener-bener immutable atau nggak bisa diubah, kamu harus pake teknik lain yang bakal kita bahas nanti.
Pro tip buat kamu yang lagi belajar di BuildWithAngga: biasain pake literal syntax buat bikin array. Cara ini lebih clean, lebih mudah dibaca, dan udah jadi standard di industri. Hindari new Array() kecuali kamu emang tau persis apa yang kamu lakuin dan ada use case spesifik buat itu.
Mutating Methods (mengubah original)
Sekarang kita masuk ke bagian yang seru tapi juga harus hati-hati. Di JavaScript, ada beberapa method yang bisa kamu pake buat manipulasi array. Tapi method-method ini sifatnya mutating, artinya mereka langsung ngubah array originalnya. Bukan bikin array baru, tapi modifikasi yang udah ada.
Kenapa harus hati-hati? Karena kalo kamu nggak aware, ini bisa bikin bug yang susah dilacak, apalagi pas kamu kerja sama project dengan tim atau pas aplikasinya udah kompleks. Tapi tenang, kita bakal bahas satu-satu supaya kamu paham kapan harus pake dan kapan harus hindari.
Method push()
Method pertama yang paling sering dipake adalah push(). Fungsinya simpel banget, yaitu buat nambahin element baru di akhir array. Return valuenya adalah length baru dari array tersebut.
const todos = ["Belajar JavaScript", "Bikin Project"];
todos.push("Deploy ke Server");
console.log(todos);
// ["Belajar JavaScript", "Bikin Project", "Deploy ke Server"]
Kamu juga bisa push lebih dari satu element sekaligus loh.
const numbers = [1, 2, 3];
numbers.push(4, 5, 6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]
Method pop()
Kebalikan dari push(), method pop() ini buat nge-remove element terakhir dari array. Yang menarik, method ini return element yang di-remove, jadi kamu bisa simpen valuenya kalo emang butuh.
const fruits = ["apel", "jeruk", "mangga"];
const lastFruit = fruits.pop();
console.log(lastFruit); // "mangga"
console.log(fruits); // ["apel", "jeruk"]
Pop() ini sering dipake pas kamu butuh ambil dan hapus item terakhir sekaligus. Praktis banget buat implementasi stack (LIFO - Last In First Out).
Method shift()
Kalo pop() hapus dari belakang, shift() ini hapus dari depan. Dia remove element pertama di array dan return element tersebut.
const queue = ["pertama", "kedua", "ketiga"];
const first = queue.shift();
console.log(first); // "pertama"
console.log(queue); // ["kedua", "ketiga"]
Tapi ada yang perlu kamu tau, shift() ini lebih lambat dibanding pop() karena setelah remove element pertama, semua element lainnya harus digeser indexnya. Jadi kalo arraynya gede banget, performancenya bisa jadi issue.
Method unshift()
Sesuai namanya, unshift() adalah kebalikan dari shift(). Method ini nambahin element di awal array, bukan di akhir kayak push().
const students = ["Budi", "Citra"];
students.unshift("Andi");
console.log(students); // ["Andi", "Budi", "Citra"]
Sama kayak shift(), unshift() juga punya performance issue yang sama karena harus nggeser semua element yang udah ada. Makanya kalo bisa, lebih baik pake push() aja kalo performace jadi concern.
Method splice()
Nah ini dia method yang paling powerful tapi juga paling tricky. Splice() bisa nambah atau hapus element di posisi manapun dalam array. Syntaxnya agak ribet tapi flexibel banget.
array.splice(startIndex, deleteCount, item1, item2, ...)
Contoh hapus element di tengah:
const colors = ["merah", "hijau", "biru", "kuning"];
const removed = colors.splice(1, 2);
console.log(removed); // ["hijau", "biru"]
console.log(colors); // ["merah", "kuning"]
Contoh tambah element di tengah:
const numbers = [1, 2, 5, 6];
numbers.splice(2, 0, 3, 4);
console.log(numbers); // [1, 2, 3, 4, 5, 6]
Contoh replace element:
const items = ["a", "b", "x", "d"];
items.splice(2, 1, "c");
console.log(items); // ["a", "b", "c", "d"]
Splice() return array berisi element yang di-remove. Kalo nggak ada yang di-remove, dia return empty array.
Warning Penting tentang Mutating Methods
Oke ini bagian yang serius. Mutating methods itu convenient banget, tapi bisa jadi masalah besar kalo kamu nggak hati-hati. Kenapa?
Pertama, mereka ngubah array original. Kalo ada bagian lain dari kode kamu yang masih refer ke array yang sama, mereka bakal kaget karena tiba-tiba datanya berubah tanpa disangka-sangka.
const originalScores = [80, 90, 100];
const scores = originalScores;
scores.push(70);
console.log(originalScores); // [80, 90, 100, 70]
// whoops! originalnya kebawa berubah
Kedua, pas kamu kerja dengan state management di framework modern kayak React atau Vue, mutating array secara langsung bisa bikin component nggak re-render karena reference objectnya masih sama.
Jadi kapan sebaiknya pake mutating methods? Kalo kamu yakin 100% nggak ada kode lain yang depend sama array itu, atau kalo kamu emang deliberately pengen ngubah array original. Tapi kalo ragu, lebih aman pake non-mutating methods yang bakal kita bahas di section berikutnya.
Pro tip buat kamu yang belajar di BuildWithAngga: biasain mikir dulu sebelum pake mutating methods. Tanya ke diri sendiri, "apakah aman ngubah array ini langsung, atau lebih baik bikin copy dulu?". Habit ini bakal sangat membantu pas kamu udah kerja di real-world project.
Non-Mutating Methods (return new array)
Setelah kita bahas mutating methods yang langsung ngubah array original, sekarang kita masuk ke methods yang lebih aman: non-mutating methods. Methods ini nggak bakal ngubah array aslinya, melainkan return array baru atau value baru. Ini jauh lebih safe dan recommended buat dipake, especially kalo kamu kerja dengan data yang complex atau shared.
Kenapa non-mutating lebih bagus? Karena dengan approach ini, kamu bisa pastiin data original tetep utuh dan nggak berubah tanpa sengaja. Ini bikin debugging lebih gampang dan kode kamu lebih predictable.
Method slice()
Slice() digunain buat ngambil sebagian dari array tanpa ngubah array aslinya. Method ini terima dua parameter: start index dan end index (optional). Yang perlu diingat, end index itu exclusive, artinya nggak ikut ke-include.
const fruits = ["apel", "jeruk", "mangga", "pisang", "anggur"];
const citrus = fruits.slice(1, 3);
console.log(citrus); // ["jeruk", "mangga"]
console.log(fruits); // ["apel", "jeruk", "mangga", "pisang", "anggur"]
// array original tetep utuh
Kalo kamu cuma kasih satu parameter, dia bakal ngambil dari index tersebut sampe akhir.
const numbers = [1, 2, 3, 4, 5];
const lastThree = numbers.slice(2);
console.log(lastThree); // [3, 4, 5]
Kalo kamu panggil slice() tanpa parameter sama sekali, dia bakal bikin shallow copy dari keseluruhan array. Ini sering dipake buat clone array dengan cepat.
const original = [1, 2, 3];
const copy = original.slice();
copy.push(4);
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]
Method concat()
Concat() dipake buat nge-combine dua atau lebih array jadi satu. Return valuenya adalah array baru hasil penggabungan, tanpa ngubah array-array aslinya.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3] - tetep sama
console.log(arr2); // [4, 5, 6] - tetep sama
Kamu juga bisa concat lebih dari dua array sekaligus:
const morning = ["kopi", "roti"];
const lunch = ["nasi", "ayam"];
const dinner = ["mie", "bakso"];
const allMeals = morning.concat(lunch, dinner);
console.log(allMeals);
// ["kopi", "roti", "nasi", "ayam", "mie", "bakso"]
Di era modern sekarang, banyak developer lebih suka pake spread operator (...) buat concat array karena syntaxnya lebih clean. Tapi concat() tetep valid dan banyak dipake di codebase lama.
const combined = [...arr1, ...arr2]; // sama aja kayak concat
Method includes()
Method ini simple tapi sangat berguna. Includes() dipake buat ngecek apakah sebuah element ada di dalam array atau nggak. Return valuenya boolean: true kalo ada, false kalo nggak ada.
const students = ["Andi", "Budi", "Citra", "Dewi"];
console.log(students.includes("Budi")); // true
console.log(students.includes("Eko")); // false
Kamu juga bisa specify dari index mana mulai searchingnya:
const numbers = [1, 2, 3, 2, 1];
console.log(numbers.includes(2)); // true
console.log(numbers.includes(2, 3)); // true, mulai cari dari index 3
Includes() ini case-sensitive ya, jadi "Budi" dan "budi" itu dianggep beda.
Method indexOf()
Kalo includes() cuma return true/false, indexOf() return posisi atau index dari element yang kamu cari. Kalo elementnya ada, return indexnya. Kalo nggak ada, return -1.
const colors = ["merah", "hijau", "biru", "hijau"];
console.log(colors.indexOf("hijau")); // 1 (index pertama ketemu)
console.log(colors.indexOf("kuning")); // -1 (nggak ada)
Perhatiin kalo ada duplicate element, indexOf() cuma return index yang pertama ketemu aja. Kalo kamu butuh semua indexnya, kamu harus pake cara lain atau loop manual.
Sama kayak includes(), indexOf() juga bisa nerima parameter kedua buat specify dari mana mulai searching:
const items = ["a", "b", "c", "b"];
console.log(items.indexOf("b")); // 1
console.log(items.indexOf("b", 2)); // 3
Method join()
Join() convert array jadi string dengan menggabungkan semua elementnya. Kamu bisa specify separator atau pemisah antar element. Kalo nggak dikasih separator, default-nya pake koma.
const words = ["Belajar", "JavaScript", "di", "BuildWithAngga"];
const sentence = words.join(" ");
console.log(sentence); // "Belajar JavaScript di BuildWithAngga"
Contoh dengan separator lain:
const items = ["apel", "jeruk", "mangga"];
console.log(items.join()); // "apel,jeruk,mangga"
console.log(items.join(" - ")); // "apel - jeruk - mangga"
console.log(items.join("")); // "apeljerukmangga"
Join() ini kebalikan dari string method split(). Jadi kalo split() pecah string jadi array, join() gabungin array jadi string.
Best Practice: Gunakan Non-Mutating Ketika Bisa
Ini adalah rule of thumb yang sebaiknya kamu pegang: kalo bisa pake non-mutating method, pake itu. Kenapa? Beberapa alasannya:
Pertama, kode kamu jadi lebih predictable dan easier to debug. Kamu nggak perlu khawatir data original tiba-tiba berubah tanpa disadari.
Kedua, pas kerja dengan framework modern kayak React, Vue, atau state management library, immutability itu penting banget. Mutating data langsung bisa bikin aplikasi nggak re-render dengan benar.
Ketiga, non-mutating approach bikin kode kamu lebih functional dan composable. Kamu bisa chain beberapa operations tanpa worry tentang side effects.
// Good: non-mutating
const original = [1, 2, 3, 4, 5];
const filtered = original.slice().filter(x => x > 2);
// Risky: mutating
const numbers = [1, 2, 3, 4, 5];
numbers.splice(0, 2); // langsung ubah original
Tapi bukan berarti mutating methods itu selalu jelek. Ada case-case tertentu dimana mutating lebih efisien dari segi performance, especially kalo arraynya super gede. Yang penting adalah kamu aware sama tradeoff-nya dan bisa bikin keputusan yang tepat sesuai konteks.
Buat kamu yang lagi belajar di BuildWithAngga, biasain diri pake non-mutating methods dulu. Setelah kamu paham betul konsepnya dan tau kapan aman pake mutating methods, baru deh kamu bisa explore lebih jauh. Safety first, optimization later.
Higher-Order Methods: map()
Oke sekarang kita masuk ke territory yang lebih advanced tapi justru bakal bikin hidup kamu jauh lebih gampang: higher-order methods. Ini adalah methods yang nerima function sebagai parameter. Sounds complicated? Tenang, setelah kamu paham konsepnya, kamu bakal ketagihan pake ini terus.
Method pertama yang bakal kita bahas adalah map(). Ini adalah salah satu method yang paling sering dipake di real-world development, especially pas kamu kerja dengan data dari API atau database.
Apa itu map()?
Map() adalah method yang digunain buat transform setiap element di dalam array. Dia bakal loop through semua element, apply function yang kamu kasih ke setiap element, terus return array baru dengan hasil transformasinya. Yang penting, array originalnya nggak berubah sama sekali.
Syntaxnya kayak gini:
const newArray = array.map((element) => {
// do something with element
return transformedElement;
});
Atau kalo pake arrow function yang lebih concise:
const newArray = array.map(element => element * 2);
Contoh Sederhana
Mari kita mulai dengan contoh yang simpel dulu. Misalnya kamu punya array angka dan pengen nge-double semua nilainya:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] - original tetep sama
Liat kan? Setiap element di-transform jadi 2 kali lipatnya, dan hasilnya disimpen di array baru. Array original nggak berubah.
Contoh lain, misalnya kamu pengen convert array string jadi uppercase semua:
const names = ["andi", "budi", "citra"];
const uppercased = names.map(name => name.toUpperCase());
console.log(uppercased); // ["ANDI", "BUDI", "CITRA"]
Use Case: Convert Data Format
Di real-world application, map() paling sering dipake buat convert atau transform data format. Misalnya kamu dapet data dari API yang formatnya nggak sesuai dengan yang kamu butuhin di frontend.
Contoh, API kasih kamu array objects dengan banyak property, tapi kamu cuma butuh beberapa property aja:
const users = [
{ id: 1, name: "Andi", email: "[email protected]", age: 25, city: "Jakarta" },
{ id: 2, name: "Budi", email: "[email protected]", age: 30, city: "Bandung" },
{ id: 3, name: "Citra", email: "[email protected]", age: 28, city: "Surabaya" }
];
// Ambil cuma name dan email aja
const simplified = users.map(user => ({
name: user.name,
email: user.email
}));
console.log(simplified);
// [
// { name: "Andi", email: "[email protected]" },
// { name: "Budi", email: "[email protected]" },
// { name: "Citra", email: "[email protected]" }
// ]
Atau misalnya kamu butuh extract satu property aja dari array of objects:
const products = [
{ id: 1, name: "Laptop", price: 10000000 },
{ id: 2, name: "Mouse", price: 150000 },
{ id: 3, name: "Keyboard", price: 500000 }
];
const productNames = products.map(product => product.name);
console.log(productNames); // ["Laptop", "Mouse", "Keyboard"]
const prices = products.map(product => product.price);
console.log(prices); // [10000000, 150000, 500000]
Parameter Tambahan di map()
Sebenarnya callback function di map() bisa nerima 3 parameter:
- Current element (yang lagi di-process)
- Index (posisi element di array)
- Array (array original yang lagi di-loop)
const numbers = [10, 20, 30];
const withIndex = numbers.map((num, index) => {
return `Index ${index}: ${num}`;
});
console.log(withIndex);
// ["Index 0: 10", "Index 1: 20", "Index 2: 30"]
Tapi kebanyakan waktu, kamu cuma bakal pake parameter pertama aja (current element). Index sama array jarang dipake kecuali ada use case spesifik.
Kapan Pake map()?
Gunakan map() ketika:
- Kamu butuh transform setiap element di array
- Kamu butuh array baru dengan panjang yang sama
- Kamu butuh extract atau reshape data
Jangan pake map() ketika:
- Kamu cuma butuh side effect (console.log, update DOM) tanpa butuh return value - pake forEach() instead
- Kamu butuh filter atau reduce jumlah element - pake filter() atau reduce()
Common Mistakes
Kesalahan yang sering terjadi adalah lupa return value di dalam callback function:
// Salah - lupa return
const doubled = [1, 2, 3].map(x => {
x * 2; // ini nggak ke-return
});
console.log(doubled); // [undefined, undefined, undefined]
// Benar - dengan return
const doubled = [1, 2, 3].map(x => {
return x * 2;
});
console.log(doubled); // [2, 4, 6]
// Atau pake implicit return
const doubled = [1, 2, 3].map(x => x * 2);
Kesalahan lain adalah pake map() buat side effect aja tanpa butuh return valuenya:
// Kurang tepat
[1, 2, 3].map(x => console.log(x));
// Lebih baik pake forEach
[1, 2, 3].forEach(x => console.log(x));
Praktek di BuildWithAngga
Kalo kamu lagi ngikutin course di BuildWithAngga, terutama yang berkaitan dengan frontend development atau consuming API, map() ini bakal jadi sahabat terbaik kamu. Hampir semua case dimana kamu perlu render list data di UI, map() adalah solusinya.
Misalnya di React:
const CourseList = ({ courses }) => {
return (
<div>
{courses.map(course => (
<CourseCard key={course.id} title={course.title} />
))}
</div>
);
};
Atau di Vue:
<div v-for="course in courses" :key="course.id">
{{ course.title }}
</div>
Biasain diri buat pake map() buat data transformation. Ini bakal bikin kode kamu lebih clean, readable, dan maintainable. Plus, ini adalah skill yang wajib dikuasai buat jadi professional developer.
Higher-Order Methods: filter()
Setelah kita bahas map() yang buat transform data, sekarang kita lanjut ke method yang nggak kalah powerful: filter(). Kalo map() fungsinya transform setiap element, filter() fungsinya adalah "memilih" atau "menyaring" element-element yang memenuhi kriteria tertentu.
Bayangin kamu lagi belanja di supermarket dan cuma mau beli buah yang harganya di bawah 20 ribu. Filter() itu kayak asisten yang bantuin kamu nge-sort dan ngambil cuma buah-buah yang sesuai budget. Simple tapi super useful.
Apa itu filter()?
Filter() adalah method yang dipake buat nge-select element dari array berdasarkan kondisi tertentu. Dia bakal loop through semua element, test setiap element pake function yang kamu kasih, dan cuma ambil element yang pass test tersebut. Hasilnya adalah array baru yang isinya cuma element yang memenuhi kondisi.
Syntaxnya kayak gini:
const newArray = array.filter((element) => {
// return true kalo mau di-include
// return false kalo mau di-exclude
return condition;
});
Atau pake arrow function yang lebih concise:
const newArray = array.filter(element => condition);
Contoh Sederhana
Mari kita mulai dengan contoh yang gampang dipahami. Misalnya kamu punya array angka dan cuma mau ambil angka yang lebih besar dari 2:
const numbers = [1, 2, 3, 4, 5];
const filtered = numbers.filter(x => x > 2);
console.log(filtered); // [3, 4, 5]
console.log(numbers); // [1, 2, 3, 4, 5] - original tetep utuh
Liat kan? Cuma angka 3, 4, dan 5 yang masuk karena mereka lebih besar dari 2. Angka 1 dan 2 nggak masuk karena nggak memenuhi kondisi.
Contoh lain, misalnya kamu mau filter array string berdasarkan panjang karakternya:
const words = ["apa", "kabar", "semua", "hi", "halo"];
const longWords = words.filter(word => word.length > 3);
console.log(longWords); // ["kabar", "semua", "halo"]
Cara Kerja filter()
Yang perlu kamu paham, callback function di filter() harus return boolean value (true atau false). Kalo return true, element tersebut bakal di-include di array baru. Kalo return false, element tersebut di-skip.
const scores = [45, 78, 92, 65, 88, 55];
// Ambil cuma yang lulus (>= 70)
const passed = scores.filter(score => score >= 70);
console.log(passed); // [78, 92, 88]
// Ambil yang nggak lulus
const failed = scores.filter(score => score < 70);
console.log(failed); // [45, 65, 55]
Kamu juga bisa bikin kondisi yang lebih complex:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Ambil angka genap yang lebih dari 5
const result = numbers.filter(num => num % 2 === 0 && num > 5);
console.log(result); // [6, 8, 10]
Use Case dengan Objects
Di real-world application, filter() paling sering dipake buat nge-filter array of objects. Misalnya kamu dapet data users dari API dan mau filter berdasarkan kriteria tertentu:
const users = [
{ id: 1, name: "Andi", age: 17, status: "student" },
{ id: 2, name: "Budi", age: 25, status: "worker" },
{ id: 3, name: "Citra", age: 22, status: "student" },
{ id: 4, name: "Dewi", age: 30, status: "worker" }
];
// Filter user yang udah dewasa (>= 18)
const adults = users.filter(user => user.age >= 18);
console.log(adults);
// [
// { id: 2, name: "Budi", age: 25, status: "worker" },
// { id: 3, name: "Citra", age: 22, status: "student" },
// { id: 4, name: "Dewi", age: 30, status: "worker" }
// ]
// Filter cuma yang student
const students = users.filter(user => user.status === "student");
console.log(students);
// [
// { id: 1, name: "Andi", age: 17, status: "student" },
// { id: 3, name: "Citra", age: 22, status: "student" }
// ]
Contoh lain yang sering banget dipake adalah filter products berdasarkan kategori atau harga:
const products = [
{ id: 1, name: "Laptop", price: 10000000, category: "electronics" },
{ id: 2, name: "Mouse", price: 150000, category: "electronics" },
{ id: 3, name: "Buku", price: 50000, category: "books" },
{ id: 4, name: "Keyboard", price: 500000, category: "electronics" }
];
// Filter electronics aja
const electronics = products.filter(p => p.category === "electronics");
// Filter yang harganya di bawah 1 juta
const affordable = products.filter(p => p.price < 1000000);
console.log(affordable);
// [
// { id: 2, name: "Mouse", price: 150000, category: "electronics" },
// { id: 3, name: "Buku", price: 50000, category: "books" },
// { id: 4, name: "Keyboard", price: 500000, category: "electronics" }
// ]
Combining dengan Methods Lain
Yang keren dari filter() adalah kamu bisa chain dengan method lain kayak map(). Misalnya kamu mau filter dulu terus transform hasilnya:
const students = [
{ name: "Andi", score: 75 },
{ name: "Budi", score: 85 },
{ name: "Citra", score: 65 },
{ name: "Dewi", score: 95 }
];
// Filter yang lulus (>= 70) terus ambil namanya aja
const passedNames = students
.filter(student => student.score >= 70)
.map(student => student.name);
console.log(passedNames); // ["Andi", "Budi", "Dewi"]
Atau sebaliknya, map dulu baru filter:
const numbers = [1, 2, 3, 4, 5];
// Double dulu, terus filter yang > 5
const result = numbers
.map(x => x * 2)
.filter(x => x > 5);
console.log(result); // [6, 8, 10]
Parameter Tambahan di filter()
Sama kayak map(), callback function di filter() juga bisa nerima parameter tambahan:
const items = ["a", "b", "c", "d", "e"];
// Filter cuma yang di index genap
const evenIndex = items.filter((item, index) => index % 2 === 0);
console.log(evenIndex); // ["a", "c", "e"]
Kapan Pake filter()?
Gunakan filter() ketika:
- Kamu butuh subset dari array berdasarkan kondisi
- Kamu mau "menyaring" data berdasarkan kriteria
- Kamu butuh implementasi search atau filtering feature
Jangan pake filter() ketika:
- Kamu cuma butuh cek apakah ada element yang match (pake some() atau includes())
- Kamu butuh transform data tanpa nge-filter (pake map())
- Kamu cuma butuh satu element aja (pake find())
Common Mistakes
Kesalahan umum adalah lupa return boolean value:
// Salah - lupa return
const result = [1, 2, 3].filter(x => {
x > 2; // ini nggak ke-return
});
console.log(result); // [] - kosong karena implicitly return undefined
// Benar
const result = [1, 2, 3].filter(x => {
return x > 2;
});
// Atau pake implicit return
const result = [1, 2, 3].filter(x => x > 2);
Kesalahan lain adalah confuse antara filter() dan find():
// filter() return array (bisa kosong, bisa banyak element)
const filtered = users.filter(u => u.age > 25); // [user1, user2, ...]
// find() return single element atau undefined
const found = users.find(u => u.age > 25); // { id: 1, name: "..." }
Praktek di BuildWithAngga
Filter() ini super penting banget pas kamu bikin fitur search atau filtering di aplikasi. Misalnya di e-commerce BuildWithAngga, kamu bisa implement filter products by category, price range, atau rating.
Contoh simple search implementation:
const courses = [
{ id: 1, title: "JavaScript Fundamental", category: "programming" },
{ id: 2, title: "UI Design Mastery", category: "design" },
{ id: 3, title: "React for Beginners", category: "programming" }
];
const searchTerm = "javascript";
const searchResults = courses.filter(course =>
course.title.toLowerCase().includes(searchTerm.toLowerCase())
);
console.log(searchResults);
// [{ id: 1, title: "JavaScript Fundamental", category: "programming" }]
Biasain diri pake filter() buat data selection. Kombinasikan dengan map(), sort(), dan method lain buat bikin data manipulation yang powerful. Skill ini wajib banget dikuasai buat profesional frontend development.
Higher-Order Methods: find() & findIndex()
Oke sekarang kita bahas dua methods yang mirip-mirip tapi punya perbedaan penting: find() dan findIndex(). Kalo di section sebelumnya kita udah belajar filter() yang return banyak element sekaligus, nah find() dan findIndex() ini khusus buat nyari satu item aja.
Bayangin kamu lagi nyari temen kamu di kerumunan orang. Begitu ketemu satu orang yang sesuai, kamu langsung berhenti nyari kan? Nah konsepnya sama kayak find() dan findIndex(). Mereka berhenti begitu nemuin element pertama yang match.
Method find()
Find() adalah method yang dipake buat nyari element pertama yang memenuhi kondisi tertentu. Bedanya sama filter(), find() langsung return elementnya (bukan array), dan dia cuma return yang pertama ketemu aja. Kalo nggak ada yang match, dia return undefined.
Syntaxnya kayak gini:
const result = array.find(element => condition);
Contoh sederhana:
const numbers = [1, 3, 5, 8, 10, 12];
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 8 (angka genap pertama)
Perhatiin ya, meskipun ada 10 dan 12 yang juga genap, tapi find() cuma return 8 karena itu yang pertama ketemu.
Kalo nggak ada yang match, hasilnya undefined:
const numbers = [1, 3, 5, 7, 9];
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // undefined
Method findIndex()
FindIndex() mirip banget sama find(), bedanya dia return index dari element yang match, bukan elementnya. Kalo nggak ada yang match, return -1.
const numbers = [1, 3, 5, 8, 10, 12];
const index = numbers.findIndex(num => num % 2 === 0);
console.log(index); // 3 (index dari angka 8)
Kalo nggak ada yang match:
const numbers = [1, 3, 5, 7, 9];
const index = numbers.findIndex(num => num % 2 === 0);
console.log(index); // -1
Perbedaan find() vs findIndex()
Perbedaan utamanya simple:
- find() return elementnya
- findIndex() return posisinya
Kapan pake yang mana? Tergantung apa yang kamu butuhin. Kalo kamu butuh datanya, pake find(). Kalo kamu butuh tau posisinya (mungkin buat update atau delete), pake findIndex().
const users = [
{ id: 1, name: "Andi" },
{ id: 2, name: "Budi" },
{ id: 3, name: "Citra" }
];
// Pake find() - dapet objectnya
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: "Budi" }
// Pake findIndex() - dapet indexnya
const index = users.findIndex(u => u.id === 2);
console.log(index); // 1
Use Case: Find User by ID
Ini adalah salah satu use case paling umum di real-world application. Misalnya kamu punya list users dan mau cari user spesifik berdasarkan ID:
const users = [
{ id: 101, name: "Andi", email: "[email protected]", role: "admin" },
{ id: 102, name: "Budi", email: "[email protected]", role: "user" },
{ id: 103, name: "Citra", email: "[email protected]", role: "moderator" }
];
// Find user by ID
const targetUser = users.find(user => user.id === 102);
if (targetUser) {
console.log(`Found: ${targetUser.name}`);
// Output: "Found: Budi"
} else {
console.log("User not found");
}
Kenapa harus check if (targetUser) dulu? Karena kalo usernya nggak ketemu, find() return undefined. Jadi harus di-check dulu sebelum pake, biar nggak error.
Contoh lain, misalnya di e-commerce BuildWithAngga, kamu mau find product by ID:
const products = [
{ id: "P001", name: "Laptop", price: 10000000 },
{ id: "P002", name: "Mouse", price: 150000 },
{ id: "P003", name: "Keyboard", price: 500000 }
];
const productId = "P002";
const product = products.find(p => p.id === productId);
if (product) {
console.log(`Product: ${product.name}, Price: ${product.price}`);
}
Use Case: Update atau Delete Item
Kalo kamu butuh update atau delete item tertentu, findIndex() lebih berguna karena kamu butuh tau posisinya:
const todos = [
{ id: 1, task: "Belajar JavaScript", done: false },
{ id: 2, task: "Bikin Project", done: false },
{ id: 3, task: "Deploy", done: false }
];
// Update todo by ID
const todoId = 2;
const index = todos.findIndex(todo => todo.id === todoId);
if (index !== -1) {
todos[index].done = true;
console.log("Todo updated!");
}
console.log(todos);
// Todo dengan id 2 sekarang done: true
Atau buat delete:
const students = [
{ id: 1, name: "Andi" },
{ id: 2, name: "Budi" },
{ id: 3, name: "Citra" }
];
const studentId = 2;
const index = students.findIndex(s => s.id === studentId);
if (index !== -1) {
students.splice(index, 1);
console.log("Student removed!");
}
console.log(students);
// Budi udah ilang dari array
Single Item vs Multiple Items
Ini penting banget dipahami: find() dan findIndex() cuma return satu item pertama yang match. Kalo kamu butuh semua items yang match, kamu harus pake filter().
const scores = [45, 78, 92, 65, 88, 55, 95];
// find() - cuma dapet satu
const firstHighScore = scores.find(score => score >= 80);
console.log(firstHighScore); // 92 (yang pertama >= 80)
// filter() - dapet semua
const allHighScores = scores.filter(score => score >= 80);
console.log(allHighScores); // [92, 88, 95]
Jadi inget ya:
- Butuh satu item pertama? Pake find()
- Butuh semua items yang match? Pake filter()
Kapan Pake find() dan findIndex()?
Gunakan find() ketika:
- Kamu yakin cuma ada satu element yang match
- Kamu butuh element pertama yang match
- Kamu butuh data dari element tersebut
Gunakan findIndex() ketika:
- Kamu butuh tau posisi element
- Kamu mau update atau delete element
- Kamu mau manipulasi array di index tertentu
Jangan pake find()/findIndex() ketika:
- Kamu butuh semua elements yang match (pake filter())
- Kamu cuma mau cek ada/nggak (pake some() atau includes())
- Kamu mau loop through semua element (pake forEach())
Comparison dengan Method Lain
Mari kita bandingin dengan methods serupa:
const users = [
{ id: 1, name: "Andi", age: 25 },
{ id: 2, name: "Budi", age: 30 },
{ id: 3, name: "Citra", age: 28 }
];
// find() - return element pertama
const user1 = users.find(u => u.age > 25);
console.log(user1); // { id: 2, name: "Budi", age: 30 }
// filter() - return array semua yang match
const user2 = users.filter(u => u.age > 25);
console.log(user2); // [{ id: 2, ... }, { id: 3, ... }]
// some() - return boolean aja
const hasOldUser = users.some(u => u.age > 25);
console.log(hasOldUser); // true
Praktek di BuildWithAngga
Di real-world project, find() dan findIndex() sering banget dipake buat CRUD operations. Misalnya pas kamu bikin todo app, shopping cart, atau user management system.
Contoh di shopping cart:
const cart = [
{ productId: 1, name: "Laptop", qty: 1 },
{ productId: 2, name: "Mouse", qty: 2 }
];
// Check apakah product udah ada di cart
const existingItem = cart.find(item => item.productId === 1);
if (existingItem) {
// Kalo udah ada, tambah quantity
existingItem.qty += 1;
} else {
// Kalo belum, add new item
cart.push({ productId: 1, name: "Laptop", qty: 1 });
}
Biasain diri pake find() dan findIndex() buat single item operations. Kombinasikan dengan conditional logic buat handle case ketika item nggak ketemu. Ini adalah pattern yang sangat umum di profesional development.
Higher-Order Methods: forEach()
Sekarang kita bahas method yang mungkin paling simple tapi juga sering disalahpahami: forEach(). Method ini pada dasarnya adalah versi modern dari for loop yang lebih clean dan readable. Tapi ada beberapa hal penting yang harus kamu pahami biar nggak salah pake.
ForEach() itu kayak kamu lagi ngasih instruksi ke setiap orang di dalam ruangan: "lakukan ini, lakukan itu". Kamu nggak nge-collect hasilnya, kamu cuma mau setiap orang ngelakuin sesuatu.
Apa itu forEach()?
ForEach() adalah method yang dipake buat nge-loop atau iterate through setiap element di array dan execute function tertentu untuk setiap element. Bedanya sama method-method sebelumnya, forEach() nggak return value apapun. Dia purely buat side effects.
Syntaxnya kayak gini:
array.forEach((element, index, array) => {
// do something
});
Parameter yang bisa kamu pake:
- element - current element yang lagi di-process
- index - posisi element (optional)
- array - array original (optional, jarang dipake)
Contoh Sederhana
Mari kita mulai dengan contoh basic. Misalnya kamu mau console.log setiap element:
const fruits = ["apel", "jeruk", "mangga"];
fruits.forEach(fruit => {
console.log(fruit);
});
// Output:
// apel
// jeruk
// mangga
Atau kamu bisa pake index juga:
const students = ["Andi", "Budi", "Citra"];
students.forEach((student, index) => {
console.log(`${index + 1}. ${student}`);
});
// Output:
// 1. Andi
// 2. Budi
// 3. Citra
Similar dengan for Loop
ForEach() sebenernya adalah alternative yang lebih clean dari traditional for loop. Liat perbandingannya:
const numbers = [1, 2, 3, 4, 5];
// Pake for loop (cara lama)
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// Pake forEach (cara modern)
numbers.forEach(num => {
console.log(num);
});
Keduanya ngasilin output yang sama, tapi forEach() lebih concise dan nggak perlu mikirin counter variable atau array length. Lebih clean kan?
Yang lebih penting, dengan forEach() kamu nggak bisa accidentally ngubah counter atau bikin infinite loop. Ini bikin kode kamu lebih safe.
Use Case: Side Effects
ForEach() perfect buat operations yang sifatnya side effect, yaitu operations yang nggak return value tapi nge-cause some effect. Contohnya:
Contoh 1: Update DOM elements
const listItems = document.querySelectorAll('li');
listItems.forEach(item => {
item.style.color = 'blue';
item.addEventListener('click', handleClick);
});
Contoh 2: Console logging atau debugging
const users = [
{ id: 1, name: "Andi", status: "active" },
{ id: 2, name: "Budi", status: "inactive" },
{ id: 3, name: "Citra", status: "active" }
];
users.forEach(user => {
console.log(`User ${user.name} is ${user.status}`);
});
Contoh 3: Push ke array lain (meskipun ini bisa pake map juga)
const numbers = [1, 2, 3, 4, 5];
const doubled = [];
numbers.forEach(num => {
doubled.push(num * 2);
});
console.log(doubled); // [2, 4, 6, 8, 10]
Tapi untuk case yang terakhir ini, sebenernya lebih baik pake map() karena lebih concise dan functional.
forEach() Tidak Return Value
Ini adalah hal paling penting yang harus kamu inget: forEach() nggak return value apapun. Dia selalu return undefined.
const numbers = [1, 2, 3];
const result = numbers.forEach(num => {
return num * 2; // return ini diabaikan
});
console.log(result); // undefined
Liat kan? Meskipun kita return sesuatu di dalam callback, forEach() tetep return undefined. Ini beda banget sama map().
Kalo kamu butuh transform data dan dapet array baru, jangan pake forEach. Pake map() instead:
// Salah - pake forEach buat transform
const numbers = [1, 2, 3];
const doubled = [];
numbers.forEach(num => doubled.push(num * 2));
// Benar - pake map
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
Break dan Continue
Satu limitation penting dari forEach() adalah kamu nggak bisa pake break atau continue kayak di for loop. Kalo kamu butuh stop loop di tengah jalan, jangan pake forEach.
const numbers = [1, 2, 3, 4, 5];
// Ini nggak bakal work
numbers.forEach(num => {
if (num === 3) {
break; // Error: Illegal break statement
}
console.log(num);
});
Kalo kamu butuh early exit, pake for loop biasa atau methods lain kayak some() atau every().
// Alternative: pake for loop
for (let num of numbers) {
if (num === 3) break;
console.log(num);
}
// Atau pake some() kalo butuh check condition
numbers.some(num => {
if (num === 3) return true; // stop iteration
console.log(num);
return false;
});
forEach() vs map() vs for Loop
Mari kita bandingin ketiga approach ini:
const numbers = [1, 2, 3, 4, 5];
// forEach - purely side effect
numbers.forEach(num => console.log(num));
// Baik buat: logging, update DOM, operations tanpa return value
// map - transform dan return new array
const doubled = numbers.map(num => num * 2);
// Baik buat: data transformation, butuh array baru
// for loop - full control
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] === 3) break;
console.log(numbers[i]);
}
// Baik buat: butuh break/continue, complex logic
Kapan Pake forEach()?
Gunakan forEach() ketika:
- Kamu butuh loop through array buat side effects
- Kamu nggak butuh return value
- Kamu nggak butuh break atau continue
- Kamu mau kode yang lebih readable dari for loop
Jangan pake forEach() ketika:
- Kamu butuh transform data (pake map())
- Kamu butuh filter data (pake filter())
- Kamu butuh early exit (pake for loop)
- Kamu butuh return value
Common Mistakes
Kesalahan 1: Pake forEach() buat transform data
// Kurang tepat
const numbers = [1, 2, 3];
const doubled = [];
numbers.forEach(num => doubled.push(num * 2));
// Lebih baik
const doubled = numbers.map(num => num * 2);
Kesalahan 2: Expect return value dari forEach()
// Salah mindset
const result = [1, 2, 3].forEach(num => num * 2);
console.log(result); // undefined, bukan [2, 4, 6]
// Pake map kalo butuh result
const result = [1, 2, 3].map(num => num * 2);
Kesalahan 3: Nyoba pake break di forEach()
// Nggak bisa kayak gini
numbers.forEach(num => {
if (num === 3) break; // Error!
});
// Pake for loop instead
for (let num of numbers) {
if (num === 3) break;
}
Praktek di BuildWithAngga
Di real-world development, forEach() sering banget dipake buat operations kayak:
Render list items:
const courses = [
{ id: 1, title: "JavaScript Fundamental" },
{ id: 2, title: "React for Beginners" },
{ id: 3, title: "Node.js Mastery" }
];
const courseList = document.getElementById('course-list');
courses.forEach(course => {
const li = document.createElement('li');
li.textContent = course.title;
courseList.appendChild(li);
});
Validation atau logging:
const formData = [
{ field: 'email', value: '[email protected]' },
{ field: 'password', value: '123456' }
];
formData.forEach(data => {
console.log(`Validating ${data.field}: ${data.value}`);
// perform validation
});
Biasain pake forEach() buat side effects aja. Kalo kamu butuh hasil transformasi, selalu pake map(). Ini adalah best practice yang diterapin di profesional development dan bakal bikin kode kamu lebih predictable dan maintainable.
Higher-Order Methods: reduce()
Oke sekarang kita masuk ke method yang paling powerful tapi juga paling tricky buat pemula: reduce(). Jujur aja, dari semua array methods yang udah kita bahas, reduce() ini yang paling bikin kepala pusing di awal. Tapi tenang, kita bakal bahas dari yang simple dulu.
Bayangin kamu lagi ngitung total belanjaan di supermarket. Kamu mulai dari 0, terus setiap item kamu tambahin ke total. Nah, reduce() itu kurang lebih konsepnya kayak gitu: aggregate atau gabungin semua element jadi satu value.
Apa itu reduce()?
Reduce() adalah method yang dipake buat "mengurangi" atau "mengumpulkan" array jadi single value. Bisa berupa number, string, object, atau bahkan array lain. Yang bikin reduce() powerful adalah flexibilitasnya - kamu bisa pake buat berbagai macam operations.
Syntaxnya agak lebih complex dari method-method sebelumnya:
const result = array.reduce((accumulator, currentValue) => {
// return updated accumulator
}, initialValue);
Parameter yang ada:
- accumulator - nilai yang di-accumulate dari iteration sebelumnya
- currentValue - element yang lagi di-process
- initialValue - nilai awal accumulator (optional tapi recommended)
Contoh Sederhana: Sum
Use case paling umum adalah ngitung total atau sum dari array numbers:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => {
return total + num;
}, 0);
console.log(sum); // 15
Atau lebih concise pake implicit return:
const sum = [1, 2, 3, 4, 5].reduce((total, num) => total + num, 0);
console.log(sum); // 15
Mari kita breakdown gimana reduce() kerja di example ini:
- Iteration 1: total = 0 (initial), num = 1 → return 0 + 1 = 1
- Iteration 2: total = 1, num = 2 → return 1 + 2 = 3
- Iteration 3: total = 3, num = 3 → return 3 + 3 = 6
- Iteration 4: total = 6, num = 4 → return 6 + 4 = 10
- Iteration 5: total = 10, num = 5 → return 10 + 5 = 15
Jadi accumulator (total) terus di-update setiap iteration sampe akhirnya return 15.
Use Case: Count
Selain sum, reduce() juga bisa dipake buat count atau ngitung kemunculan element:
const fruits = ["apel", "jeruk", "apel", "mangga", "jeruk", "apel"];
const count = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
console.log(count);
// { apel: 3, jeruk: 2, mangga: 1 }
Ini udah agak complex ya. Kita mulai dengan empty object {}, terus setiap iteration kita tambahin atau update count-nya.
Use Case: Group by Category
Contoh lain yang sering dipake adalah grouping data berdasarkan kategori tertentu:
const products = [
{ name: "Laptop", category: "electronics", price: 10000000 },
{ name: "Mouse", category: "electronics", price: 150000 },
{ name: "Buku", category: "books", price: 50000 },
{ name: "Pensil", category: "stationery", price: 5000 }
];
const grouped = products.reduce((acc, product) => {
const category = product.category;
if (!acc[category]) {
acc[category] = [];
}
acc[category].push(product);
return acc;
}, {});
console.log(grouped);
// {
// electronics: [{ name: "Laptop", ... }, { name: "Mouse", ... }],
// books: [{ name: "Buku", ... }],
// stationery: [{ name: "Pensil", ... }]
// }
Use Case: Flatten Array
Reduce() juga bisa dipake buat flatten nested array:
const nested = [[1, 2], [3, 4], [5, 6]];
const flattened = nested.reduce((acc, arr) => acc.concat(arr), []);
console.log(flattened); // [1, 2, 3, 4, 5, 6]
Tapi di modern JavaScript, lebih gampang pake method flat():
const flattened = nested.flat(); // lebih simple
Initial Value Itu Penting
Selalu kasih initial value di parameter kedua reduce(). Kenapa? Karena kalo nggak, reduce() bakal pake element pertama sebagai initial value dan skip element pertama di iteration.
const numbers = [1, 2, 3, 4, 5];
// Dengan initial value
const sum1 = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum1); // 15
// Tanpa initial value (nggak recommended)
const sum2 = numbers.reduce((acc, num) => acc + num);
console.log(sum2); // 15 (kebetulan sama)
Tapi coba kalo arraynya kosong:
const empty = [];
// Dengan initial value - aman
const sum1 = empty.reduce((acc, num) => acc + num, 0);
console.log(sum1); // 0
// Tanpa initial value - error!
const sum2 = empty.reduce((acc, num) => acc + num);
// Error: Reduce of empty array with no initial value
Kapan Pake reduce()?
Gunakan reduce() ketika:
- Kamu butuh aggregate array ke single value
- Kamu butuh sum, average, atau calculations lainnya
- Kamu butuh transform array ke object atau structure lain
- Kamu butuh grouping atau counting
Jangan pake reduce() ketika:
- Ada method lain yang lebih simple (map, filter, etc)
- Logic-nya terlalu complex dan bikin susah dibaca
- Kamu bisa pake loop biasa yang lebih jelas
Skip Deep Dive - Pake di Project Nanti
Jujur aja, reduce() ini adalah method yang butuh practice buat bener-bener paham. Nggak apa-apa kalo kamu masih bingung sekarang. Yang penting kamu tau konsep dasarnya dan beberapa use case umum.
Di tahap belajar awal, lebih baik fokus ke map(), filter(), dan find() dulu karena mereka lebih sering dipake dan lebih straightforward. Reduce() itu kayak advanced tool yang nanti kamu butuhin pas udah tackle problem yang lebih complex.
Banyak developer professional pun lebih suka pake combinations dari map/filter daripada reduce karena lebih readable:
// Pake reduce (powerful tapi agak susah dibaca)
const total = products
.reduce((sum, p) => p.category === "electronics" ? sum + p.price : sum, 0);
// Pake filter + reduce (lebih jelas)
const total = products
.filter(p => p.category === "electronics")
.reduce((sum, p) => sum + p.price, 0);
// Atau bahkan pake filter + map + manual sum (paling jelas)
const prices = products
.filter(p => p.category === "electronics")
.map(p => p.price);
const total = prices.reduce((sum, p) => sum + p, 0);
Common Mistakes
Kesalahan 1: Lupa return accumulator
// Salah - lupa return
const sum = [1, 2, 3].reduce((acc, num) => {
acc + num; // ini nggak ke-return
}, 0);
console.log(sum); // undefined
// Benar
const sum = [1, 2, 3].reduce((acc, num) => {
return acc + num;
}, 0);
Kesalahan 2: Nggak kasih initial value
// Risky
const sum = numbers.reduce((acc, num) => acc + num);
// Safer
const sum = numbers.reduce((acc, num) => acc + num, 0);
Kesalahan 3: Over-complicated logic
// Terlalu complex
const result = data.reduce((acc, item) => {
// 20 lines of logic
// susah dibaca dan maintain
}, {});
// Lebih baik split jadi beberapa steps
const filtered = data.filter(...);
const mapped = filtered.map(...);
const result = mapped.reduce(...);
Praktek di BuildWithAngga
Kalo kamu lagi belajar di BuildWithAngga, reduce() bakal berguna banget pas kamu bikin fitur kayak:
Shopping cart total:
const cartItems = [
{ name: "Course A", price: 500000, qty: 1 },
{ name: "Course B", price: 300000, qty: 2 }
];
const total = cartItems.reduce((sum, item) => {
return sum + (item.price * item.qty);
}, 0);
console.log(total); // 1100000
Statistics atau analytics:
const enrollments = [
{ course: "JavaScript", students: 150 },
{ course: "React", students: 120 },
{ course: "Vue", students: 80 }
];
const totalStudents = enrollments.reduce((sum, e) => sum + e.students, 0);
console.log(totalStudents); // 350
Yang penting inget: reduce() adalah tool yang powerful, tapi nggak harus dipake di semua case. Kalo ada cara yang lebih simple dan readable, pake itu. Readability over cleverness. Nanti seiring waktu dan practice, kamu bakal makin comfortable pake reduce() di situasi yang tepat.
Array Method Decision Tree
Oke setelah kita bahas banyak banget array methods, sekarang kamu mungkin bingung: "kapan sih gue harus pake method yang mana?". Tenang, di section ini kita bakal bikin decision tree atau panduan yang bantuin kamu milih method yang tepat sesuai kebutuhan.
Bayangin kamu lagi di persimpangan jalan dan harus pilih arah. Decision tree ini kayak peta yang nunjukin jalan mana yang harus kamu ambil berdasarkan tujuan kamu.
Transform Data → map()
Kalo kamu butuh transform atau ubah setiap element di array dan dapet array baru dengan panjang yang sama, pake map().
// Skenario: ubah semua nama jadi uppercase
const names = ["andi", "budi", "citra"];
const uppercased = names.map(name => name.toUpperCase());
// ["ANDI", "BUDI", "CITRA"]
// Skenario: extract property dari objects
const users = [
{ id: 1, name: "Andi", age: 25 },
{ id: 2, name: "Budi", age: 30 }
];
const userNames = users.map(user => user.name);
// ["Andi", "Budi"]
Key questions buat pake map():
- Apakah jumlah element hasil sama dengan array original?
- Apakah setiap element perlu di-transform?
- Apakah butuh return array baru?
Kalo jawabannya "iya" semua, pake map().
Select Data → filter()
Kalo kamu butuh "menyaring" atau "memilih" element berdasarkan kondisi tertentu, pake filter(). Hasilnya adalah array baru yang isinya cuma element yang memenuhi kondisi.
// Skenario: ambil cuma angka genap
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(num => num % 2 === 0);
// [2, 4, 6]
// Skenario: filter products by category
const products = [
{ name: "Laptop", category: "electronics", price: 10000000 },
{ name: "Buku", category: "books", price: 50000 },
{ name: "Mouse", category: "electronics", price: 150000 }
];
const electronics = products.filter(p => p.category === "electronics");
// [Laptop, Mouse]
Key questions buat pake filter():
- Apakah butuh subset dari array?
- Apakah ada kondisi yang harus dipenuhi?
- Apakah jumlah hasil bisa berbeda dari original?
Kalo jawabannya "iya", pake filter().
Find Single Item → find()
Kalo kamu cuma butuh satu element pertama yang match kondisi tertentu, pake find(). Ini lebih efficient daripada filter() kalo kamu tau cuma butuh satu item.
// Skenario: find user by ID
const users = [
{ id: 1, name: "Andi" },
{ id: 2, name: "Budi" },
{ id: 3, name: "Citra" }
];
const user = users.find(u => u.id === 2);
// { id: 2, name: "Budi" }
// Skenario: find first item yang match
const numbers = [1, 3, 5, 8, 10];
const firstEven = numbers.find(num => num % 2 === 0);
// 8
Key questions buat pake find():
- Apakah cuma butuh satu item?
- Apakah item pertama yang match sudah cukup?
- Apakah bisa handle undefined kalo nggak ketemu?
Kalo jawabannya "iya", pake find().
Side Effect → forEach()
Kalo kamu butuh loop through array buat melakukan sesuatu (console.log, update DOM, call API) tanpa butuh return value, pake forEach().
// Skenario: console.log setiap item
const fruits = ["apel", "jeruk", "mangga"];
fruits.forEach(fruit => {
console.log(`I like ${fruit}`);
});
// Skenario: update DOM
const listItems = ["Item 1", "Item 2", "Item 3"];
listItems.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
document.querySelector('ul').appendChild(li);
});
// Skenario: call API untuk setiap item
const userIds = [1, 2, 3];
userIds.forEach(id => {
fetch(`/api/users/${id}`)
.then(response => response.json())
.then(data => console.log(data));
});
Key questions buat pake forEach():
- Apakah nggak butuh return value?
- Apakah purely buat side effects?
- Apakah nggak butuh break atau continue?
Kalo jawabannya "iya", pake forEach().
Aggregate → reduce()
Kalo kamu butuh "mengumpulkan" atau "aggregate" array jadi single value (number, string, object, dll), pake reduce().
// Skenario: sum semua numbers
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
// 15
// Skenario: calculate total price
const cart = [
{ name: "Item 1", price: 100000, qty: 2 },
{ name: "Item 2", price: 50000, qty: 1 }
];
const total = cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
// 250000
// Skenario: group by category
const items = [
{ name: "A", category: "x" },
{ name: "B", category: "y" },
{ name: "C", category: "x" }
];
const grouped = items.reduce((acc, item) => {
if (!acc[item.category]) acc[item.category] = [];
acc[item.category].push(item);
return acc;
}, {});
// { x: [A, C], y: [B] }
Key questions buat pake reduce():
- Apakah butuh single value dari array?
- Apakah ada accumulation atau aggregation?
- Apakah nggak bisa pake method lain yang lebih simple?
Kalo jawabannya "iya", consider pake reduce().
Check Exist → includes(), some()
Kalo kamu cuma mau tau apakah element atau kondisi tertentu exist di array, pake includes() atau some().
// includes() - check primitive value exist
const fruits = ["apel", "jeruk", "mangga"];
const hasApple = fruits.includes("apel");
// true
// some() - check kondisi exist
const numbers = [1, 3, 5, 7, 8];
const hasEven = numbers.some(num => num % 2 === 0);
// true
// some() dengan objects
const users = [
{ name: "Andi", role: "admin" },
{ name: "Budi", role: "user" }
];
const hasAdmin = users.some(user => user.role === "admin");
// true
Key questions buat pake includes()/some():
- Apakah cuma butuh true/false?
- Apakah nggak butuh element actualnya?
- Apakah nggak butuh index atau position?
Kalo jawabannya "iya", pake includes() atau some().
Combine Arrays → concat()
Kalo kamu butuh gabungin dua atau lebih arrays jadi satu, pake concat() atau spread operator.
// concat() - traditional way
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2);
// [1, 2, 3, 4, 5, 6]
// spread operator - modern way
const combined = [...arr1, ...arr2];
// [1, 2, 3, 4, 5, 6]
// combine multiple arrays
const morning = ["kopi", "roti"];
const lunch = ["nasi", "ayam"];
const dinner = ["mie"];
const allMeals = morning.concat(lunch, dinner);
// atau
const allMeals = [...morning, ...lunch, ...dinner];
Key questions buat pake concat():
- Apakah butuh merge arrays?
- Apakah array original harus tetap utuh?
- Apakah nggak butuh flatten nested arrays?
Kalo jawabannya "iya", pake concat() atau spread operator.
Decision Flow Chart
Buat memudahkan, ini adalah flow chart sederhana yang bisa kamu ikuti:
Start: Apa yang mau kamu lakuin?
├─ Transform setiap element? → map()
├─ Filter berdasarkan kondisi? → filter()
├─ Cari satu item? → find() / findIndex()
├─ Loop buat side effect? → forEach()
├─ Aggregate ke single value? → reduce()
├─ Check apakah exist? → includes() / some()
├─ Gabungin arrays? → concat() / spread
└─ Yang lain? → Cek dokumentasi atau tanya
Combining Methods (Chaining)
Yang keren dari array methods adalah kamu bisa chain atau gabungin beberapa methods sekaligus:
// Filter dulu, terus map, terus reduce
const products = [
{ name: "Laptop", category: "electronics", price: 10000000 },
{ name: "Mouse", category: "electronics", price: 150000 },
{ name: "Buku", category: "books", price: 50000 },
{ name: "Keyboard", category: "electronics", price: 500000 }
];
const totalElectronicsPrice = products
.filter(p => p.category === "electronics") // ambil electronics aja
.map(p => p.price) // extract harga
.reduce((sum, price) => sum + price, 0); // sum semua
console.log(totalElectronicsPrice); // 10650000
Tapi inget, jangan over-chain sampe bikin susah dibaca. Kalo udah terlalu panjang, mending split jadi beberapa steps.
Tips Memilih Method yang Tepat
- Mulai dari yang simple dulu. Jangan langsung loncat ke reduce() kalo filter() atau map() udah cukup.
- Pikirkan output yang kamu butuhin:
- Array baru dengan same length → map()
- Array baru dengan different length → filter()
- Single value → find() atau reduce()
- Boolean → includes(), some(), every()
- No return value → forEach()
- Readability over cleverness. Kalo ada cara yang lebih jelas meskipun lebih panjang, pake itu.
- Practice makes perfect. Makin sering pake, makin natural milih method yang tepat.
Praktek di BuildWithAngga
Di real-world project BuildWithAngga, kamu bakal sering combine beberapa methods ini. Misalnya:
Search & filter feature:
const courses = [...]; // list courses
const searchTerm = "javascript";
const category = "programming";
const results = courses
.filter(c => c.category === category)
.filter(c => c.title.toLowerCase().includes(searchTerm.toLowerCase()))
.map(c => ({
id: c.id,
title: c.title,
instructor: c.instructor
}));
Shopping cart calculation:
const cart = [...]; // cart items
const subtotal = cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
const itemCount = cart.reduce((count, item) => count + item.qty, 0);
const hasDiscount = cart.some(item => item.discount > 0);
Biasain diri buat refer ke decision tree ini pas kamu bingung mau pake method yang mana. Lama-lama bakal jadi muscle memory dan kamu nggak perlu mikir lagi.
Array of Objects (Real Use Case)
Oke sekarang kita masuk ke bagian yang super penting dan paling sering kamu temuin di real-world development: array of objects. Ini bukan cuma teori lagi, tapi beneran pattern yang bakal kamu pake setiap hari pas bikin aplikasi web.
Kenapa array of objects itu penting? Karena hampir semua data yang dateng dari API atau database berbentuk kayak gini. User data, product list, blog posts, comments, transactions, semuanya array of objects. Jadi kalo kamu master ini, kamu udah master 80% dari data manipulation di aplikasi modern.
Common Pattern di Aplikasi
Di aplikasi real-world, jarang banget kamu kerja dengan array sederhana kayak [1, 2, 3] atau ["a", "b", "c"]. Yang lebih sering adalah array yang isinya objects dengan berbagai properties.
Contoh pattern yang paling umum:
// User data
const users = [
{ id: 1, name: "Andi", age: 25, email: "[email protected]", role: "admin" },
{ id: 2, name: "Budi", age: 17, email: "[email protected]", role: "user" },
{ id: 3, name: "Citra", age: 22, email: "[email protected]", role: "user" }
];
// Product list
const products = [
{ id: 101, name: "Laptop", price: 10000000, category: "electronics", stock: 5 },
{ id: 102, name: "Mouse", price: 150000, category: "electronics", stock: 20 },
{ id: 103, name: "Buku", price: 50000, category: "books", stock: 100 }
];
// Todo items
const todos = [
{ id: 1, task: "Belajar JavaScript", completed: false, priority: "high" },
{ id: 2, task: "Bikin Project", completed: false, priority: "medium" },
{ id: 3, task: "Deploy ke Server", completed: true, priority: "low" }
];
Liat kan? Setiap item adalah object dengan multiple properties. Nah, array methods yang udah kita pelajari sebelumnya jadi super powerful buat manipulasi data kayak gini.
Filter dengan Array of Objects
Filter() adalah method yang paling sering dipake buat array of objects. Kamu bisa filter berdasarkan property apapun.
Contoh filter users berdasarkan age:
const users = [
{ id: 1, name: "Andi", age: 25, email: "[email protected]" },
{ id: 2, name: "Budi", age: 17, email: "[email protected]" },
{ id: 3, name: "Citra", age: 22, email: "[email protected]" }
];
// Filter user yang udah dewasa (>= 18)
const adults = users.filter(user => user.age >= 18);
console.log(adults);
// [
// { id: 1, name: "Andi", age: 25, ... },
// { id: 3, name: "Citra", age: 22, ... }
// ]
Contoh filter products by category:
const products = [
{ id: 101, name: "Laptop", price: 10000000, category: "electronics" },
{ id: 102, name: "Mouse", price: 150000, category: "electronics" },
{ id: 103, name: "Buku", price: 50000, category: "books" }
];
const electronics = products.filter(product => product.category === "electronics");
console.log(electronics);
// [Laptop, Mouse]
Filter dengan multiple conditions:
// Filter electronics yang harganya di bawah 1 juta
const affordableElectronics = products.filter(product => {
return product.category === "electronics" && product.price < 1000000;
});
Filter todos yang belum completed:
const todos = [
{ id: 1, task: "Belajar JavaScript", completed: false },
{ id: 2, task: "Bikin Project", completed: false },
{ id: 3, task: "Deploy ke Server", completed: true }
];
const pending = todos.filter(todo => !todo.completed);
// atau
const pending = todos.filter(todo => todo.completed === false);
Map dengan Array of Objects
Map() sering dipake buat extract specific property atau transform objects jadi format yang berbeda.
Extract property tertentu:
const users = [
{ id: 1, name: "Andi", age: 25, email: "[email protected]" },
{ id: 2, name: "Budi", age: 17, email: "[email protected]" },
{ id: 3, name: "Citra", age: 22, email: "[email protected]" }
];
// Ambil cuma names
const names = users.map(user => user.name);
console.log(names); // ["Andi", "Budi", "Citra"]
// Ambil cuma emails
const emails = users.map(user => user.email);
console.log(emails); // ["[email protected]", "[email protected]", "[email protected]"]
Transform ke format baru:
// Bikin format yang lebih simple
const simplifiedUsers = users.map(user => ({
id: user.id,
displayName: user.name,
contact: user.email
}));
console.log(simplifiedUsers);
// [
// { id: 1, displayName: "Andi", contact: "[email protected]" },
// { id: 2, displayName: "Budi", contact: "[email protected]" },
// { id: 3, displayName: "Citra", contact: "[email protected]" }
// ]
Add computed property:
const products = [
{ name: "Laptop", price: 10000000, discount: 0.1 },
{ name: "Mouse", price: 150000, discount: 0.2 }
];
const productsWithFinalPrice = products.map(product => ({
...product,
finalPrice: product.price * (1 - product.discount)
}));
console.log(productsWithFinalPrice);
// [
// { name: "Laptop", price: 10000000, discount: 0.1, finalPrice: 9000000 },
// { name: "Mouse", price: 150000, discount: 0.2, finalPrice: 120000 }
// ]
Find dengan Array of Objects
Find() perfect buat nyari specific item berdasarkan unique identifier kayak ID.
Find user by ID:
const users = [
{ id: 1, name: "Andi", age: 25 },
{ id: 2, name: "Budi", age: 17 },
{ id: 3, name: "Citra", age: 22 }
];
const targetUser = users.find(user => user.id === 2);
console.log(targetUser);
// { id: 2, name: "Budi", age: 17 }
Find product by name:
const products = [
{ id: 101, name: "Laptop", price: 10000000 },
{ id: 102, name: "Mouse", price: 150000 }
];
const laptop = products.find(product => product.name === "Laptop");
console.log(laptop);
// { id: 101, name: "Laptop", price: 10000000 }
Find dengan kondisi complex:
const users = [
{ id: 1, name: "Andi", age: 25, role: "admin" },
{ id: 2, name: "Budi", age: 30, role: "admin" },
{ id: 3, name: "Citra", age: 22, role: "user" }
];
// Find first admin yang age > 25
const seniorAdmin = users.find(user => {
return user.role === "admin" && user.age > 25;
});
console.log(seniorAdmin);
// { id: 2, name: "Budi", age: 30, role: "admin" }
Real Use Case: User Data
Ini contoh lengkap gimana kamu manipulasi user data di aplikasi real:
const users = [
{ id: 1, name: "Andi", age: 25, email: "[email protected]", role: "admin", active: true },
{ id: 2, name: "Budi", age: 17, email: "[email protected]", role: "user", active: false },
{ id: 3, name: "Citra", age: 22, email: "[email protected]", role: "user", active: true },
{ id: 4, name: "Dewi", age: 30, email: "[email protected]", role: "moderator", active: true }
];
// Get all active users
const activeUsers = users.filter(user => user.active);
// Get all admin emails
const adminEmails = users
.filter(user => user.role === "admin")
.map(user => user.email);
// Find specific user
const targetUser = users.find(user => user.id === 3);
// Get adult users names only
const adultNames = users
.filter(user => user.age >= 18)
.map(user => user.name);
// Count total active users
const activeCount = users.filter(user => user.active).length;
Real Use Case: Product List
Contoh manipulasi product list seperti di e-commerce:
const products = [
{ id: 1, name: "Laptop", price: 10000000, category: "electronics", stock: 5, featured: true },
{ id: 2, name: "Mouse", price: 150000, category: "electronics", stock: 20, featured: false },
{ id: 3, name: "Buku JS", price: 50000, category: "books", stock: 0, featured: true },
{ id: 4, name: "Keyboard", price: 500000, category: "electronics", stock: 10, featured: false }
];
// Get featured products yang in stock
const featuredInStock = products.filter(p => p.featured && p.stock > 0);
// Get product names dengan harga
const productInfo = products.map(p => ({
name: p.name,
price: `Rp ${p.price.toLocaleString()}`
}));
// Find expensive products (> 1jt)
const expensiveProducts = products.filter(p => p.price > 1000000);
// Calculate total inventory value
const totalValue = products.reduce((sum, p) => {
return sum + (p.price * p.stock);
}, 0);
// Get categories (unique)
const categories = [...new Set(products.map(p => p.category))];
Real Use Case: Todo Items
Contoh todo app yang classic tapi powerful:
const todos = [
{ id: 1, task: "Belajar JavaScript", completed: false, priority: "high", dueDate: "2024-01-15" },
{ id: 2, task: "Bikin Project Portfolio", completed: false, priority: "medium", dueDate: "2024-01-20" },
{ id: 3, task: "Deploy ke Vercel", completed: true, priority: "low", dueDate: "2024-01-10" },
{ id: 4, task: "Code Review", completed: false, priority: "high", dueDate: "2024-01-12" }
];
// Get pending tasks
const pending = todos.filter(todo => !todo.completed);
// Get high priority tasks yang belum completed
const urgentTasks = todos.filter(todo => {
return todo.priority === "high" && !todo.completed;
});
// Get task names only
const taskNames = todos.map(todo => todo.task);
// Toggle task completion
const toggledTodos = todos.map(todo => {
if (todo.id === 2) {
return { ...todo, completed: !todo.completed };
}
return todo;
});
// Count completed vs pending
const stats = {
completed: todos.filter(t => t.completed).length,
pending: todos.filter(t => !t.completed).length,
total: todos.length
};
Combining Operations
Yang powerful dari array methods adalah kamu bisa combine beberapa operations sekaligus:
const users = [
{ id: 1, name: "Andi", age: 25, courses: ["JS", "React"] },
{ id: 2, name: "Budi", age: 17, courses: ["HTML", "CSS"] },
{ id: 3, name: "Citra", age: 22, courses: ["Vue", "Node"] }
];
// Get names of adult users who have more than 1 course
const result = users
.filter(user => user.age >= 18)
.filter(user => user.courses.length > 1)
.map(user => user.name);
console.log(result); // ["Andi", "Citra"]
Praktek di BuildWithAngga
Di platform BuildWithAngga, array of objects adalah pattern utama buat handle:
Course catalog:
const courses = [
{ id: 1, title: "JavaScript Fundamental", instructor: "John", price: 500000, students: 150 },
{ id: 2, title: "React for Beginners", instructor: "Jane", price: 600000, students: 120 },
{ id: 3, title: "Vue Mastery", instructor: "John", price: 550000, students: 80 }
];
// Filter by instructor
const johnCourses = courses.filter(c => c.instructor === "John");
// Sort by students (descending)
const popular = courses.sort((a, b) => b.students - a.students);
// Calculate total revenue
const totalRevenue = courses.reduce((sum, c) => sum + (c.price * c.students), 0);
Biasain diri kerja dengan array of objects. Ini adalah skill fundamental yang bakal kamu pake terus-menerus di profesional development. Practice dengan data real kayak user list, product catalog, atau transaction history buat makin mahir.
Common Mistakes
Oke sekarang kita bahas kesalahan-kesalahan yang paling sering dilakuin sama pemula (dan kadang developer experienced juga) pas kerja dengan arrays. Kalo kamu aware sama mistakes ini dari awal, kamu bisa save banyak waktu debugging dan avoid frustration yang nggak perlu.
Anggep aja ini kayak cheat sheet dari kesalahan-kesalahan yang udah dilakuin ribuan developer sebelum kamu. Belajar dari kesalahan orang lain itu jauh lebih murah daripada belajar dari kesalahan sendiri.
Mistake 1: Confusing push/pop/shift/unshift Order
Ini salah satu kesalahan paling classic. Banyak pemula bingung method mana yang buat add/remove dari depan atau belakang array.
const fruits = ["apel", "jeruk", "mangga"];
// Salah konsep
fruits.push("pisang"); // ini add di BELAKANG, bukan depan
fruits.unshift("anggur"); // ini add di DEPAN, bukan belakang
// Result: ["anggur", "apel", "jeruk", "mangga", "pisang"]
Cara gampang nginget:
- push() → "push to the end" → add di belakang
- pop() → "pop from the end" → remove dari belakang
- unshift() → "shift to the front" → add di depan
- shift() → "shift from the front" → remove dari depan
Atau pake analogi antrian:
- push/pop → bekerja di AKHIR array (stack behavior)
- shift/unshift → bekerja di AWAL array (queue behavior)
const numbers = [1, 2, 3];
numbers.push(4); // [1, 2, 3, 4] - add di belakang
numbers.pop(); // [1, 2, 3] - remove dari belakang
numbers.unshift(0); // [0, 1, 2, 3] - add di depan
numbers.shift(); // [1, 2, 3] - remove dari depan
Pro tip: kalo masih bingung, coba console.log setelah setiap operation buat liat perubahan arraynya. Practice is key.
Mistake 2: Using map() untuk Side Effect
Ini kesalahan yang sangat umum. Map() itu designed buat transform data dan return array baru, bukan buat side effects.
const numbers = [1, 2, 3, 4, 5];
// Salah - pake map cuma buat console.log
const result = numbers.map(num => {
console.log(num); // ini side effect
return num; // return ini jadi nggak berguna
});
// Benar - pake forEach buat side effect
numbers.forEach(num => {
console.log(num);
});
Kenapa ini penting? Karena map() selalu create array baru, jadi kalo kamu nggak pake return valuenya, kamu waste memory dan processing power.
const users = [
{ id: 1, name: "Andi" },
{ id: 2, name: "Budi" }
];
// Salah - map() tapi nggak pake hasilnya
users.map(user => {
console.log(`Processing ${user.name}`);
// update database or DOM
});
// Benar - forEach() buat side effects
users.forEach(user => {
console.log(`Processing ${user.name}`);
// update database or DOM
});
// Benar - map() kalo emang butuh transform
const names = users.map(user => user.name);
Rule of thumb: kalo kamu nggak assign hasil map() ke variable atau nggak return sesuatu yang valuable, berarti kamu salah pake map(). Ganti ke forEach().
Mistake 3: Using for...in untuk Array
Ini adalah mistake yang bisa bikin bugs yang subtle dan susah di-debug. For...in itu designed buat iterate object properties, bukan array elements.
const fruits = ["apel", "jeruk", "mangga"];
// Salah - pake for...in
for (let key in fruits) {
console.log(key); // "0", "1", "2" (string!)
console.log(fruits[key]); // works, tapi nggak recommended
}
// Benar - pake for...of atau for loop
for (let fruit of fruits) {
console.log(fruit); // "apel", "jeruk", "mangga"
}
// Atau traditional for loop
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// Atau forEach
fruits.forEach(fruit => console.log(fruit));
Kenapa for...in berbahaya buat array?
- Dia iterate enumerable properties, bukan cuma array elements
- Order nggak guaranteed
- Bisa iterate inherited properties
- Index jadi string, bukan number
const arr = [1, 2, 3];
arr.customProperty = "oops";
// for...in bakal iterate customProperty juga
for (let key in arr) {
console.log(key); // "0", "1", "2", "customProperty" - unexpected!
}
// for...of cuma iterate elements
for (let value of arr) {
console.log(value); // 1, 2, 3 - as expected
}
Mistake 4: Index Off-by-One Error
Ini adalah classic bug yang bahkan dialamin developer experienced. Inget, array index mulai dari 0, bukan 1.
const students = ["Andi", "Budi", "Citra"];
// Salah - akses index yang nggak ada
console.log(students[3]); // undefined - harusnya index 2
// Benar
console.log(students[0]); // "Andi" - first element
console.log(students[2]); // "Citra" - last element
console.log(students[students.length - 1]); // "Citra" - safe way to get last
Kesalahan umum di loop:
const numbers = [1, 2, 3, 4, 5];
// Salah - loop sampe length (out of bounds)
for (let i = 0; i <= numbers.length; i++) {
console.log(numbers[i]); // undefined di iteration terakhir
}
// Benar - loop sampe length - 1
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
Mental model yang helpful:
- Length adalah jumlah elements
- Index terakhir adalah length - 1
- Range valid: 0 sampai length - 1
const arr = ["a", "b", "c"];
console.log(arr.length); // 3 (jumlah elements)
console.log(arr[arr.length]); // undefined (out of bounds)
console.log(arr[arr.length - 1]); // "c" (last element)
Mistake 5: Mutating When Shouldn't
Ini adalah source of bugs yang paling sering dan paling frustrating. Mutating array directly bisa cause unexpected behavior, especially pas kamu share reference ke array tersebut.
const originalScores = [80, 90, 100];
const scores = originalScores; // ini BUKAN copy, ini reference!
scores.push(70);
console.log(originalScores); // [80, 90, 100, 70] - ikut berubah!
Kenapa ini terjadi? Karena array (dan objects) di JavaScript itu passed by reference, bukan by value. Jadi scores dan originalScores pointing ke array yang sama di memory.
// Problem: mutating shared array
function addBonus(scores) {
scores.push(100); // mutate original array
return scores;
}
const studentScores = [80, 85, 90];
const bonusScores = addBonus(studentScores);
console.log(studentScores); // [80, 85, 90, 100] - unexpected mutation!
Solution: bikin copy dulu sebelum mutate, atau pake non-mutating methods.
// Solution 1: bikin copy pake spread operator
const originalScores = [80, 90, 100];
const scores = [...originalScores]; // copy array
scores.push(70);
console.log(originalScores); // [80, 90, 100] - tetep utuh
// Solution 2: pake non-mutating methods
function addBonus(scores) {
return [...scores, 100]; // return new array
}
const studentScores = [80, 85, 90];
const bonusScores = addBonus(studentScores);
console.log(studentScores); // [80, 85, 90] - tetep utuh
console.log(bonusScores); // [80, 85, 90, 100] - new array
Real-world example yang sering cause bugs:
// BAD: mutating array di component state (React example)
const [items, setItems] = useState([1, 2, 3]);
// Salah - mutate langsung
const handleAdd = () => {
items.push(4); // ini nggak trigger re-render di React!
setItems(items);
};
// Benar - bikin array baru
const handleAdd = () => {
setItems([...items, 4]); // create new array
};
Tips: Non-Mutating Method Safer
Especially dalam state management (React, Vue, Redux, dll), non-mutating approach adalah best practice. Kenapa?
- Predictability - kamu tau data original nggak bakal berubah
- Debugging - easier track changes
- Performance - framework bisa optimize dengan shallow comparison
- Time-travel debugging - bisa undo/redo changes
// Mutating approach (avoid)
const addItem = (arr, item) => {
arr.push(item);
return arr;
};
// Non-mutating approach (preferred)
const addItem = (arr, item) => {
return [...arr, item];
};
// Mutating (avoid)
const removeItem = (arr, index) => {
arr.splice(index, 1);
return arr;
};
// Non-mutating (preferred)
const removeItem = (arr, index) => {
return arr.filter((_, i) => i !== index);
};
// Mutating (avoid)
const updateItem = (arr, index, value) => {
arr[index] = value;
return arr;
};
// Non-mutating (preferred)
const updateItem = (arr, index, value) => {
return arr.map((item, i) => i === index ? value : item);
};
Checklist untuk Avoid Common Mistakes
Sebelum run kode kamu, cek dulu:
- Apakah pake method yang tepat? (map vs forEach, find vs filter)
- Apakah loop-nya correct? (for...of bukan for...in)
- Apakah handle index dengan benar? (0-based, length - 1)
- Apakah mutating array yang shared? (bikin copy dulu)
- Apakah ada edge cases? (empty array, single element, etc)
// Good practice template
const processArray = (arr) => {
// Guard clause buat empty array
if (!arr || arr.length === 0) {
return [];
}
// Bikin copy kalo mau mutate
const result = [...arr];
// Process dengan method yang tepat
return result.filter(x => x > 0).map(x => x * 2);
};
Praktek di BuildWithAngga
Di real-world project BuildWithAngga, awareness terhadap mistakes ini sangat penting:
State management di React:
// BAD
const addCourse = (courseId) => {
courses.push(courseId); // mutate langsung
setCourses(courses);
};
// GOOD
const addCourse = (courseId) => {
setCourses([...courses, courseId]); // new array
};
Filtering & mapping data:
// BAD - pake map buat side effect
students.map(student => {
console.log(student.name);
updateDatabase(student);
});
// GOOD - pake forEach
students.forEach(student => {
console.log(student.name);
updateDatabase(student);
});
Biasain diri follow best practices ini dari awal. Mungkin awalnya terasa lebih effort, tapi trust me, ini bakal save kamu dari berjam-jam debugging di masa depan. Mencegah lebih baik daripada mengobati, terutama dalam pemrograman.
Challenge
Oke sekarang waktunya praktek! Nggak ada yang namanya jadi jago coding tanpa hands-on practice. Teori udah kita bahas panjang lebar, sekarang saatnya kamu buktiin pemahaman kamu dengan ngerjain beberapa challenges.
Jangan takut salah, jangan takut stuck. Itu semua bagian dari proses belajar. Yang penting kamu nyoba dulu, kalo stuck baru liat hint atau solution. Remember, struggling is learning.
Challenge 1: Filter Genap & Sum
Buat array berisi 5 numbers, filter cuma yang genap, terus sum hasilnya.
Requirements:
- Array harus berisi 5 numbers (bebas angka berapa aja)
- Filter cuma yang genap (habis dibagi 2)
- Sum semua angka hasil filter
- Print hasil akhirnya
Hint:
- Pake filter() buat ambil yang genap
- Pake reduce() buat sum
- Atau bisa chain: filter().reduce()
Coba dulu sebelum liat solution!
// Tempat kamu nulis kode
// Expected output example:
// Array: [1, 2, 3, 4, 5]
// Even numbers: [2, 4]
// Sum: 6
Solution:
// Solution 1: Step by step
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log("Even numbers:", evenNumbers); // [2, 4]
const sum = evenNumbers.reduce((total, num) => total + num, 0);
console.log("Sum:", sum); // 6
// Solution 2: Chaining
const numbers = [1, 2, 3, 4, 5];
const result = numbers
.filter(num => num % 2 === 0)
.reduce((total, num) => total + num, 0);
console.log("Result:", result); // 6
// Solution 3: With different numbers
const numbers = [10, 15, 20, 25, 30];
const sum = numbers
.filter(num => num % 2 === 0)
.reduce((acc, num) => acc + num, 0);
console.log("Sum of even numbers:", sum); // 60 (10 + 20 + 30)
Challenge 2: Filter User & Display Name
Buat array berisi 3 objects user (dengan properti name dan age), filter yang age > 25, terus display cuma namenya.
Requirements:
- Array harus berisi 3 user objects
- Setiap object punya properti: name dan age
- Filter user yang age > 25
- Display/print cuma name-nya
Hint:
- Bikin array of objects dulu
- Pake filter() buat seleksi berdasarkan age
- Pake map() buat ambil name aja
- Atau forEach() buat display
Coba dulu sebelum liat solution!
// Tempat kamu nulis kode
// Expected output example:
// Users above 25: ["Budi", "Dewi"]
Solution:
// Solution 1: Complete
const users = [
{ name: "Andi", age: 22 },
{ name: "Budi", age: 30 },
{ name: "Citra", age: 25 },
{ name: "Dewi", age: 28 }
];
// Filter age > 25, ambil names
const names = users
.filter(user => user.age > 25)
.map(user => user.name);
console.log("Users above 25:", names); // ["Budi", "Dewi"]
// Solution 2: Display one by one
const users = [
{ name: "Andi", age: 22 },
{ name: "Budi", age: 30 },
{ name: "Citra", age: 25 },
{ name: "Dewi", age: 28 }
];
console.log("Users above 25:");
users
.filter(user => user.age > 25)
.forEach(user => {
console.log(`- ${user.name} (${user.age} years old)`);
});
// Output:
// Users above 25:
// - Budi (30 years old)
// - Dewi (28 years old)
// Solution 3: Get full objects filtered
const users = [
{ name: "Andi", age: 22 },
{ name: "Budi", age: 30 },
{ name: "Citra", age: 25 },
{ name: "Dewi", age: 28 }
];
const filteredUsers = users.filter(user => user.age > 25);
console.log("Filtered users:", filteredUsers);
// [{ name: "Budi", age: 30 }, { name: "Dewi", age: 28 }]
Challenge 3: Map ke Kuadrat
Buat array berisi numbers, terus map setiap number jadi x² (kuadrat).
Requirements:
- Array berisi minimum 5 numbers
- Transform setiap number jadi kuadratnya
- Display hasil array baru
Hint:
- Pake map() buat transform
- Kuadrat = x * x atau x ** 2
Coba dulu sebelum liat solution!
// Tempat kamu nulis kode
// Expected output example:
// Original: [1, 2, 3, 4, 5]
// Squared: [1, 4, 9, 16, 25]
Solution:
// Solution 1: Basic
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(x => x * x);
console.log("Original:", numbers); // [1, 2, 3, 4, 5]
console.log("Squared:", squared); // [1, 4, 9, 16, 25]
// Solution 2: Dengan ** operator
const numbers = [2, 3, 4, 5, 6];
const squared = numbers.map(x => x ** 2);
console.log("Original:", numbers); // [2, 3, 4, 5, 6]
console.log("Squared:", squared); // [4, 9, 16, 25, 36]
// Solution 3: With Math.pow
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(x => Math.pow(x, 2));
console.log("Squared:", squared); // [1, 4, 9, 16, 25]
// Solution 4: Display with formatting
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
const result = num ** 2;
console.log(`${num}² = ${result}`);
});
// Output:
// 1² = 1
// 2² = 4
// 3² = 9
// 4² = 16
// 5² = 25
Bonus Challenge: Combine Semuanya
Kalo kamu udah berhasil ngerjain tiga challenges di atas, coba challenge yang lebih complex ini:
Buat array products dengan properti: name, price, category. Terus:
- Filter products yang category === "electronics"
- Map buat dapet cuma names
- Display dengan forEach
// Your turn!
// Hint structure:
const products = [
{ name: "Laptop", price: 10000000, category: "electronics" },
{ name: "Buku", price: 50000, category: "books" },
// ... tambah sendiri
];
Solution:
const products = [
{ name: "Laptop", price: 10000000, category: "electronics" },
{ name: "Buku", price: 50000, category: "books" },
{ name: "Mouse", price: 150000, category: "electronics" },
{ name: "Pensil", price: 5000, category: "stationery" },
{ name: "Keyboard", price: 500000, category: "electronics" }
];
console.log("Electronics products:");
products
.filter(p => p.category === "electronics")
.map(p => p.name)
.forEach(name => {
console.log(`- ${name}`);
});
// Output:
// Electronics products:
// - Laptop
// - Mouse
// - Keyboard
Tips Ngerjain Challenge
- Baca requirements dengan teliti. Pahami apa yang diminta sebelum mulai coding.
- Breakdown jadi steps kecil. Jangan langsung pengen nulis kode complex. Pecah jadi langkah-langkah simpel.
- Test setiap step. Jangan nunggu semua selesai baru di-test. Console.log adalah temen terbaik kamu.
- Kalo stuck, coba approach berbeda. Ada banyak cara buat solve satu problem.
- Compare solution kamu dengan solution yang dikasih. Pelajari approach yang berbeda.
Praktek Lebih Lanjut
Kalo kamu mau practice lebih, coba bikin variations dari challenges di atas:
Challenge 1 variations:
- Filter angka ganjil instead of genap
- Hitung average instead of sum
- Filter numbers > 10, terus kalikan semua
Challenge 2 variations:
- Filter berdasarkan role (admin, user, etc)
- Sort by age terus ambil 2 tertua
- Find user dengan age paling muda
Challenge 3 variations:
- Map ke x³ (pangkat tiga)
- Map ke x * 10
- Map ke format currency (Rp 1.000)
Self-Assessment
Setelah ngerjain challenges, tanya ke diri sendiri:
- Apakah kamu paham kenapa pake method tertentu?
- Apakah kamu bisa explain kode kamu ke orang lain?
- Apakah kamu bisa bikin variations sendiri?
- Apakah kamu comfortable dengan array methods sekarang?
Kalo ada yang masih bingung, itu normal banget. Re-read sections yang relevan, practice lagi, dan jangan ragu buat eksperimen dengan kode sendiri.
Next: Objects
Selamat! Kamu udah nge-complete episode tentang Arrays & Essential Methods. Sekarang kamu udah punya foundational knowledge yang solid tentang gimana manipulasi arrays di JavaScript.
Di episode selanjutnya, kita bakal bahas Objects secara mendalam. Objects adalah data structure lain yang super penting di JavaScript, dan kamu bakal sering banget pake objects bersamaan dengan arrays (array of objects, anyone?).
Yang udah kamu pelajari tentang arrays bakal sangat helpful pas kita explore objects nanti. Jadi pastiin kamu comfortable dengan arrays dulu sebelum lanjut.
Keep practicing, keep coding, dan see you di episode selanjutnya tentang Objects!
Call to Action
Sebelum lanjut ke materi berikutnya:
- Ngerjain semua challenges di atas tanpa liat solution dulu
- Bikin variations sendiri dari challenges tersebut
- Practice dengan dataset real (user data, product list, etc)
- Share progress kamu di komunitas BuildWithAngga
- Help temen yang masih struggle dengan arrays
Remember, the more you practice, the more natural it becomes. Arrays adalah fundamental skill yang bakal kamu pake SETIAP HARI sebagai developer. Invest waktu kamu sekarang buat master ini, dan kamu bakal thank yourself nanti.
Happy coding!
.webp)
