Mengubah Array

Keranjang belanja di aplikasi toko online tidak pernah diam: Budi menambah barang yang teringat, membatalkan pesanan yang salah masuk, dan menyisipkan pesanan mendesak di tengah antrean dapur. Array dirancang untuk kebutuhan seperti ini — inilah perbedaan terbesarnya dari string yang isinya beku. Method-method di chapter ini mengubah array langsung pada array asalnya, perilaku yang disebut mutasi.

Kita akan membedah empat method pasangan di dua ujung array — push/pop dan unshift/shift — lalu penggantian elemen lewat index, dan terakhir splice yang bekerja di posisi mana pun.

push dan pop: Ujung Belakang #

push menambahkan elemen baru di akhir array, sedangkan pop melepas elemen terakhir. Keduanya juga mengembalikan nilai: push mengembalikan panjang baru array, sedangkan pop mengembalikan elemen yang baru saja dilepas — bukan array-nya.

const antreanCetak = ["Struk 1", "Struk 2"];
antreanCetak.push("Struk 3");
console.log(antreanCetak);
console.log(antreanCetak.pop());
console.log(antreanCetak);

Output yang Dihasilkan:

[ 'Struk 1', 'Struk 2', 'Struk 3' ]
Struk 3
[ 'Struk 1', 'Struk 2' ]

Setelah push, array berisi tiga struk. pop() lalu melepas "Struk 3" dan mengembalikannya ke pemanggil — keluaran kedua adalah elemennya, bukan array — sehingga array kembali berisi dua struk. Bila pop() dipanggil pada array kosong, ia mengembalikan undefined tanpa menimbulkan error.

push juga menerima beberapa nilai sekaligus: kembaliannya tetap panjang array yang baru, dan nilai-nilainya masuk berurutan di ujung belakang. Sifat ini praktis ketika satu langkah program menghasilkan lebih dari satu data baru:

const tugasHarian = ["Menyapu"];
console.log(tugasHarian.push("Mengepel", "Merapikan"));
console.log(tugasHarian);

Output yang Dihasilkan:

3
[ 'Menyapu', 'Mengepel', 'Merapikan' ]

unshift dan shift: Ujung Depan #

Pasangan kedua bekerja di index 0: unshift menyisipkan elemen di depan, shift melepas elemen pertama. Kembalian mereka mengikuti pola yang sama — unshift mengembalikan panjang baru, shift mengembalikan elemen yang dilepas:

const nomorDipanggil = ["A102"];
nomorDipanggil.unshift("A101");
console.log(nomorDipanggil);
console.log(nomorDipanggil.shift());
console.log(nomorDipanggil);

Output yang Dihasilkan:

[ 'A101', 'A102' ]
A101
[ 'A102' ]

Ada satu perbedaan mekanis yang penting di balik layar. Menyisipkan atau melepas elemen di depan memaksa engine menggeser index semua elemen lain — "A102" pindah dari index 0 ke index 1. Pada array besar, shift dan unshift jadi lebih mahal daripada push dan pop yang hanya menyentuh ujung belakang.

Mengganti Elemen lewat Index #

Untuk menimpa satu posisi, kita tidak butuh method: assignment ke index tertentu sudah cukup, dan aturannya sama seperti assignment variabel biasa.

const draf = ["A", "B"];
draf[1] = "C";
console.log(draf);

// Menulis di index yang jauh di luar isi menciptakan lubang.
draf[3] = "E";
console.log(draf);
console.log(draf[2]);

Output yang Dihasilkan:

[ 'A', 'C' ]
[ 'A', 'C', <1 empty item>, 'E' ]
undefined

Baris pertama menunjukkan penggantian yang normal: index 1 yang tadinya "B" kini berisi "C". Dua baris terakhir memperlihatkan jebakannya — assignment ke index 3 pada array yang hanya berisi dua elemen tidak ditolak JavaScript. Engine memperpanjang array sampai index 3 dan membiarkan index 2 kosong, tercetak sebagai <1 empty item>. Lubang seperti ini sulit dilacak karena draf[2] menghasilkan undefined yang tampak sama dengan elemen biasa yang belum diisi.

Penggantian lewat index juga menjadi pasangan alami pencarian posisi: cari posisinya dengan findIndex — method yang menyusul di chapter find, some, dan every — lalu timpa isi slot itu. Kombinasi “cari posisi, ganti isinya” adalah pola pembaruan satu data yang paling sering dipakai pada daftar barang dan daftar pesanan.

Empat Method Ujung dalam Satu Tabel #

Empat method pertama chapter ini membentuk satu keluarga yang mudah dikuasai lewat tabel:

Perbedaan kembalian itu bukan keanehan: push dan unshift menyampaikan panjang barunya, sedangkan pop dan shift harus melaporkan apa yang baru dilepas — dan sering kali nilai itulah yang segera dipakai, misalnya const berikutnya = antrean.shift() untuk mengambil giliran berikutnya sekaligus mengeluarkannya dari daftar dalam satu langkah.

Satu perilaku yang perlu diketahui sejak awal: keempat method ini aman dipanggil pada array kosong. Tidak ada error yang muncul; yang dilepas hanyalah undefined:

const tugasKosong = [];
console.log(tugasKosong.pop());
console.log(tugasKosong.shift());

Output yang Dihasilkan:

undefined
undefined

Pola “ambil dan lepas” dari pop dan shift menjadikan keduanya fondasi antrean dan tumpukan — dua struktur data klasik yang pembahasan penuhnya menunggu di section Collections.

