Memilih Antara slice, splice, dan split di JavaScript

Nama yang mirip bikin ketiganya sering tertukar saat menulis kode. Singkatnya: slice mengambil potongan tanpa mengubah data asli, splice mengubah array asli di tempatnya, dan split memecah string menjadi array. Kalau kamu tahu data apa yang sedang dipegang, pilihan biasanya langsung jelas.

Perbedaan slice, splice, dan split javascript dalam satu tabel

Tabel berikut merangkum perbedaan paling sering ditanyakan: jenis data yang diterima, nilai balik, dan apakah data sumber ikut berubah.

Metode	Bekerja pada	Nilai balik	Mengubah data asli?
slice	Array dan string	Salinan potongan	Tidak
splice	Array saja	Array berisi elemen yang dihapus	Ya
split	String saja	Array string	Tidak

Kolom ketiga itu yang paling sering menimbulkan bug. Dua metode menghasilkan data baru, satu metode diam-diam merusak data lama.

slice: mengambil potongan tanpa menyentuh aslinya

Bayangkan kamu menyalin tiga baris dari daftar belanja ke catatan kecil. Daftar aslinya tetap utuh. Itulah cara kerja slice. Ia menerima indeks awal dan indeks akhir, dan indeks akhir tidak ikut diambil.

const bulan = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei'];
const kuartalSatu = bulan.slice(0, 3);

console.log(kuartalSatu); // ['Jan', 'Feb', 'Mar']
console.log(bulan.length); // 5, tidak berubah

Indeks negatif dihitung dari belakang. bulan.slice(-2) menghasilkan ['Apr', 'Mei']. Trik ini berguna saat kamu butuh beberapa item terakhir dari daftar tanpa tahu panjang persisnya.

Pada string, slice memotong berdasarkan posisi karakter. Untuk keperluan memotong teks berdasarkan pola seperti spasi atau koma, kamu perlu split atau metode string lain seperti substring. Pembahasan lebih jauh soal pemotongan teks ada di panduan memotong string di JavaScript.

splice: mengubah array di tempatnya

splice dipakai saat kamu memang ingin mengubah isi array. Parameternya: indeks mulai, jumlah elemen yang dihapus, lalu elemen baru yang disisipkan. Nilai baliknya adalah elemen yang terhapus, bukan array hasil akhir.

const antrean = ['Budi', 'Sari', 'Tono', 'Rina'];
const dilayani = antrean.splice(0, 2);

console.log(dilayani); // ['Budi', 'Sari']
console.log(antrean);  // ['Tono', 'Rina']

Karena splice memodifikasi array asli, hati-hati saat array itu masih dipakai di tempat lain. Pada framework yang mengandalkan deteksi perubahan, memanggil splice pada state bisa memicu render ulang yang tidak diinginkan. Kalau tujuannya sekadar menambah di ujung, push lebih tepat. Perbandingan lengkapnya ada di artikel memilih push, unshift, dan splice.

Untuk menghapus tanpa menyisakan elemen, cukup isi parameter kedua dengan jumlah yang dihapus. Untuk menyisipkan tanpa menghapus, isi parameter kedua dengan 0.

split: memecah string jadi array

split menerima pemisah dan mengembalikan array potongan string. Pemisah bisa berupa karakter, rangkaian karakter, atau ekspresi reguler.

const kalimat = 'apel, jeruk, mangga';
const buah = kalimat.split(', ');

console.log(buah); // ['apel', 'jeruk', 'mangga']

Tanpa argumen, split() mengembalikan array berisi satu elemen, yaitu string utuh. Dengan pemisah string kosong '', setiap karakter jadi elemen tersendiri. Ini sering dipakai saat memproses input pengguna yang dipisahkan koma atau baris baru.

Hasil split sering perlu dirapikan. Spasi berlebih setelah pemisah tetap ikut jadi bagian string. Gabungkan dengan map dan trim untuk membersihkannya:

const tag = 'javascript, css,html ';
const bersih = tag.split(',').map(t => t.trim());

console.log(bersih); // ['javascript', 'css', 'html']

Kalau kamu banyak bekerja dengan transformasi array seperti ini, teknik di kumpulan metode array untuk mengolah data bisa mempercepat penulisan kode sehari-hari.

Kapan memakai yang mana

Gunakan urutan pertanyaan berikut saat ragu:

Apakah data yang dipegang berupa string? Kalau ya, split adalah satu-satunya pilihan di antara ketiganya.
Apakah kamu perlu mengubah array asli, misalnya menghapus item dari antrean? Pakai splice.
Apakah kamu hanya perlu membaca sebagian data dan ingin data asli aman? Pakai slice.

Kesalahan paling umum adalah memakai splice padahal maksudnya menyalin. Akibatnya array sumber berubah dan bagian lain aplikasi ikut terdampak. Sebaliknya, memakai slice untuk menghapus elemen hanya menghasilkan array baru yang tidak terpakai kalau hasilnya tidak disimpan ke variabel.

Aturan praktisnya: kalau nama fungsi tidak mengandung huruf tambahan setelah kata kerja, curigai efek samping pada data asli.

Ketiganya juga berbeda dalam hal indeks negatif. slice mendukungnya, splice memperlakukannya sebagai posisi dari belakang, sedangkan split tidak memakai indeks sama sekali karena bekerja dengan pemisah.

Ringkasan

slice menyalin potongan array atau string tanpa mengubah sumber. splice mengubah array asli dan mengembalikan elemen yang dihapus. split memecah string menjadi array berdasarkan pemisah. Mengingat mana yang mengubah data asli dan mana yang bekerja pada string akan menghilangkan sebagian besar kebingungan saat menulis kode.

Pertanyaan yang Sering Diajukan

Apakah split bisa dipakai pada array?

Tidak. split hanya tersedia untuk string. Untuk memecah array menjadi beberapa bagian, gunakan slice berulang atau metode seperti flat jika strukturnya bersarang.

Bagaimana cara menghapus elemen array tanpa mengubah aslinya?

Gunakan slice untuk mengambil bagian sebelum dan sesudah elemen yang ingin dibuang, lalu gabungkan hasilnya. Pola ini sering dipakai saat array asli masih dibutuhkan di tempat lain.

Apakah splice bisa menyisipkan elemen tanpa menghapus apa pun?

Bisa. Isi parameter kedua dengan 0 agar tidak ada elemen yang dihapus, lalu masukkan elemen baru pada parameter berikutnya. Elemen lama akan bergeser ke kanan.