Array dan Object Manipulation Lanjutan (Destructuring, Spread Operator, dan Rest Parameter) di JavaScript

Sebelumnya kita sudah belajar tentang array dan object manipulation Looping, map(), filter(), dan reduce(), sekarang kita akan lanjutkan tutorialnya tentang Array dan Object Manipulation Lanjutan (Destructuring, Spread Operator, dan Rest Parameter) di JavaScript.

Dalam JavaScript modern (ES6 ke atas), kita bisa menulis kode lebih singkat, rapi, dan mudah dibaca dengan fitur:

• Destructuring

• Spread Operator (...)

• Rest Parameter (...)

Fitur-fitur ini sangat berguna ketika bekerja dengan array dan object, terutama untuk:

• Menyalin atau menggabungkan data,

• Mengambil nilai tertentu dari object/array,

• Menangani parameter fungsi yang dinamis.

Mari kita pelajari satu per satu disertai contoh praktis.

1. Destructuring

Pengertian

Destructuring memungkinkan kita mengambil nilai dari array atau object dan menyimpannya ke dalam variabel dengan cara yang ringkas.

Contoh Destructuring Array

Tanpa destructuring:

const warna = ["Merah", "Hijau", "Biru"];
const merah = warna[0];
const hijau = warna[1];
const biru = warna[2];

Dengan destructuring:

const [merah, hijau, biru] = ["Merah", "Hijau", "Biru"];
console.log(merah); // Merah
console.log(biru);  // Biru

Kita juga bisa melewati elemen tertentu:

const [pertama, , ketiga] = ["Satu", "Dua", "Tiga"];
console.log(pertama, ketiga); // Satu Tiga

Destructuring Object

Tanpa destructuring:

const user = { nama: "Arvi", umur: 25, kota: "Jakarta" };
const nama = user.nama;
const umur = user.umur;

Dengan destructuring:

const { nama, umur, kota } = user;
console.log(nama); // Arvi
console.log(kota); // Jakarta

Kita juga bisa ubah nama variabel saat destructuring:

const { nama: username, umur: age } = user;
console.log(username, age); // Arvi 25

2. Spread Operator (...)

Pengertian

Spread Operator digunakan untuk menyalin, menggabungkan, atau menyebarkan isi array/object ke dalam struktur baru.

Spread pada Array

Menyalin array:

const angka = [1, 2, 3];
const salinan = [...angka];
console.log(salinan); // [1, 2, 3]

Menggabungkan array:

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

Menambah elemen baru:

const angkaBaru = [...angka, 4, 5];
console.log(angkaBaru); // [1, 2, 3, 4, 5]

Spread pada Object

Menyalin object:

const user = { nama: "Arvi", umur: 25 };
const copyUser = { ...user };

Menggabungkan dua object:

const alamat = { kota: "Jakarta", negara: "Indonesia" };
const profilLengkap = { ...user, ...alamat };
console.log(profilLengkap);
// { nama: "Arvi", umur: 25, kota: "Jakarta", negara: "Indonesia" }

Menambahkan atau mengganti properti:

const userUpdate = { ...user, umur: 26, pekerjaan: "Developer" };
console.log(userUpdate);

3. Rest Parameter (...)

Pengertian

Rest Parameter digunakan untuk mengambil sisa nilai (rest) dari array atau parameter fungsi. Ia mirip dengan spread operator, tapi berfungsi sebaliknya — bukan menyebarkan, tapi mengumpulkan.

Contoh Rest Parameter pada Array

const [pertama, kedua, ...sisanya] = [10, 20, 30, 40, 50];
console.log(pertama); // 10
console.log(sisanya); // [30, 40, 50]

Rest Parameter pada Fungsi

Gunakan rest parameter untuk menangani jumlah argumen dinamis:

function jumlahkan(...angka) {
  return angka.reduce((total, n) => total + n, 0);
}

console.log(jumlahkan(1, 2, 3));       // 6
console.log(jumlahkan(5, 10, 15, 20)); // 50

Kombinasi Destructuring, Spread, dan Rest

Semua fitur ini bisa digunakan bersama untuk membuat kode yang powerful dan elegan.

const user = {
  nama: "Budi",
  umur: 28,
  kota: "Bandung",
  hobi: ["Coding", "Membaca", "Traveling"]
};

// Destructuring dengan rest
const { nama, ...dataLain } = user;
console.log(nama);      // Budi
console.log(dataLain);  // { umur: 28, kota: "Bandung", hobi: [...] }

// Spread untuk update data
const userUpdate = { ...user, kota: "Jakarta", pekerjaan: "Developer" };
console.log(userUpdate);

// Destructuring array di dalam object
const { hobi: [hobi1, , hobi3] } = user;
console.log(hobi1, hobi3); // Coding Traveling

Studi Kasus: Mengelola Daftar Produk

const produk = [
  { id: 1, nama: "Laptop", harga: 8000000 },
  { id: 2, nama: "Keyboard", harga: 300000 },
  { id: 3, nama: "Mouse", harga: 150000 },
];

// Spread → tambah produk baru
const produkBaru = [...produk, { id: 4, nama: "Monitor", harga: 2000000 }];

// Destructuring → ambil harga produk pertama
const [{ nama, harga }] = produkBaru;
console.log(`Produk pertama: ${nama} - Rp${harga}`);

// Rest Parameter → hitung total harga
function totalHarga(...barang) {
  return barang.reduce((acc, item) => acc + item.harga, 0);
}

console.log("Total:", totalHarga(...produkBaru)); // Total semua produk

Kesimpulan

Fitur modern JavaScript seperti Destructuring, Spread Operator, dan Rest Parameter membuat kode:

• Lebih efisien,

• Lebih bersih,

• Lebih mudah dibaca dan dipelihara.

Fitur	Fungsi Utama	Contoh Singkat
Destructuring	Mengambil data dari array/object	const {nama} = user;
Spread Operator	Menyalin / menggabungkan data	[...array1, ...array2]
Rest Parameter	Mengumpulkan sisa data	function f(...args)

Dengan memahami konsep ini, kamu sudah siap menulis kode JavaScript dengan gaya modern dan profesional!