JavaScript: Menemukan Perbedaan Nilai Beserta Index-nya dari Dua Array

Pada tulisan saya ini, kamu akan menemukan cara mencari nilai yang berbeda di antara dua array dengan mendapatkan nilai-nilai dari array kedua yang dibandingkan, kemudian mendapatkan index/key dari nilai-nilai berbeda yang didapat, di JavaScript.

Pada kasus yang saya alami sendiri, source code function ini berguna ketika saya ingin memperbarui sort order sebuah array ataupun list.

Sebagai contoh, saya mempunyai list dengan sort order [1, 2, 3, 4, 5, ...]. Ketika saya memindahkan item 3 ke atas atau urutan pertama, list tersebut semestinya menjadi [3, 1, 2, 4, 5, ...]. Kamu bisa lihat bahwa sort order yang berubah yaitu item 3, 1, and 2, sedangkan yang lainnya tetap sama. Jadi, saya harus menemukan sort order yang diperbarui beserta index-nya dari list yang diubah tersebut. Mungkin saya bisa saja tinggal memasukkan semua sort order setelah list tersebut di-update ke function yang meng-update sort order di sisi server, tetapi saya kira itu akan memakan waktu yang lebih lama jika list yang saya punya mengandung data yang sangat banyak. Itulah kenapa di sini saya cuma membutuhkan sort order yang berubah.

Contoh kasus

Di sini saya akan menggunakan dua buah array yang sama seperti contoh di atas, hanya saja memiliki data sedikit lebih panjang. Array pertama arrA mengandung nilai-nilai awal sebelum saya mengubah urutannya. Array kedua arrB mengandung nilai-nilai yang telah diubah urutannya, yang mana pada contoh ini, saya memindahkan item 3 ke urutan paling atas, dan hal itu menyebabkan perubahan posisi item 1 dan 2 menjadi turun satu posisi.

const
  arrA = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  arrB = [3, 1, 2, 4, 5, 6, 7, 8, 9, 10];

Solusi

Berikut function yang saya buat untuk menyelesaikan contoh kasus tersebut. Cara singkat, vanilla, ES6 untuk melakukan ini, tertulis pada kode JavaScript di bawah ini.

const f = (a, b) => Object.assign(...b.map((v, i) => a[i] !== v ? { [i]: v } : {}));

Lalu, jika kita menggunakan function tersebut ke dua array yang kita miliki, function tersebut akan mengeluarkan output seperti ini:

const
  arrA = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  arrB = [3, 1, 2, 4, 5, 6, 7, 8, 9, 10];

const f = (a, b) => Object.assign(
  ...b.map((v, i) => a[i] !== v ? { [i]: v } : {})
);

console.log(f(arrA, arrB));
// Output -> { 0: 3, 1: 1, 2: 2}

Penjelasan

Kalau kamu tidak begitu bisa membaca dan memahami alur kode singkat tersebut di atas, berikut saya berikan yang fully-readable buat kamu, yang bisa kamu baca di bawah ini.

const f = function (a, b) {
  // Input: [10, 20, 30], [10, 30, 20]
  // Output: [{}, {1: 30}, {2: 20}]
  const x = b.map(function (val, index) {
    if (a[index] !== val) {
      return {
        [index]: val
      };
    }
    return {};
  });

  // Input: [{}, {1: 30}, {2: 20}] (variable x di atas)
  // Output: {1: 30, 2: 20}
  const y = Object.assign(...x);

  return y;
}

Blok pertama kode mem-filter nilai-nilai yang berbeda beserta index-nya dan me-return-nya sebagai array dari object pasangan index-value: [{index: val}, {index: val}, ...]. Sedangkan nilai yang sama akan di-assign sebagai object kosong {}. Jadi, jika parameter input-nya adalah a: [10, 20, 30], b: [10, 30, 20], maka output yang dihasilkan dari blok kode ini adalah [{}, {1: 30}, {2: 20}].

Blok berikutnya dari kode tersebut melakukan spread terhadap array (dengan spread syntax ...) dan membangun object sebagai list pasangan index-value. Aksi ini termasuk mem-filter object kosong {} jadi mereka akan dikecualikan dari output. Jika kita mengambil output hasil dari blok pertama kode ([{}, {1: 30}, {2: 20}]) sebagai input untuk proses ini, function tersebut akan mengembalikan output {1: 30, 2: 20}, dan itulah output akhir dari satu function komplit tersebut.

Penutup

Dengan menggunakan pengetahuan tentang operasi array dan object di JavaScript khususnya ES6, kita telah menemukan cara mencari perbedaan nilai-nilai dari dua array serta mendapatkan index-nya.

Terima kasih telah membaca artikel yang saya tulis ini. Semoga bisa menjadi ilmu yang bermanfaat buat kamu, ya! 👍