Cara Menggabungkan Array di JavaScript: Panduan Lengkap

Kamu punya daftar belanja di satu array dan daftar tambahan di array lain, lalu ingin menyatukannya jadi satu. JavaScript menyediakan beberapa cara untuk melakukannya, dan pilihan metode menentukan apakah array asli ikut berubah atau tetap utuh. Cara menggabungkan array di JavaScript yang paling umum adalah concat(), spread operator, dan push().

1. concat() untuk menggabungkan tanpa mengubah array asli

Metode concat() membuat array baru berisi elemen dari array yang dipanggil, ditambah elemen dari array yang diberikan sebagai argumen. Array asli tidak tersentuh.

const pagi = ['kopi', 'roti'];
const siang = ['nasi', 'sayur'];

const semua = pagi.concat(siang);
console.log(semua); // ['kopi', 'roti', 'nasi', 'sayur']
console.log(pagi);  // ['kopi', 'roti']

concat() menerima lebih dari satu argumen sekaligus, jadi kamu bisa menggabungkan tiga array atau lebih dalam satu panggilan. Metode ini juga bisa menerima nilai biasa, bukan hanya array.

2. Spread operator untuk sintaks yang lebih ringkas

Spread operator (...) menyebarkan isi array ke dalam array baru. Hasilnya sama seperti concat(), tapi penulisannya lebih pendek dan mudah dibaca.

const pagi = ['kopi', 'roti'];
const siang = ['nasi', 'sayur'];

const semua = [...pagi, ...siang];

Karena spread bekerja di dalam literal array, kamu bisa menyisipkan elemen tambahan di antara dua array atau menambahkan nilai di awal dan akhir.

const semua = ['teh', ...pagi, ...siang, 'buah'];

Spread melakukan salinan dangkal. Kalau array berisi objek, elemen objek di array baru masih merujuk ke objek yang sama dengan array asli.

3. push() dengan spread untuk menambah ke array yang sudah ada

Kalau kamu ingin array pertama ikut berubah, gunakan push() bersama spread. Cara ini mengubah array tujuan secara langsung.

const keranjang = ['apel', 'jeruk'];
const tambahan = ['mangga', 'pisang'];

keranjang.push(...tambahan);
console.log(keranjang); // ['apel', 'jeruk', 'mangga', 'pisang']

Tanpa spread, keranjang.push(tambahan) akan menambahkan array sebagai satu elemen, sehingga hasilnya array bersarang, bukan gabungan datar.

4. Menggabungkan banyak array sekaligus

Kalau jumlah array yang digabung tidak pasti, misalnya berasal dari hasil pemetaan data, kamu bisa menyimpan semuanya dalam satu array lalu menyebarkannya.

const kelompok = [
  ['a', 'b'],
  ['c', 'd'],
  ['e', 'f']
];

const rata = [].concat(...kelompok);
console.log(rata); // ['a', 'b', 'c', 'd', 'e', 'f']

Pola [].concat(...kelompok) sering dipakai untuk meratakan array satu tingkat. Untuk kedalaman yang tidak diketahui, gunakan flat() dengan argumen kedalaman.

const rata = kelompok.flat();
const rataDalam = kelompok.flat(Infinity);

5. Menggabungkan array sambil membuang duplikat

Data dari dua sumber sering tumpang tindih. Set bisa dijadikan perantara untuk menyimpan nilai unik, lalu dikonversi kembali menjadi array.

const a = ['apel', 'jeruk', 'mangga'];
const b = ['jeruk', 'pisang'];

const unik = [...new Set([...a, ...b])];
console.log(unik); // ['apel', 'jeruk', 'mangga', 'pisang']

Urutan elemen mengikuti kemunculan pertama. Nilai yang sudah ada di array pertama tidak akan ditambahkan lagi dari array kedua.

6. Menggabungkan array of objects berdasarkan properti

Untuk array berisi objek, menggabungkan saja belum cukup karena kamu mungkin ingin memperbarui objek dengan id yang sama. Map bisa dipakai sebagai indeks sementara.

const lama = [
  { id: 1, nama: 'Budi' },
  { id: 2, nama: 'Sari' }
];
const baru = [
  { id: 2, nama: 'Sari', kota: 'Bandung' },
  { id: 3, nama: 'Tono' }
];

const peta = new Map(lama.map(item => [item.id, item]));
baru.forEach(item => peta.set(item.id, { ...peta.get(item.id), ...item }));

const hasil = [...peta.values()];

Hasilnya berisi tiga objek dengan id 2 yang sudah digabung propertinya, bukan dua entri terpisah.

7. Memilih metode yang sesuai

Perbedaan utama ketiga metode dasar terletak pada apakah array asli berubah dan bagaimana hasilnya dipakai.

• concat(): menghasilkan array baru, aman dipakai saat array asli masih dibutuhkan di tempat lain.
• Spread operator: penulisan paling ringkas untuk membuat array baru, cocok di dalam literal array.
• push() dengan spread: mengubah array tujuan, berguna saat kamu memang ingin memperbarui satu array yang sudah ada.
• Set: dipakai bila duplikat harus dibuang.
• Map: pilihan saat objek perlu digabung berdasarkan kunci tertentu.

Untuk array yang sangat besar, membuat array baru dengan concat() atau spread berarti menyalin seluruh isi. Kalau kode berjalan di dalam loop yang panjang, pertimbangkan apakah array baru memang perlu dibuat setiap iterasi. Mengubah array yang sudah ada dengan push() lebih hemat memori pada kasus seperti itu.

Ringkasan

concat() dan spread operator menghasilkan array baru tanpa mengubah sumbernya, sedangkan push() bersama spread mengubah array tujuan. Untuk kebutuhan khusus seperti membuang duplikat atau menggabungkan objek berdasarkan id, Set dan Map memberi kontrol lebih besar dibanding metode dasar.

Pertanyaan yang Sering Diajukan

Apakah concat() mengubah array asli?

Tidak. concat() mengembalikan array baru dan membiarkan array yang dipanggil tetap seperti semula. Kalau kamu membutuhkan hasilnya, simpan ke variabel lain atau timpa variabel lama secara sadar.

Bisakah spread operator menggabungkan array yang berisi objek?

Bisa, tapi salinannya dangkal. Objek di dalam array hasil masih merujuk ke objek yang sama dengan array sumber, jadi perubahan pada properti objek akan terlihat di kedua array. Untuk salinan penuh, kamu perlu menyalin objeknya satu per satu.

Mana yang lebih cepat, concat() atau spread?

Untuk penggunaan sehari-hari, selisihnya biasanya tidak terasa. Spread lebih ringkas dan mudah dibaca, sementara concat() lebih jelas saat menggabungkan beberapa array sekaligus. Ukur sendiri dengan data yang kamu pakai kalau performa menjadi perhatian di bagian kode tertentu.