Splice Lagi! Cara Manipulasi Array yang Lebih Dalam (Part 2)

Splice Lagi! Cara Manipulasi Array yang Lebih Dalam (Part 2)
Photo by Blake Connally / Unsplash

Hai, sobat coder! Kalau di part 1 kita sudah bahas dasar-dasar splice(), seperti cara menghapus, menambahkan, dan mengganti elemen di array, sekarang kita masuk ke part 2. Di sini kita bakal bahas trik-trik manipulasi array yang lebih kompleks menggunakan splice().

Metode splice() adalah alat serbaguna yang nggak cuma membantu memodifikasi array, tapi juga memberikan fleksibilitas luar biasa untuk berbagai skenario. Yuk, langsung kita bedah gimana splice() bisa bikin manipulasi array kamu lebih canggih!

Recap Cepat Apa Itu Splice

splice() adalah metode bawaan JavaScript yang memungkinkan kamu untuk:

  1. Menghapus elemen dari array.
  2. Menambahkan elemen baru ke array.
  3. Mengganti elemen yang ada di array.

Sintaksnya:

array.splice(start, deleteCount, item1, item2, ...);

Kalau sudah ingat konsep dasarnya, kita langsung ke level berikutnya!

Trik Lanjutan Menggunakan Splice

1. Menghapus Elemen di Tengah Array

Kadang kamu perlu menghapus beberapa elemen di tengah array tanpa mengganggu elemen lainnya. Gunakan splice() dengan start sebagai indeks awal elemen yang mau dihapus, dan deleteCount sebagai jumlah elemen yang akan dihapus.

Contoh:

let angka = [10, 20, 30, 40, 50];
angka.splice(1, 3); // Mulai dari indeks 1, hapus 3 elemen

console.log(angka); // Output: [10, 50]

Di sini, elemen 20, 30, dan 40 dihapus sekaligus, menyisakan elemen 10 dan 50.

2. Menambahkan Elemen di Posisi Tertentu

Kalau kamu mau menyisipkan elemen baru di posisi tertentu tanpa menghapus elemen lainnya, cukup set deleteCount ke 0.

Contoh:

let warna = ["Merah", "Hijau", "Biru"];
warna.splice(1, 0, "Kuning", "Ungu"); // Tambahkan di indeks 1

console.log(warna); // Output: ["Merah", "Kuning", "Ungu", "Hijau", "Biru"]

Elemen baru Kuning dan Ungu disisipkan di posisi tertentu tanpa menghapus elemen asli.

3. Mengganti Banyak Elemen Sekaligus

Mau mengganti beberapa elemen dengan elemen baru? splice() bisa melakukannya dengan mudah.

Contoh:

let buah = ["Apel", "Jeruk", "Mangga", "Durian"];
buah.splice(1, 2, "Pisang", "Anggur"); // Ganti 2 elemen dari indeks 1

console.log(buah); // Output: ["Apel", "Pisang", "Anggur", "Durian"]

Di sini, elemen Jeruk dan Mangga diganti dengan Pisang dan Anggur.

4. Membuat Array Baru dari Elemen yang Dihapus

Elemen yang dihapus oleh splice() dikembalikan sebagai array baru. Kamu bisa menyimpannya di variabel untuk keperluan lain.

Contoh:

let angka = [1, 2, 3, 4, 5];
let elemenTerhapus = angka.splice(2, 2); // Hapus elemen di indeks 2 dan 3

console.log(elemenTerhapus); // Output: [3, 4]
console.log(angka); // Output: [1, 2, 5]

Ini berguna kalau kamu ingin memisahkan elemen tertentu dari array utama.

5. Menghapus Semua Elemen Setelah Indeks Tertentu

Kalau kamu ingin menghapus semua elemen di array mulai dari indeks tertentu hingga akhir, set deleteCount lebih besar dari jumlah elemen yang tersisa.

Contoh:

let data = ["A", "B", "C", "D", "E"];
data.splice(2); // Mulai dari indeks 2, hapus semua elemen

console.log(data); // Output: ["A", "B"]

Studi Kasus Menggunakan Splice

1. Membuat Daftar Tugas

Misalnya, kamu punya aplikasi daftar tugas, dan ingin menambah, menghapus, atau mengganti tugas tertentu.

let tugas = ["Belajar JavaScript", "Kerjakan PR", "Main Game"];

// Tambah tugas
tugas.splice(2, 0, "Makan Siang");

// Ganti tugas
tugas.splice(1, 1, "Latihan Ngoding");

// Hapus tugas
tugas.splice(3, 1);

console.log(tugas); 
// Output: ["Belajar JavaScript", "Latihan Ngoding", "Makan Siang"]

2. Mengelola Keranjang Belanja

Bayangkan kamu membuat aplikasi e-commerce, dan pengguna ingin menambah atau menghapus item di keranjang belanja.

let keranjang = ["Susu", "Roti", "Keju"];

// Tambah item
keranjang.splice(2, 0, "Telur");

// Hapus item
keranjang.splice(1, 1);

console.log(keranjang); 
// Output: ["Susu", "Telur", "Keju"]

Perbedaan Splice dengan Slice

Mungkin kamu bingung, apa bedanya splice() dengan slice()? Berikut perbedaannya:

Splice Slice
Mengubah array asli Tidak mengubah array asli
Bisa menghapus, menambah, atau mengganti elemen Hanya mengambil elemen tertentu
Mengembalikan elemen yang dihapus sebagai array baru Mengembalikan elemen yang diambil sebagai array baru

Contoh perbandingan:

let angka = [1, 2, 3, 4, 5];

// Splice
angka.splice(2, 2); // Hapus elemen di indeks 2 dan 3
console.log(angka); // Output: [1, 2, 5]

// Slice
let hasilSlice = angka.slice(1, 3); // Ambil elemen indeks 1 dan 2
console.log(hasilSlice); // Output: [2, 5]

Tips Menggunakan Splice

  1. Gunakan untuk Modifikasi Langsung Kalau kamu butuh mengubah array asli tanpa membuat salinan, splice() adalah pilihan terbaik.
  2. Cek Panjang Array Sebelum memanggil splice(), cek panjang array untuk memastikan kamu tidak memulai dari indeks yang salah.
  3. Hati-Hati dengan Performa Pada array yang sangat besar, splice() bisa jadi lambat karena elemen setelahnya perlu digeser. Gunakan dengan bijak.

Kesimpulan

Metode splice() adalah salah satu alat paling fleksibel di JavaScript untuk memanipulasi array. Di part 2 ini, kita sudah membahas trik-trik lebih dalam seperti menghapus elemen di tengah, menambahkan elemen di posisi tertentu, mengganti elemen, hingga membuat array baru dari elemen yang dihapus.

Dengan splice(), kamu punya kendali penuh atas array di JavaScript. Eksplorasi fitur ini dan coba gunakan untuk berbagai kebutuhan coding kamu. Selamat mencoba, dan happy coding!