splice: Menghapus dan Menyisipkan di Tengah #

Empat method sebelumnya hanya menyentuh dua ujung. splice bekerja di posisi mana pun dengan bentuk splice(start, deleteCount, ...items): mulai dari index start, hapus sebanyak deleteCount elemen, lalu sisipkan items di tempat yang sama. Kembalian splice adalah array berisi elemen-elemen yang dilepas. Argumen kedua dan ketiga boleh ditiadakan — splice(2) tanpa argumen lain berarti “buang semua elemen mulai index 2”:

const huruf = ["a", "b", "c", "d"];
console.log(huruf.splice(2));
console.log(huruf);

Output yang Dihasilkan:

[ 'c', 'd' ]
[ 'a', 'b' ]

Contoh Lengkap: Satu Antrean, Lima Method #

Berkas berikut mengelola satu antrean dan satu daftar tugas dengan seluruh method chapter ini:

// mengubah-array.js
// push, pop, unshift, shift, penggantian index, dan splice.

// --- 1. push dan pop: bekerja di ujung belakang ---
const antrean = ["Budi", "Siti"];
antrean.push("Rina");
console.log(antrean.push("Dodi")); // push mengembalikan panjang baru
console.log(antrean);
console.log(antrean.pop());        // pop mengembalikan elemen yang dilepas
console.log(antrean);

// --- 2. unshift dan shift: bekerja di ujung depan ---
antrean.unshift("Tono");
console.log(antrean);
console.log(antrean.shift());
console.log(antrean);

// --- 3. Mengganti satu elemen lewat index ---
antrean[1] = "Sari";
console.log(antrean);

// --- 4. splice: menghapus dan menyisipkan di tengah ---
const daftarTugas = ["Menyapu", "Mencuci", "Menyetir"];
const yangDilepas = daftarTugas.splice(1, 1, "Menjemur", "Menyiram");
console.log(daftarTugas);
console.log(yangDilepas);

const hasilHapus = daftarTugas.splice(0, 2);
console.log(daftarTugas);
console.log(hasilHapus);

Output yang Dihasilkan:

4
[ 'Budi', 'Siti', 'Rina', 'Dodi' ]
Dodi
[ 'Budi', 'Siti', 'Rina' ]
[ 'Tono', 'Budi', 'Siti', 'Rina' ]
Tono
[ 'Budi', 'Siti', 'Rina' ]
[ 'Budi', 'Sari', 'Rina' ]
[ 'Menyapu', 'Menjemur', 'Menyiram', 'Menyetir' ]
[ 'Mencuci' ]
[ 'Menyiram', 'Menyetir' ]
[ 'Menyapu', 'Menjemur' ]

Mari kita telaah baris-baris pentingnya:

1. Baris 5 (const antrean = ["Budi", "Siti"]): antrean awal dengan dua elemen; seluruh operasi berikutnya bekerja pada array yang sama.
2. Baris 7 (console.log(antrean.push("Dodi"))): push menambahkan "Dodi" lalu mengembalikan panjang baru, 4 — itulah keluaran pertama, bukan isi array.
3. Baris 9 (console.log(antrean.pop())): pop melepas elemen terakhir dan mengembalikannya, sehingga tercetak "Dodi" dan antrean kembali tiga elemen.
4. Baris 13–15 (unshift lalu shift): "Tono" masuk di depan sehingga semua elemen bergeser index, lalu shift melepas "Tono" lagi. Antrean kembali ke isi sebelumnya.
5. Baris 19 (antrean[1] = "Sari"): penggantian satu posisi; "Siti" pada index 1 ditimpa "Sari" tanpa mengubah panjang array.
6. Baris 24 (daftarTugas.splice(1, 1, "Menjemur", "Menyiram")): mulai index 1, hapus satu elemen ("Mencuci"), sisipkan dua tugas baru di tempatnya. Hasilnya empat tugas, dan yangDilepas berisi [ 'Mencuci' ].
7. Baris 28 (daftarTugas.splice(0, 2)): hapus dua elemen pertama tanpa penyisipan; hasilHapus berisi kedua elemen yang dilepas, dan daftar tersisa dua tugas.

Method di chapter ini mengubah array secara langsung dan satu langkah demi satu langkah. Chapter berikutnya menambahkan perlengkapan baca-saja — slice, concat, indexOf, join, flat, dan flatMap — yang bekerja pada salinan dan menjadi bahan dasar pengolahan data.

// mengubah-array.js
// push, pop, unshift, shift, penggantian index, dan splice.

// --- 1. push dan pop: bekerja di ujung belakang ---
const antrean = ["Budi", "Siti"];
antrean.push("Rina");
console.log(antrean.push("Dodi")); // push mengembalikan panjang baru
console.log(antrean);
console.log(antrean.pop());        // pop mengembalikan elemen yang dilepas
console.log(antrean);

// --- 2. unshift dan shift: bekerja di ujung depan ---
antrean.unshift("Tono");
console.log(antrean);
console.log(antrean.shift());
console.log(antrean);

// --- 3. Mengganti satu elemen lewat index ---
antrean[1] = "Sari";
console.log(antrean);

// --- 4. splice: menghapus dan menyisipkan di tengah ---
const daftarTugas = ["Menyapu", "Mencuci", "Menyetir"];
const yangDilepas = daftarTugas.splice(1, 1, "Menjemur", "Menyiram");
console.log(daftarTugas);
console.log(yangDilepas);

const hasilHapus = daftarTugas.splice(0, 2);
console.log(daftarTugas);
console.log(hasilHapus);