DEV Community

Cover image for Object Destructuring - JavaScript
boibolang
boibolang

Posted on

Object Destructuring - JavaScript

Setelah kemarin kita membahas array destructuring, kali ini kita akan membahas object destructuring. Sama seperti array destrucuring, object destructuring adalah suatu cara untuk mengambil beberapa properti dari sebuah object. Object destructuring tidak merubah struktur object asal. Contohnya sebagai berikut:

const siswa = {
 nama: 'Boy sandra',
 alamat: 'Surabaya',
 hobi: ['lari','makan','baca komik'],
 phone: '123456',
 email: 'boi@email.com',
 makanan: {
  senin: 'rendang',
  selasa: 'pecel',
  rabu: 'sate',
 },
 sekolah: {
  senin: {
   masuk: 7,
   pulang: 15
  },
  selasa: {
   masuk: 8,
   pulang: 16
  }
 }
};

const {nama, sekolah} = siswa;
console.log(nama, sekolah);
Enter fullscreen mode Exit fullscreen mode

result
Kita juga bisa mengganti properti name dari sebuah object seperti contoh berikut:

const {nama: namaBaru, alamat: alamatBaru} = siswa;
console.log(alamatBaru, namaBaru);
console.log(siswa);
Enter fullscreen mode Exit fullscreen mode

result
Terlihat bahwa struktur object awal tidak berubah. Kita juga bisa menentukan default value dari sebuah properti.

const {peliharaan = ['kucing']} = siswa;
console.log(peliharaan);
console.log(siswa);
Enter fullscreen mode Exit fullscreen mode

result

Tapi perlu diingat sekali lagi bahwa dalam hal object destructuring, penambahan properti diluar object tidak akan merubah object awal. Untuk menambahkan properti di object bisa dengan cara sebagai berikut:

siswa.peliharaan = 'anjing';
console.log(siswa);
Enter fullscreen mode Exit fullscreen mode

result

Kita bisa mengganti nilai variabel yang diambilkan dari properti value dari sebuah object, syaratnya adalah nama variabelnya harus sama.

let namaku = 'Suman Jaya';
let umurku = 35;
console.log(namaku, umurku); // output: Suman Jaya 35

const data = {namaku: 'Abdul Manap', umurku: 45};
({namaku, umurku} = data);
console.log(namaku, umurku); // output: Abdul Manap 45
Enter fullscreen mode Exit fullscreen mode

Kita juga bisa mengambil properti value dari object bersarang (nested object) dan menyimpannya kedalam variabel baru.

const {
 senin: {
  masuk: masukSekolah,
  pulang: pulangSekolah
 },
} = siswa.sekolah;
console.log(masukSekolah, pulangSekolah); // output: 7 15
Enter fullscreen mode Exit fullscreen mode

Top comments (0)