Cara Gabungkan Array di Javascript

Hai, setelah lama gak nulis akhirnya saya sempatkan buat nulis lagi. Kali ini kita akan membahas gimana caranya gabungkan array dalam JavaScript.

Ok, untuk menggabungkan 2 atau lebih array dalam javascript kita akan gunakan 2 cara. Kita akan coba Concat dan Spread Operator. Berikut contoh penggunaannya:

// 2 cara untuk menggabungkan array dalam javascript

const mobil = ['ayla', 'avanza'];
const truk = ['dino', 'fuso'];

// Metode 1: Concat
const combined1 = [].concat(mobil, truk);

// Metode 2: Spread
const combined2 = [...mobil, ...truk];

// Hasil
// [ 'ayla', 'avanza', 'dino', 'fuso' ]

Apa yang dilakukan oleh metode concat?

Untuk melakukan pengecekan bagaimana cara kerja concat, kalian dapat menulis code seperi berikut:

const mobil = ['ayla', 'avanza'];
const truk = ['dino', 'fuso'];

const combined = mobil.concat(truk);
// [ 'ayla', 'avanza', 'dino', 'fuso' ]

console.log(mobil); // ['ayla', 'avanza'];
console.log(truk); // ['dino', 'fuso'];

Seperti yang kalian lihat, cara penulisan ini tidak memanipulasi atau mengubah array yang ada. Jadi concat hanya bekerja pada variabel "combined", dia tidak mempengaruhi variabel "mobil" dan "truk".

Mana yang harus kita pilih?

Mari kita bandingkan kedua versi dalam penggabungan array menggunakan metode concat.

// Versi A:
const combinedA = [].concat(mobil, truk);

// Versi B:
const combinedB = mobil.concat(truk);

Dari dua jenis metode diatas, saya lebih suka Versi A. Karena menurut saya codenya jauh lebih jelas. Hanya dengan melihatnya, kita tahu kalau sedang membuat array baru dan saya tidak memanipulasi array yang sudah ada.

Sedangkan jika kita melihat Versi B, sepertinya kita menambahkan array truk ke deretan mobil, dan tampaknya tidak jelas bagi kita bahwa array mobil diubah atau tidak.

Tapi jika kalian lebih suka Versi B, ya itu juga gak masalah. Soalnya sama-sama bisa berjalan dengan baik.

Perbedaan antara Concat dan Spread?

Diawal kita menyebutkan 2 jenis metod yang akan kita pakai, nah beda dari keduanya kira-kira apa ya? Selain bentuk penulisan yang berbeda, kira-kira adalagi gak yang berbeda?

Kalau pertanyaannya, saya lebih suka mana antara concat dan spread, saya lebih suka pakai spread, karena menurut saya lebih ringkas dan lebih mudah untuk menulis. Tapi, terkadang juga kita harus menggunakan concat dalam kondisi tertentu.

Spread sangat bagus jika kalian tahu type data dalam array yang akan digabung itu apa. Tapi apa yang terjadi jika sumbernya adalah sesuatu yang lain, misalnya string akan kita gabungkan ke number. Lebih detailnya yuk kita telusuri contoh berikut.

Anggap kita ingin output dari penggabungan array adalah sebagai berikut:

[1, 2, 3, 'random'];

Menggunakan spread

function combineArray(array1, array2) {
  return [...array1, ...array2];
}

const isArray = [1, 2, 3];
const notArray = 'random';

combineArray(isArray, notArray);
// ? [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]

Jika kalian menggunakan spread, yang terjadi string bukan di masukan ke array secara langsung tapi di split terlebih dahulu. Jadi dalam case ini kita gak bisa pakai spread untuk memecahkan masalah kita.

Menggunakan concat

function combineArray(array1, array2) {
  return [].concat(array1, array2);
}

const isArray = [1, 2, 3];
const notArray = 'random';

combineArray(isArray, notArray);
// ✅  [ 1, 2, 3, 'random' ]

☝️ Luar biasa! Kita mendapatkan hasil yang kita inginkan.

Jadi aturan singkatnya jika kalian tahu akan berurusan dengan array, gunakan spread. Tetapi jika kalian mungkin berurusan dengan kemungkinan "non-array", gunakan concat untuk menggabungkan array ?