• Apa Itu Spread Operator?
• Menyebarkan Isi Array
• Menggabungkan Dua atau Lebih Array
• Menyalin Array (Copy Array)
• Spread pada Object
• Spread pada Function Arguments
• Kesimpulan

Halo teman-teman semuanya, di artikel kali ini kita akan membahas salah satu fitur keren di JavaScript modern (ES6) yaitu Spread Operator. Spread operator sangat membantu untuk bekerja dengan array dan object dengan lebih praktis dan elegan.

Apa Itu Spread Operator?

Spread Operator adalah fitur di JavaScript yang digunakan untuk menyebarkan elemen dari array atau object menjadi satuan individual. Tandanya adalah tiga titik (...) diikuti dengan nama array atau object yang ingin disebarkan.

Menyebarkan Isi Array

Contoh sederhana:

const angka = [1, 2, 3];

console.log(...angka);
// Output: 1 2 3

Tanpa spread operator, array akan ditampilkan sebagai satu kesatuan. Dengan spread operator, setiap item di dalam array dipisahkan.

Menggabungkan Dua atau Lebih Array

Spread operator memudahkan kita menggabungkan beberapa array:

const buah1 = ["Apel", "Jeruk"];
const buah2 = ["Mangga", "Pisang"];

const semuaBuah = [...buah1, ...buah2];
console.log(semuaBuah);
// Output: ["Apel", "Jeruk", "Mangga", "Pisang"]

Menyalin Array (Copy Array)

Kalau kita meng-copy array biasa, yang tercopy adalah referensinya. Kalau pakai spread operator, kita meng-copy data baru:

const warnaAsli = ["Merah", "Biru"];
const warnaSalinan = [...warnaAsli];

warnaSalinan.push("Hijau");

console.log(warnaAsli);   // ["Merah", "Biru"]
console.log(warnaSalinan); // ["Merah", "Biru", "Hijau"]

Spread pada Object

Tidak hanya untuk array, spread operator juga bisa dipakai di object!

const user = {
  nama: "Dina",
  umur: 25
};

const userBaru = {
  ...user,
  pekerjaan: "Programmer"
};

console.log(userBaru);
// Output: { nama: 'Dina', umur: 25, pekerjaan: 'Programmer' }

Kita bisa meng-copy object dan menambahkan/mengubah field di dalamnya.

Spread pada Function Arguments

Ada kasus function yang menerima banyak parameter, spread operator bisa dipakai untuk memecah array menjadi argumen individual:

function tambah(a, b, c) {
  return a + b + c;
}

const angka = [1, 2, 3];

console.log(tambah(...angka));
// Output: 6

Kesimpulan

Spread Operator (...) sangat berguna untuk menyalin array atau object tanpa memengaruhi data aslinya, dan menggabungkan beberapa array atau object, serta menyebarkan array ke dalam argument function.

Di artikel berikutnya, kita akan membahas Belajar Rest Operator di JavaScript, yaitu fitur saudaraan yang sama-sama pakai ... tapi fungsi utamanya berbeda.

Terima Kasih