Salah satu prototype array yang mungkin jarang digunakan tapi nyatanya cukup bermanfaat
Photo by Christopher Robin Ebbinghaus on Unsplash
Mungkin kita udah tahu dan familiar dengan prorotype array seperti .map(), .filter(), .reduce(), .find(), etc. tapi kelihatannya jarang yang membahas prototype .findIndex() . Padahal fungsi ini cukup bermanfaat untuk mutate sebuah array. Terutama apabila array tersebut berisi dengan object.
Katakanlah kita punya array seperti di bawah ini:
let arr = [1, 2, 3, 4, 5, 6];
Ketika kita ingin menghapus value 4 kita cukup menggunakan
arr.splice(arr.indexOf(4), 1);
console.log(arr); // [1, 2, 3, 5, 6];
// atau bisa juga
let arr1 = arr.slice(0, indexOf(4));
let arr2 = arr.slice(indexOf(4) + 1, arr.length);
arr = [].concat(arr1, arr2);
// tentu kita pilih cara pertama karena paling ringkas
Tapi akan beda lagi ceritanya ketika mempunyai sebuah array seperti ini:
let arr = [
{
id: 1,
name: "John Doe",
age: 30
},
{
id: 2,
name: "Jane Doe",
age: 20
},
{
id: 3,
name: "Jean Doe",
age: 29
},
{
id: 4,
name: "Herman Doe",
age: 30
},
{
id: 5,
name: "Gustaff Doe",
age: 30
},
];
Dengan kasus array di atas ketika kita ingin menghapus data Herman Doe kita tidak bisa menggunakan cara seperti sebelumnya:
// Data herman doe
// { id: 4, name: "Herman Doe", age: 30 }
arr.splice(arr.indexOf({ id: 4, name: "Herman Doe", age: 30 }), 1);
// indexOf() akan me-return -1
Karena dalam Javascript ketika kita assign value berupa object, maka Javascript akan membuat object baru. Dan dalam praktik indexOf() di atas Javascript menganggap object yang kita masukkan sebagai parameter adalah object yang berbeda.
Maka untuk menghapus value tersebut kita bisa menggunakan cara seperti ini
let herman = arr.find(obj => obj.name === "Herman Doe");
let idx = arr.indexOf(herman);
let arr1 = arr.slice(0, idx);
let arr2 = arr.slice(idx + 1, arr.length);
arr = [].concat(arr1, arr2);
// atau baru bisa menggunakan
arr.splice(idx, 1);
Ugh…
Cara ini terlalu ribet dan terlalu panjang, kita harus mencari objectnya terlebih dahulu, cari dia di index berapa, baru kita bisa melakukan penghapusan data dari array tadi.
Nah di sinilah findIndex() punya peran untuk memperpendek proses kita mendapatkan index dari object yang ingin kita hapus. Perlu diingat find() akan mengembalikan value yang kita cari berdasarkan parameter yang kita berikan sedangkan findIndex() akan mengembalikan index dari value yang kita cari berdasarkan parameter yang kita berikan.
Jadi untuk menghapus data Herman Doe dari array tadi, bisa kita ubah dengan
let hermanIndex = arr.findIndex(obj => obj.name === "Herman Doe");
arr.splice(hermanIndex, 1);
console.log(arr) // array dengan herman doe terhapus
Tapi toh cuma menghemat 1 baris?
Menurutku sendiri, 1 baris pun cukup membantu untuk membuat kode yang lebih mudah dipahami. Apalagi toh ada fungsi bawaan Javascript yang bisa dimanfaatkan, kenapa enggak kita manfaatkan?
Aku tahu ada prototype ini ketika streaming salah satu course Javascriptnya Wes Bos yang namanya #Javascript30. Sebelumnya, ketika aku berurusan dengan modify/mutate sebuah array, aku menggunakan beberapa fungsi seperti tadi find() terlebih dahulu kemudian mencari indexnya dengan indexOf() baru melakukan penghapusan atau pengubahan (replace) value di array.
Kalau kamu? Gimana approachmu ketika kamu berurusan dengan mutate sebuah array? Jangan sungkan buat komen!
Have a good day!