Memilih Antara push, unshift, dan splice di JavaScript

Kamu sedang mengisi daftar belanja di aplikasi kecil buatan sendiri. Ada yang perlu ditambah di belakang, ada yang harus diselipkan di depan, dan ada juga yang salah ketik sehingga harus dihapus dari tengah. Tiga kebutuhan itu ditangani metode berbeda di JavaScript: push, unshift, dan splice. Ketiganya mengubah array asli, tapi arah perubahan dan nilai baliknya tidak sama.

Mengetahui perbedaan push, unshift, dan splice di JavaScript membuatmu tidak perlu menyalin array berkali-kali hanya untuk menambah satu item. Bagian berikut membandingkan ketiganya dari sisi perilaku, nilai balik, dan situasi pemakaian.

Ringkasan cepat ketiga metode

Semua metode di bawah ini termasuk mutator: array yang dipanggil langsung berubah, bukan menghasilkan salinan baru. Kalau kamu butuh array baru tanpa menyentuh aslinya, gunakan spread atau concat.

push: menambah di akhir

Push adalah pilihan paling sering dipakai karena paling murah secara komputasi. Menambah elemen di akhir array tidak perlu menggeser elemen lain.

const antrian = ['Budi', 'Sari'];
const panjangBaru = antrian.push('Tono');

console.log(antrian);      // ['Budi', 'Sari', 'Tono']
console.log(panjangBaru);  // 3

Push menerima lebih dari satu argumen sekaligus. antrian.push('Tono', 'Rina') menambahkan keduanya berurutan. Nilai baliknya sering diabaikan, padahal berguna saat kamu ingin tahu panjang array tanpa memanggil length lagi.

Pakai push ketika data datang berurutan, misalnya menampung hasil fetch, mencatat log, atau membangun daftar dari perulangan. Kalau kamu masih sering bingung memilih bentuk perulangan yang tepat, artikel teknik loop JavaScript yang sering dipakai pro membahas variasinya.

unshift: menambah di awal

Unshift menaruh elemen di indeks 0 dan menggeser semua elemen lama satu langkah ke kanan. Dari sisi hasil, ini kebalikan push.

const riwayat = ['halaman-2', 'halaman-3'];
riwayat.unshift('halaman-1');

console.log(riwayat); // ['halaman-1', 'halaman-2', 'halaman-3']

Biaya geser inilah yang membuat unshift kurang cocok untuk array panjang. Setiap penambahan memaksa JavaScript memindahkan seluruh isi array. Pada daftar berisi ribuan item, kebiasaan ini terasa di performa, terutama kalau dipanggil di dalam perulangan.

Untuk kebutuhan menambah di depan secara berulang, pertimbangkan menyimpan data dalam urutan terbalik lalu membaliknya sekali di akhir, atau gunakan struktur seperti deque. Untuk daftar pendek, unshift tetap paling ringkas dan mudah dibaca.

splice: menyisipkan dan menghapus di posisi mana pun

Splice lebih fleksibel karena bisa bekerja di tengah array. Tanda tangannya splice(start, deleteCount, ...itemBaru). Dua argumen pertama menentukan titik mulai dan berapa banyak elemen dibuang, sisanya adalah elemen pengganti.

const jadwal = ['senin', 'rabu', 'kamis'];

// menyisipkan 'selasa' di indeks 1 tanpa menghapus apa pun
jadwal.splice(1, 0, 'selasa');
console.log(jadwal); // ['senin', 'selasa', 'rabu', 'kamis']

// menghapus satu elemen di indeks 2
const dibuang = jadwal.splice(2, 1);
console.log(dibuang); // ['rabu']
console.log(jadwal); // ['senin', 'selasa', 'kamis']

Nilai balik splice adalah array berisi elemen yang dihapus. Kalau deleteCount bernilai 0, hasilnya array kosong. Inilah yang membedakannya dari push dan unshift yang mengembalikan angka panjang array. Perbedaan nilai balik ini sering jadi sumber bug ketika seseorang menulis const hasil = arr.splice(...) dan mengira hasilnya array utuh.

Splice juga bisa menghapus sampai akhir dengan deleteCount yang lebih besar dari sisa elemen, atau mengganti beberapa elemen sekaligus. Untuk sekadar mengambil potongan tanpa mengubah array, gunakan slice, bukan splice. Prinsip serupa berlaku saat memotong string, seperti dibahas di cara memotong string dengan slice dan substr.

Kapan memakai yang mana

Gunakan daftar berikut sebagai pegangan cepat:

• push untuk menambah data baru di akhir, misalnya menampung pesan masuk atau hasil query.
• unshift untuk menaruh item terbaru di depan daftar pendek, seperti notifikasi atau riwayat pencarian.
• splice untuk menyisipkan, mengganti, atau menghapus elemen di posisi tertentu, termasuk menghapus berdasarkan indeks yang ditemukan lewat pencarian.

Untuk kasus terakhir, kamu biasanya perlu tahu dulu indeks elemen yang ingin dihapus. Metode seperti findIndex membantu menemukannya, dan perbandingannya dengan find serta filter ada di memilih antara find, filter, dan findIndex. Begitu indeks didapat, splice tinggal dipanggil dengan angka tersebut.

Kalau kamu hanya ingin membaca atau menyaring data tanpa mengubah array asli, hindari ketiga metode ini. Pakai filter atau map agar data sumber tetap aman.

Kesalahan yang sering muncul

Karena push dan unshift sama-sama mengembalikan panjang array, rangkaian pemanggilan seperti arr.push('a').push('b') akan gagal. Nilai baliknya berupa angka, dan angka tidak punya metode push. Pisahkan menjadi dua baris.

Kesalahan lain adalah mengira splice mengembalikan array yang sudah diubah. Selalu ingat: splice mengembalikan potongan yang dibuang. Untuk melihat isi array setelah operasi, periksa variabel aslinya.

Terakhir, hati-hati memakai splice di dalam perulangan yang membaca array yang sama. Indeks akan bergeser setelah penghapusan, sehingga sebagian elemen bisa terlewat. Kumpulkan indeks yang ingin dihapus lebih dulu, lalu proses dari indeks terbesar ke terkecil.

Ringkasan

Push menambah di akhir dan mengembalikan panjang baru. Unshift menambah di awal dengan biaya geser lebih besar. Splice bekerja di posisi mana pun dan mengembalikan elemen yang dibuang. Pilih berdasarkan posisi perubahan, bukan berdasarkan mana yang paling sering kamu lihat di kode orang lain.

Pertanyaan yang Sering Diajukan

Apakah push dan unshift bisa menambah beberapa elemen sekaligus?

Bisa. Keduanya menerima jumlah argumen berapa pun dan menambahkannya sesuai urutan penulisan. Untuk unshift, urutan argumen tetap dipertahankan di depan array.

Apa bedanya splice dan slice?

Splice mengubah array asli dan mengembalikan elemen yang dihapus. Slice tidak menyentuh array asli dan mengembalikan salinan potongan sesuai rentang indeks yang diminta.

Apakah ada cara menghapus elemen tanpa mengubah array asli?

Ada. Gunakan filter untuk membuang elemen berdasarkan kondisi, atau spread untuk menyalin array lalu memodifikasi salinannya. Pendekatan ini lebih aman ketika array sumber dipakai di banyak tempat.