Berkenalan dengan Spread Operator

Saya masih ingat pernah menggunakan Spread Operator beberapa kali. Baik untuk kerjaan di kantor lama, di project yang saat ini sedang dikerjakan, hingga membantu teman menyelesaikan bug pada kodingannya. Bisa dibilang lumayan familiar dengan cara penggunaannya, tapi yang lucu adalah saya tidak tau Spread Operator itu apa.

Lucu kan? Hehe.

Bisa menggunakan sebuah alat tapi nggak tau nama alatnya, makanya disini mencoba mendokumentasikan perkenalan dengan si Spread Operator ini. Cari tau sana-sini dan nyobain, kira-kira apa masih ada kegunaan yang lainnya selain yang sering saya pakai.

Apa itu Spread Operator?

Spread operator adalah sebuah operator yang digunakan untuk memanipulasi array dan objek. Dengan menggunakan spread operator, kita bisa secara otomatis memecah nilai sebuah array menjadi argument yang dimasukkan ke dalam parameter dari sebuah fungsi, menggabungkan beberapa argument yang dijadikan paramter pada sebuah fungsi menjadi sebuah array, dan masih banyak lagi. Cara pendeklarasiannya adalah dengan menggunakan simbol 3 titik (.).

Contoh pengunaannya

Contoh sederhananya adalah ketika kita akan melakukan operasi penjumlahan untuk semua angka yang ada di dalam sebuah array.

const angka = [4, 5, 6, 7, 8];

function penjumlahan(v, w, x, y, z) {
  console.log(v + w + x + y + z);
}

penjumlahan(angka[0], angka[1], angka[2], angka[3], angka[4]); // 30
penjumlahan(...angka); // 30

Sesuai dengan contoh diatas, dengan spread operator kita bisa memecah nilai dari sebuah array menjadi argumen yang kemudian dimasukkan ke dalam parameter dari function penjumlahan diatas. Nilai dari array angka akan langsung mengisi parameter v, w, x, y, z pada function penjumlahan kemudian dijumlahkan di dalam function tersebut.

Terdapat dua contoh pemanggilan function penjumlahan diatas. Pertama adalah cara manual dengan menuliskan setiap nilai dari array berdasarkan indexnya masing-masing. Kemudian yang kedua menggunakan spread operator. Keduanya menampilkan hasil yang sama, yakni 30.

Namun jika dilihat dari cara pemanggilannya, terlihat lebih singkat yang menggunakan spread operator. Jika nilai yang ada di dalam array tersebut lebih dari 5, sudah jelas jika menggunakan cara manual akan semakin bertambah panjang lagi baris untuk pemanggilan function penjumlahannya.

Contoh pengunaannya, lagi

Spread operator juga dapat digunakan untuk memasukkan sebuah array ke dalam array yang lain. Contohnya disini adalah memasukkan array buahDariTetangga ke dalam array buahDiRumah dengan menggunakan function simpanBuah.

const buahDariTetangga = ["jeruk", "apel"];

function simpanBuah(buah) {
  const buahDiRumah = ["stroberi", ...buah, "mangga"];
  console.log(buahDiRumah);
}

simpanBuah(buahDariTetangga); // ['stroberi', 'jeruk', 'apel', 'mangga']

Seperti contoh diatas, spread operator memecah nilai dari array buahDariTetangga dan memasukkan di tengah-tengah nilai dari array buahDiRumah. Kemudian hasil akhirnya akan menjadi seperti ini ['stroberi', 'jeruk', 'apel', 'mangga'].

Contoh penggunaannya, menggabungkan 2 array

Masih ada contoh yang lain lagi, yaitu menggabungkan 2 array.

const gengCowok = ["Ihsan", "Banu", "Budi"];
const gengCewek = ["Susanti", "Angel", "Astri"];

function masukKelas(siswa, siswi) {
  const muridDalamKelas = [...siswa, ...siswi];
  console.log(muridDalamKelas);
}

masukKelas(gengCowok, gengCewek);
// ['Ihsan', 'Banu', 'Budi', 'Susanti', 'Angel', 'Astri']

Pada contoh diatas terdapat array gengCowok dan gengCewek yang masing-masing memiliki 3 nilai berupa nama siswa. Dua array tersebut akan digabungkan menjadi sebuah array yang bernama muridDalamKelas dengan menggunakan function masukKelas. Keduanya digabungkan dengan menggunakan spread operator dan membuat array muridDalamKelas berisi gabungan nilai dari kedua array tersebut yaitu ['Ihsan', 'Banu', 'Budi', 'Susanti', 'Angel', 'Astri'].

Contoh penggunaannya, menggabungkan 2 objek

Contoh yang terakhir adalah menggabungkan dua objek.

const transkripLama = {
  nama: "bagas",
  umur: "20",
  ipk: "3.30",
  predikat: "Memuaskan",
};
const transkripBaru = {
  nama: "bagas",
  umur: "20",
  ipk: "3.70",
  predikat: "Sangat Memuaskan",
  jurusan: "Teknologi Informasi",
};

function cekTranskripNilai(lama, baru) {
  const transkripAkhir = { ...lama, ...baru };
  console.log(transkripAkhir);
}

cekTranskripNilai(transkripLama, transkripBaru);
// {nama: 'bagas', umur: '20', ipk: '3.70', predikat:'Sangat Memuaskan', jurusan: 'Teknologi Informasi'}

Pada contoh di atas, terdapat dua objek yaitu transkripLama dan transkripBaru yang isinya adalah data transkrip seorang mahasiswa. Disini kita akan menggabungkan kedua objek tersebut menjadi sebuah objek yang bernama transkripAkhir. Konsep penggunaan spread operatornya sama dengan menggabungkan dua array pada contoh sebelumnya.

Perbedaaannya adalah jika yang digabungkan adalah objek, ketika terdapat key yang sama diantara kedua objek maka value yang digunakan adalah value dari key pada objek kedua atau istilah kerennya itu di overwrite. Setelah digabungkan, hasil akhirnya akan menjadi seperti ini {nama: 'bagas', umur: '20', ipk: '3.70', predikat:'Sangat Memuaskan', jurusan: 'Teknologi Informasi'}.

Ternyata masih ada fungsi lain dari si Spread Operator yang belum pernah saya pakai, yah kedepannya mungkin bakal dipakai tergantung kebutuhan. Setidaknya sudah tau dulu fungsi-fungsinya. Nanti kalo butuh tinggal dipanggil, udah kaya temen aja ya haha.

Makasih udah baca sampai sini, have a nice day!