Destructuring Object dalam Javascript ES6

 JavaScript adalah bahasa pemrograman yang paling banyak digunakan untuk pengembangan web. Dalam artikel ini, saya akan memberikan tutorial dasar tentang JavaScript yang akan membantu Anda memulai dengan bahasa pemrograman ini.

Destructuring merupakan fitur pada ES6 yang mempermudahkan untuk mengolah nilai dari array maupun properti dari object pada JavaScript. Dalam artikel ini, kita akan membahas lebih detail tentang destructuring object.

Apa itu Destructuring Object?

Destructuring object adalah teknik untuk mengekstrak nilai dari object ke dalam variabel terpisah menggunakan sintaksis yang lebih singkat. Dengan destructuring object, kita dapat mengambil nilai dari beberapa properti object dan menyimpannya dalam variabel terpisah, sehingga memudahkan pengolahan nilai tersebut.

Contoh Destructuring Object

Berikut adalah contoh penggunaan destructuring object:

const pelanggan = {
nama: 'John Doe',
umur: 30,
pekerjaan: 'Developer'
};

const { nama, umur, pekerjaan } = pelanggan;
console.log(nama); // Output: John Doe
console.log(umur); // Output: 30

console.log(pekerjaan); // Output: Developer

{codeBox}

Dalam contoh di atas, kita menggunakan destructuring object untuk mengekstrak nilai dari properti nama, umur, dan pekerjaan pada object pelanggan. Kita membuat variabel dengan nama yang sama dengan properti object dan menetapkan nilainya ke variabel tersebut dengan sintaksis {namaVariabel}.

Dalam destructuring object, kita juga dapat memberikan nama variabel baru pada saat mengekstrak nilai dari object. Berikut adalah contoh penggunaan destructuring object dengan nama variabel baru:

const pelanggan = {
  nama: 'John Doe',
  umur: 30,
  pekerjaan: 'Developer'
};
const { nama: name, umur: age, pekerjaan: job } = pelanggan;

console.log(nama); // Output: John Doe
console.log(umur); // Output: 30

console.log(pekerjaan); // Output: Developer

{codeBox}

Dalam contoh di atas, kita memberikan nama variabel baru pada saat mengekstrak nilai dari properti object pelanggan. Variabel nama diganti dengan variabel name, umur diganti dengan age, dan pekerjaan diganti dengan job.

Destructuring object juga dapat digunakan untuk mengekstrak nilai dari object yang terdalam. Berikut adalah contoh penggunaan destructuring object untuk mengekstrak nilai dari object yang terdalam:

const pelanggan = {

  nama: 'John Doe',

  umur: 30,

  pekerjaan: 'Developer',

  alamat: {

    jalan: 'Jl. Jend. Sudirman',

    kota: 'Jakarta'

  }

};

const { nama, umur, pekerjaan, alamat: { jalan, kota } } = pelanggan;

console.log(nama); // Output: John Doe

console.log(umur); // Output: 30

console.log(pekerjaan); // Output: Developer

console.log(jalan); // Output: Jl. Jend. Sudirman

console.log(kota); // Output: Jakarta

{codeBox}

Dalam contoh di atas, kita menggunakan destructuring object untuk mengekstrak nilai dari properti nama, umur, pekerjaan, dan alamat yang terdalam pada object pelanggan. Kita

mengekstrak nilai dari properti jalan dan kota pada object alamat dengan menggunakan sintaksis alamat: {jalan, kota}.

Kesimpulan

Dalam JavaScript, destructuring object adalah teknik yang berguna untuk mengekstrak nilai dari properti object ke dalam variabel terpisah menggunakan sintaksis yang lebih singkat. Dengan menggunakan destructuring object, kita dapat mempermudah pengolahan nilai pada properti object dan membuat kode menjadi lebih efisien. Selain itu, destructuring object juga dapat digunakan untuk mengekstrak nilai dari object yang terdalam, sehingga memudahkan dalam pengolahan nilai yang kompleks.