Array: Tambah & Hapus Elemen

Analogi: Antrean di Kasir dan Bongkar Pasang Rak

Bayangkan dua situasi. Pertama, antrean kasir: orang baru datang selalu berdiri di BELAKANG (push), dan yang dilayani selalu dari DEPAN (shift). Kedua, rak buku: kamu bisa menyelipkan buku baru di posisi mana pun atau mencabut buku dari tengah (splice), dan kamu bisa memfotokopi sebagian rak tanpa mengacak rak aslinya (slice). Enam method array di modul ini persis seperti itu: push/pop untuk ujung belakang, shift/unshift untuk ujung depan, splice untuk operasi bedah di posisi mana pun, slice untuk menyalin tanpa merusak. Menguasai keenamnya berarti kamu bisa membentuk ulang array sesuai kebutuhan apa pun.

Kenapa Method Ini Ada?

Array yang isinya tetap selamanya tidak berguna di program nyata. Data itu HIDUP: pengguna menambah item ke keranjang (push), membatalkan item terakhir (pop), antrean pelanggan maju satu per satu (shift), admin menyisipkan pengumuman di urutan tertentu (splice). Tanpa method-method ini kamu harus menggeser elemen manual dengan loop, rawan salah dan melelahkan. Method bawaan array mengemas operasi itu menjadi satu panggilan yang teruji. Pembeda pentingnya: sebagian method MENGUBAH array asli (mutasi: push, pop, shift, unshift, splice) dan satu TIDAK (slice, membuat salinan). Salah pilih di antara keduanya adalah sumber bug klasik yang akan kita bedah di bawah.

Contoh 1: Operasi Ujung, Sederhana Dulu

const a = [1, 2, 3];

// Belakang: push (tambah) & pop (ambil)
a.push(4);              // [1, 2, 3, 4]
console.log(a.pop());   // 4 (dikembalikan!), a jadi [1, 2, 3]

// Depan: unshift (tambah) & shift (ambil)
a.unshift(0);           // [0, 1, 2, 3]
console.log(a.shift()); // 0 (dikembalikan!), a jadi [1, 2, 3]

Nilai kembaliannya berguna: push mengembalikan panjang BARU array, pop dan shift mengembalikan ELEMEN yang diambil. Pola ini dipakai untuk "ambil dan proses": const berikutnya = antrean.shift() mengambil orang terdepan SEKALIGUS mengeluarkannya dari antrean dalam satu baris. Catatan performa: push/pop sangat cepat, sedangkan shift/unshift harus menggeser semua index sehingga lebih lambat untuk array raksasa. Untuk antrean besar di aplikasi serius, ada struktur data khusus (queue), tapi untuk ukuran normal shift/unshift baik-baik saja.

Contoh 2: Kasus Nyata, splice Bedah dan slice Fotokopi

splice(index, jumlahHapus, ...sisipan) adalah pisau bedah: hapus beberapa elemen dari posisi tertentu, opsional selipkan pengganti di sana.

// Kasus nyata: daftar peserta yang bisa dicoret & disisipi
const peserta = ["Andi", "Budi", "Citra", "Dedi"];

// Budi mengundurkan diri: hapus 1 elemen dari index 1
peserta.splice(1, 1);
console.log(peserta); // ["Andi", "Citra", "Dedi"]

// Peserta baru "Eko" mendaftar dan disisipkan di index 1 (hapus 0)
peserta.splice(1, 0, "Eko");
console.log(peserta); // ["Andi", "Eko", "Citra", "Dedi"]

slice(awal, akhir) adalah fotokopi: mengambil sebagian TANPA menyentuh aslinya. akhir tidak termasuk (eksklusif).

// Kasus nyata: paginasi, tampilkan 2 produk per halaman
const produk = ["A", "B", "C", "D", "E"];

const halaman1 = produk.slice(0, 2); // ["A", "B"]
const halaman2 = produk.slice(2, 4); // ["C", "D"]
console.log(produk); // ["A","B","C","D","E"] TETAP UTUH

// Trik populer: slice() tanpa argumen = kloning array
const cadangan = produk.slice();

Paginasi, "tampilkan 5 terbaru", pratinjau data: semuanya memakai slice karena datanya tidak boleh rusak. Hafalkan mantra: splice MENGUBAH, slice MENYALIN.

Kesalahan Umum Pemula

1. Tertukar splice dan slice.

const data = [1, 2, 3, 4, 5];

// SALAH: maksudnya menyalin, malah merusak asli!
const salinan = data.splice(0, 2); // data jadi [3,4,5]! rusak!
console.log(data); // [3, 4, 5]

// BENAR: pakai slice untuk menyalin
const data2 = [1, 2, 3, 4, 5];
const salinan2 = data2.slice(0, 2); // [1, 2]
console.log(data2); // [1,2,3,4,5] utuh

Cara mengingat: splice ada huruf P seperti "Potong" (merusak), slice seperti "mengiris fotokopi" (aman). Atau: nama yang LEBIH PANJANG (splice) melakukan hal yang lebih "kasar".

2. Lupa argumen kedua splice.

const buah = ["apel", "mangga", "jeruk", "durian"];

// SALAH: lupa jumlah hapus -> SEMUA dari index 1 terhapus!
buah.splice(1);
console.log(buah); // ["apel"] (mangga, jeruk, durian hilang!)

// BENAR: sebutkan jumlah yang dihapus
const buah2 = ["apel", "mangga", "jeruk", "durian"];
buah2.splice(1, 1); // hapus TEPAT 1
console.log(buah2); // ["apel", "jeruk", "durian"]

splice(index) tanpa jumlah berarti "hapus dari sini sampai akhir". Selalu tulis argumen keduanya secara eksplisit.

3. Mengira pop/shift mengubah tanpa nilai kembali.

const antrean = ["Andi", "Budi"];

// SALAH: membuang nilai kembaliannya, lalu bingung siapa yang keluar
antrean.shift();
console.log("Yang keluar: ???"); // tidak tahu!

// BENAR: tangkap nilai kembaliannya
const selesai = antrean.shift();
console.log("Selesai dilayani:", selesai); // "Andi"
console.log("Sisa antrean:", antrean);     // ["Budi"]

4. Memakai delete untuk menghapus elemen array.

const a = [1, 2, 3];

// SALAH: delete menyisakan lubang!
delete a[1];
console.log(a);        // [1, empty, 3]
console.log(a.length); // 3 (panjang tidak berubah!)

// BENAR: splice benar-benar mencabut elemennya
const b = [1, 2, 3];
b.splice(1, 1);
console.log(b);        // [1, 3]
console.log(b.length); // 2

Operator delete dirancang untuk object, bukan array. Untuk array selalu pakai splice (atau pop/shift untuk ujung).

Ringkasan

Enam method pembentuk array: push tambah belakang, pop ambil belakang, unshift tambah depan, shift ambil depan, splice(index, hapus, ...sisip) bedah di posisi mana pun, slice(awal, akhir) fotokopi tanpa merusak. Lima pertama MENGUBAH array asli, hanya slice yang aman. Nilai kembalian pop/shift (elemen yang diambil) dan push (panjang baru) sayang kalau dibuang. Hindari delete untuk array, dan selalu tulis argumen jumlah di splice.