Array Bisa Melakukan Itu?
Array pada JavaScript adalah benda yang sangat menarik. Selain karena bisa menyimpan elemen-elemen dengan tipe data apapun, undefined sekalipun, juga karena Array memiliki banyak metode-metode menarik pada prototipenya yang bisa digunakan dalam berbagai situasi. Metode-metode tersebut disematkan pada prototipe objek Array sehingga dapat langsung digunakan setelah notasi literal Array, [].indexOf() misalnya.
Metode-metode yang disematkan pada prototipe Array tersebut dinamakan, coba tebak... ya, benar, Array prototype methods. Jika Anda sehari-hari menulis program JavaScript, kemungkinan besar Anda pernah berjumpa dengan beberapa metode tersebut, misalnya map, filter, reduce, atau find. Tapi apakah Anda tahu bahwa metode prototipe Array ada lebih banyak dari itu? Mari kita bahas beberapa metode yang menarik, yang relatif lebih jarang ditemui sehari-hari.
Unshift
Anda mungkin sudah kenal baik dengan push yang menambahkan elemen baru ke dalam sebuah Array. unshift juga berfungsi menambahkan elemen ke dalam sebuah Array. Perbedaannya, jika push menambahkan elemen baru di ujung, unshift menambahkan elemen baru di awal Array.
const arr = [1, 2, 3];
arr.unshift(4); // 4
console.log(arr); // [4, 1, 2, 3]
Salah satu kegunaan metode unshift adalah membuat Array dengan sistem akses first-in first out (FIFO) seperti antrean, dengan mengombinasikannya dengan pop.
const queue = [];
queue.unshift(1);
queue.unshift(2);
queue.unshift(3);
const item = queue.pop(); // 1
console.log(queue); // [3, 2]
Shift
Ada unshift, ada juga shift. Jika unshift digunakan untuk menambahkan elemen, shift digunakan untuk mengambil elemen seperti pop, perbedaannya shift mengambil elemen terdepan suatu Array sementara pop mengambil elemen terujung.
const arr = [1, 2, 3, 4, 5];
const firstEl = arr.shift(); // 1
console.log(arr); // [2, 3, 4, 5]
Bisa dibilang, duo unshift-shift adalah padanan dari push-pop yang memiliki arah terbalik.
Includes
Memeriksa keberadaan elemen dalam Array adalah kasus yang sangat umum. Sebelum ES6, cara untuk melakukannya adalah dengan metode indexOf yang mengembalikan indeks elemen yang dicari, atau -1 jika elemen tidak ditemukan.
['a', 'b', 'c', 'd'].indexOf('b') > -1; // true
ES6 mengenalkan cara baru yang lebih mudah dibaca untuk memastikan keberadaan elemen dalam Array, yaitu includes yang mengembalikan true jika elemen ditemukan di dalam Array.
['a', 'b', 'c', 'd', 'e'].includes('b'); // true
Terdapat beberapa perbedaan antara metode indexOf dan includes, di antaranya:
Mencari keberadaan nilai NaN
Metode indexOf melakukan perbandingan menggunakan strict equality, dan dalam JavaScript NaN !== NaN, sehingga indexOf tidak akan menemukan nilai NaN. Di sisi lain, includes dapat menemukan nilai NaN.
const arr = [NaN, 0, 1, 2];
arr.indexOf(NaN) > -1; // false
arr.includes(NaN); // true
Mencari keberadaan slot kosong
Array dalam JavaScript bisa memiliki slot kosong, bukan undefined maupun null, benar-benar kosong tidak bernilai apapun. Ada beberapa cara membuat Array berslot kosong, misalnya dengan menggunakan konstruktor Array, new Array(5) misalnya; mengubah length suatu Array melebihi elemen yang dimilikinya, [1, 2, 3].length = 5 misalnya; atau, tidak memasukkan elemen apapun ketika diinisiasi, [,,,] misalnya.
Metode indexOf akan melewati slot-slot kosong dalam Array, sehingga kita tidak bisa menemukannya dengan indexOf. Tetapi, metode includes menyamakan slot kosong dengan undefined, jadi kita bisa menemukannya dengan memasukkan undefined sebagai parameter.
const arr = [, , , ,];
arr.indexOf(); // -1
arr.indexOf(undefined); // -1
arr.includes(); // true
arr.includes(undefined); // true
Find Index
Array memiliki metode findIndex. Sekilas mirip indexOf, bukan? Keluaran kedua metode tersebut sama, indeks elemen yang dicari.
Perbedaannya, jika indexOf menerima parameter berupa nilai, findIndex menerima parameter berupa fungsi. Baik indexOf maupun findIndex mengembalikan indeks elemen pertama dari awal Array yang ditemukan sesuai dengan kriteria pencarian.
Metode findIndex mengembalikan indeks elemen jika fungsi callback yang kita berikan mengeluarkan nilai truthy terhadap elemen tersebut.
const members = [
{ name: 'Sowon', position: 'leader' },
{ name: 'Yerin', position: 'dancer' },
{ name: 'Eunha', position: 'vocal' },
{ name: 'Yuju', position: 'vocal' },
{ name: 'SinB', position: 'dancer' },
{ name: 'Umji', position: 'maknae' }
];
const searchFn = member => member.position === 'vocal';
members.findIndex(searchFn); // 2
Fungsi pencarian dapat memiliki tiga parameter, parameter-parameter tersebut secara berurutan adalah:
- Elemen dalam proses iterasi
- Indeks dalam proses iterasi
- Referensi terhadap Array yang diproses
Last Index Of
Masih seputar indeks, selain indexOf, Array juga memiliki lastIndexOf. Metode lastIndexOf identik dengan indexOf dalam semua hal, kecuali arah pencariannya: lastIndexOf mencari indeks elemen dari elemen terakhir hingga ke elemen pertama.
const arr = ['a', 'b', 'b', 'a'];
arr.indexOf('b'); // 1
arr.lastIndexOf('b'); // 2
Seperti indexOf, lastIndexOf juga menerima parameter kedua bertipe Number yang menentukan indeks mulai pencarian. Indeks mulai ini bersifat inklusif, jadi jika elemen yang dicari ditemukan pada indeks mulai, maka indeks mulai akan dikembalikan.
const arr = ['a', 'b', 'b', 'a'];
arr.indexOf('b', 2); // 2
arr.lastIndexOf('b', 1); // 1
Some & Every
Kita sudah berkenalan dengan metode includes yang mencari keberadaan elemen dalam suatu Array. Selain includes, ada juga metode some dan every yang memeriksa keberadaan suatu elemen. Perbedaan mendasar antara some dan every dengan includes adalah, some dan every menerima parameter pencarian berupa fungsi, sementara includes menerima parameter nilai.
Perbedaan antara some dan every sendiri adalah, some mengembalikan true ketika fungsi pencarian mengembalikan nilai truthy pada setidaknya satu elemen dalam Array, sementara every baru mengembalikan true ketika hal yang sama terjadi pada setiap elemen dalam Array.
const arr = [1, 2, 3, 4, 5];
arr.some(el => el > 3); // true
arr.every(el => el > 3); // false
Bisa ditebak, metode some akan langsung keluar ketika fungsi pencarian mengembalikan true, sementara every akan mengevaluasi Array hingga akhir karena harus memastikan semua nilai memenuhi kriteria.
Fungsi pencarian yang diterima some dan every memiliki spesifikasi yang sama dengan fungsi pencarian findIndex, yaitu memiliki tiga parameter: elemen, indeks, dan referensi terhadap Array.
Reduce Right
Salah satu fungsi paling populer dalam Array Prototype Methods adalah reduce. Tetapi, tahukah Anda bahwa reduce memiliki saudara, yaitu reduceRight yang melakukan operasi reduce dari akhir hingga awal Array? Selain arah operasinya, reduceRight memiliki spesifikasi yang identik dengan reduce.
// Mengembalikan 'noon'
['n', 'o', 'o', 'n'].reduce((accumulator, current) => accumulator + current);
// Mengembalikan 'noon'... sebentar, ini bukan contoh yang baik
['n', 'o', 'o', 'n'].reduceRight((accumulator, current) => accumulator + current);
// Mohon maaf, ini baru contoh yang benar hehe =====================
// Mengembalikan 'abc'
['a', 'b', 'c'].reduce((accumulator, current) => accumulator + current);
// Mengembalikan 'cba'
['a', 'b', 'c'].reduceRight((accumulator, current) => accumulator + current);
Selain metode-metode tersebut, masih banyak metode lain yang dimiliki Array dalam prototype-nya. Silakan kunjungi dokumentasi di MDN untuk melihat daftar lebih lengkapnya. Tiga metode sengaja tidak saya cantumkan di sini, yaitu map, filter, dan reduce karena saya rasa mereka perlu diulas dalam artikel tersendiri.
Referensi
Array - Javascript | MDN
Difference Between indexOf and findIndex function of array | StackOverflow