Home  >  Javascript

Destructuring Assignment pada JavaScript

Destructuring assignment merupakan salah satu fitur penting dalam JavaScript modern (ES6) yang memungkinkan pengembang untuk mengekstraksi nilai dari objek dan array secara ringkas dan mudah dibaca. Dengan fitur ini, proses pengambilan nilai tidak lagi memerlukan pengaksesan properti atau indeks satu per satu, sehingga kode menjadi lebih efisien, rapi, dan mudah dikelola.

Artikel ini membahas pengertian destructuring, cara penggunaannya pada array dan objek, serta contoh penerapan dalam berbagai situasi pemrograman.

1. Apa Itu Destructuring Assignment?

Destructuring assignment adalah sintaks JavaScript yang memungkinkan pemecahan struktur data seperti array dan object ke dalam variabel-variabel terpisah.

Tanpa destructuring:

const user = { name: "Dina", age: 25 };
const name = user.name;
const age = user.age;

Dengan destructuring:

const { name, age } = user;

Lebih ringkas dan mudah dipahami.

2. Destructuring pada Array

Destructuring array bekerja berdasarkan urutan nilai.

Contoh dasar:

const colors = ["merah", "hijau", "biru"];
const [c1, c2, c3] = colors;

console.log(c1); // merah
console.log(c2); // hijau

Melewati elemen tertentu:

const [,, third] = colors;
console.log(third); // biru

Menggunakan nilai default:

const [a = 10, b = 20] = [5];
console.log(a); // 5
console.log(b); // 20

Rest operator dalam array:

const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]

3. Destructuring pada Object

Berbeda dengan array, destructuring pada objek berdasarkan nama properti, bukan urutan.

Contoh dasar:

const person = { name: "Budi", age: 30 };
const { name, age } = person;

Mengganti nama variabel (alias):

const { name: fullName, age: umur } = person;

console.log(fullName); // Budi
console.log(umur);     // 30

Nilai default pada objek:

const { city = "Jakarta" } = person;
console.log(city); // Jakarta

Rest operator pada objek:

const { name, ...rest } = person;
console.log(rest); // { age: 30 }

4. Destructuring dalam Fungsi

Destructuring sangat berguna untuk fungsi yang menerima objek atau array, terutama jika banyak parameter opsional.

Pada parameter array:

function printCoords([x, y]) {
  console.log(`X: ${x}, Y: ${y}`);
}

printCoords([10, 20]);

Pada parameter objek:

function displayUser({ name, age }) {
  console.log(`${name} berusia ${age} tahun`);
}

displayUser({ name: "Sari", age: 22 });

5. Destructuring Bersarang (Nested Destructuring)

JavaScript memungkinkan destructuring pada struktur data yang kompleks.

Array bersarang:

const numbers = [1, [2, 3]];
const [a, [b, c]] = numbers;

Objek bersarang:

const user = {
  name: "Andi",
  address: {
    city: "Bandung",
    zip: 40123
  }
};

const { address: { city, zip } } = user;

6. Destructuring dalam Kombinasi dengan Spread dan Rest Operator

Spread dan rest sering digunakan bersama destructuring untuk manipulasi data.

Contoh:

const arr = [1, 2, 3, 4, 5];
const [first, ...others] = arr;

Pada objek:

const obj = { a: 1, b: 2, c: 3 };
const { a, ...others } = obj;

7. Manfaat Penggunaan Destructuring

ManfaatPenjelasan
Kode lebih ringkasMengurangi penulisan kode berulang
Lebih mudah dibacaStruktur variabel lebih jelas
Cocok untuk API modernBanyak API mengembalikan objek kompleks
Mempermudah fungsiParameter fungsi dapat diambil langsung

Kesimpulan

Destructuring assignment merupakan fitur JavaScript yang memberikan cara elegan dan efisien untuk mengambil nilai dari array dan objek. Dengan sintaks yang lebih singkat dan fleksibel, destructuring membantu penyederhanaan kode, meningkatkan keterbacaan, dan mengurangi kemungkinan kesalahan.

Fitur ini sangat berguna dalam pengembangan aplikasi modern terutama ketika bekerja dengan API, manipulasi data kompleks, serta penulisan fungsi yang membutuhkan banyak parameter.

Categories:Javascript

Tags:

Related Posts