Cara Menghapus Elemen Array di JavaScript

Menghapus elemen array merupakan salah satu pekerjaan yang kita butuhkan saat bekerja dengan JavaScript. Ada banyak cara untuk menghapus elemen array dimulai dari yang paling sederhana ke yang lebih kompleks.

Menghapus Elemen Pertama Array

Untuk menghapus elemen pertama array di JavaScript kita bisa menggunakan fungsi shift. Fungsi shift tidak hanya menghapus elemen pertama array tetapi juga akan mengembalikan elemen pertama array.

Jika kita mempunyai daftar nama kota dan kita ingin menghapus elemen terakhir maka kita bisa menggunakan fungsi shift. Contohnya seperti berikut:

const kota = ["Surabaya", "Jakarta", "Tokyo"];
kota.shift();
console.log(kota); // [ 'Jakarta', 'Tokyo' ]

Seperti yang saya jelaskan sebelumnya, fungsi ini juga akan mengembalikan elemen yang dihapus.

const kota = ["Surabaya", "Jakarta", "Tokyo"];
console.log(kota.shift()); // Surabaya

Menghapus Elemen Terakhir Array

Untuk menghapus elemen terakhir array di JavaScript kita bisa menggunakan fungsi pop. Sama seperti fungsi shift, fungsi pop juga akan mengembalikan elemen terakhir array.

Misalkan kita ingin menghapus elemen terakhir pada array tadi.

const kota = ["Surabaya", "Jakarta", "Tokyo"];
kota.pop();
console.log(kota); // [ 'Surabaya', 'Jakarta' ]

Sama seperti fungsi sebelumnya, fungsi ini juga akan mengembalikan elemen yang dihapus.

const kota = ["Surabaya", "Jakarta", "Tokyo"];
console.log(kota.pop()); // Tokyo

Menghapus Elemen Array dengan Posisi Tertentu

Sejauh ini, kita hanya melihat cara menghapus elemen pada awal atau akhir array. Kalian mungkin bertanya-tanya bagaimana cara menghapus elemen pada posisi tertentu. Lalu bagaimana cara menghapus elemen array pada posisi tertentu. Untuk menghapus elemen array pada posisi tertentu kita dapat menggunakan fungsi splice.

Fungsi ini mempunyai banyak sekali kegunaan. Fungsi ini bisa menghapus, mengganti dan menambah elemen pada posisi tertentu. Fungsi ini memiliki sintak seperti berikut:

Array.splice(start_position, delete_count);

• start_position menentukan indeks elemen yang ingin kita hapus. Jika kita ingin menghapus beberapa elemen, maka ini menentukan elemen pertama yang dihapus.
• delete_count menentukan jumlah elemen yang akan dihapus. Jika argumen ini tidak ditentukan, maka semua elemen array dari start_position hingga akhir akan dihapus.

Berikut adalah ilustrasi dari sintak fungsi ini:

Sama seperti fungsi sebelumnya, fungsi ini juga akan mengembalikan array baru yang berisi elemen terhapus.

Misalkan kita mempunyai daftar kota seperti ini:

const kota = ["Surabaya", "Jakarta", "Tokyo", "Kyoto", "Seoul"];

Kita ingin menghapus “Jakarta”, “Tokyo” dan “Kyoto” dengan kata lain kita ingin menghapus 3 elemen dari indeks ke-1 (indeks dari elemen “Jakarta”).

const kota = ["Surabaya", "Jakarta", "Tokyo", "Kyoto", "Seoul"];
kota.splice(1, 3);
console.log(kota); // [ 'Surabaya', 'Seoul' ]

Seperti fungsi sebelumnya, fungsi ini akan mengembalikan array yang berisi elemen yang dihapus.

const kota = ["Surabaya", "Jakarta", "Tokyo", "Kyoto", "Seoul"];
console.log(kota.splice(1, 3)); // [ 'Jakarta', 'Tokyo', 'Kyoto' ]

Pada penjelasan sebelumnya, saat delete_count tidak ditentukan, maka item dari start_position sampai akhir akan dihapus. Misalkan kita mempunyai array seperti tadi, kita ingin menghapus elemen dari “Tokyo” sampai akhir. Dengan kata lain, kita ingin menghapus elemen dari indeks ke-2 sampai akhir:

const kota = ["Surabaya", "Jakarta", "Tokyo", "Kyoto", "Seoul"];
kota.splice(2);
console.log(kota); // [ 'Surabaya', 'Jakarta' ]

Jika kalian ingin mengetahui cara menambahkan elemen ke array menggunakan splice kalian bisa membaca Menambah Elemen ke Array di JavaScript

Menghapus Elemen Array dengan filter

ungsi filter akan menghasilkan array baru yang berisi elemen array yang terpilih. Fungsi ini sangat berbeda dengan fungsi sebelumnya. Fungsi sebelumnya memodifikasi array sumber sedangkan fungsi ini menghasilkan array baru. Fungsi ini tidak memodifikasi array yang disaring.

Fungsi ini memiliki sintak seperti berikut:

Array.filter(callbackFn);

• callbackFn adalah fungsi/lambda yang akan dijalankan pada setiap elemen array. Lambda ini menentukan apakah elemen tetap dipertahankan atau tidak. Lambda ini harus mengembalikan nilai true jika elemen tetap dipertahankan atau nilai false jika elemen tidak dipertahankan.
  Lambda harus memiliki sintak element, index, array. element adalah elemen yang akan ditentukan apakah dipertahankan atau tidak. index adalah indeks dari element. array adalah array awal.

Misalkan kita mempunyai array seperti tadi, kita ingin elemen “Kyoto” dihapuskan dari array. Dengan kata lain, kita ingin elemen selain “Kyoto” dipertahankan.

const kota = ["Surabaya", "Jakarta", "Tokyo", "Kyoto", "Seoul"];
const kotaBaru = kota.filter((element) => element !== "Kyoto");
console.log(kotaBaru); // [ 'Surabaya', 'Jakarta', 'Tokyo', 'Seoul' ]

Ingat: Elemen yang menghasilkan nilai true yang akan dipertahankan.

Contoh lain adalah misalnya kita ingin menghapus kota yang berakhiran huruf “o”. Dengan kata lain, kita ingin elemen yang tidak berakhiran “o” dipertahankan.

const kota = ["Surabaya", "Jakarta", "Tokyo", "Kyoto", "Seoul"];
const kotaBaru = kota.filter((element) => !element.endsWith("o"));
console.log(kotaBaru); // [ 'Surabaya', 'Jakarta', 'Seoul' ]

element.endWith("o") akan menghasilkan true jika element berakhiran dengan “o”.

Kesimpulan

Pada artikel kali ini kita telah mempelajari berbagai cara untuk menghapus elemen di awal array dengan shift, menghapus elemen di akhir array dengan pop, menghapus elemen pada posisi tertentu dengan splice dan menghapus elemen yang tidak memenuhi kriteria dengan filter.

Keempat fungsi dapat digunakan pada kasus yang berbeda-beda. Jadi gunakanlah fungsi tersebut berdasarkan kebutuhan.