Javascript Remove Element From Array By Property

Javascript Remove Element From Array By Property

5 min read Jun 20, 2024
Javascript Remove Element From Array By Property

Cara Menghapus Elemen dari Array di JavaScript Berdasarkan Properti

Dalam pemrograman JavaScript, seringkali kita perlu memanipulasi data dalam array, termasuk menghapus elemen berdasarkan properti tertentu. Berikut adalah beberapa metode umum untuk menghapus elemen dari array berdasarkan properti di JavaScript:

1. Filter

Metode filter() mengembalikan array baru yang berisi elemen-elemen yang memenuhi kondisi tertentu. Kita dapat menggunakannya untuk menghapus elemen yang memiliki nilai properti tertentu.

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Peter' },
];

const filteredData = data.filter(item => item.id !== 2);

console.log(filteredData);
// Output: [{ id: 1, name: 'John' }, { id: 3, name: 'Peter' }]

Kode di atas akan menghapus objek dengan id 2 dari array data.

2. findIndex() dan splice()

Metode findIndex() mencari indeks pertama elemen yang memenuhi kondisi tertentu. Kita dapat menggunakan findIndex() untuk mendapatkan indeks elemen yang ingin kita hapus dan kemudian menggunakan splice() untuk menghapusnya dari array asli.

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Peter' },
];

const index = data.findIndex(item => item.id === 2);

if (index !== -1) {
  data.splice(index, 1);
}

console.log(data);
// Output: [{ id: 1, name: 'John' }, { id: 3, name: 'Peter' }]

Kode di atas akan menghapus objek dengan id 2 dari array data.

3. reduce()

Metode reduce() digunakan untuk menggabungkan semua elemen array menjadi nilai tunggal. Kita dapat menggunakannya untuk menghapus elemen berdasarkan properti dengan membuat fungsi yang hanya mengembalikan elemen yang ingin kita simpan.

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Peter' },
];

const filteredData = data.reduce((acc, item) => {
  if (item.id !== 2) {
    acc.push(item);
  }
  return acc;
}, []);

console.log(filteredData);
// Output: [{ id: 1, name: 'John' }, { id: 3, name: 'Peter' }]

Kode di atas akan menghapus objek dengan id 2 dari array data.

4. for...of Loop

Kita dapat menggunakan loop for...of untuk iterasi melalui array dan menghapus elemen yang memenuhi kondisi tertentu.

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Peter' },
];

for (let i = data.length - 1; i >= 0; i--) {
  if (data[i].id === 2) {
    data.splice(i, 1);
  }
}

console.log(data);
// Output: [{ id: 1, name: 'John' }, { id: 3, name: 'Peter' }]

Kode di atas akan menghapus objek dengan id 2 dari array data.

Rekomendasi

Pemilihan metode terbaik tergantung pada kebutuhan dan preferensi Anda.

  • filter() adalah pilihan yang baik jika Anda ingin membuat array baru tanpa memodifikasi array asli.
  • findIndex() dan splice() adalah pilihan yang baik jika Anda ingin menghapus elemen dari array asli.
  • reduce() adalah pilihan yang baik jika Anda ingin melakukan operasi lain selain menghapus elemen, seperti menjumlahkan nilai atau menggabungkan objek.
  • Loop for...of adalah pilihan yang baik jika Anda perlu melakukan iterasi melalui array dan menghapus beberapa elemen.

Selalu ingat untuk memilih metode yang paling sesuai dengan kebutuhan Anda untuk menjaga kode Anda tetap bersih dan mudah dipahami.