Contoh Destructuring Object dalam Javascript

destructuring object pada ES6 sintaks memakai objek literal { } di sisi kiri dari operasi assignment.

1. const profile = {

1. firstName: “John”,

1. lastName: “Doe”,

1. age: 18
2. }

1. const {firstName, lastName, age} = profile;

1. console.log(firstName, lastName, age);

1. /* output:

1. John Doe 18

Dalam contoh di atas tanda kurung kurawal { } merepresentasikan objek yang akan didestruksikan. Di dalamnya terdapat firstName, lastName, dan age yang merupakan variabel di mana kita menyimpan nilai properti dari objek profile. Kita juga harus perhatikan penamaan variabel-variabelnya. Pastikanlah penamaannya sama seperti yang dipunyai oleh properti objeknya. Melalui nama variabel inilah nilai-nilai properti objek akan dimasukkan dengan otomatis. Sehingga variabel firstName akan berisikan nilai profile.firstName, lastName akan berisikan nilai profile.lastName, begitu pula dengan variabel age akan berisikan nilai profile.age.

Dalam destructuring object, kita dapat menspesifikasikan salah satu nilai yang mau kita desktruksikan. Sehingga kita tak mesti membuat variabel sebanyak properti yang dipunyai objeknya. misalnya:

const {lastName} = profile;

Destructuring Assignment

Dalam contoh sebelumnya kita melakukan destructuring object pada deklarasi variabel, tetapi pada kasus tertentu mungkin kita harus melakukannya pada variabel yang telah dideklarasikan. Atau kita mau merubah nilainya dengan nilai properti di objek.

Dalam kasus itu, kita dapat melakukannya dengan semacam ini:

1. const profile = {

1. firstName: “John”,
2. lastName: “Doe”,
3. age: 18
4. }
5. let firstName = “Dimas”;

1. let age = 20;

// menginisialisasi nilai baru melalui object destruction

1. ({firstName, age} = profile);

1. console.log(firstName);

1. console.log(age);

1. /* output:
2. John

1. 18

Ketika melakukan destructuring assignment kita harus menuliskan destructuring object di dalam tanda kurung. Bila tidak dituliskan di dalamnya, tanda buka kurung kurawal akan membuat JavaScript mengira kita membuat block statement, dan block statement tentu tidak dapat berada di sisi kiri assignment.

1. // tidak dapat sebab JavaScript mengira kita membuat block statement

1. // block statement tidak dapat berada di sisi kiri assignment

{firstName, age} = profile;

Nah inilah fungsinya tanda kurung. Dia akan memberitahu JavaScript bahwa tanda kurawal yang di dalamnya bukan sebuah block statement, tetapi sebuah expression. Sehingga assignment bisa dilakukan.

({firstName, age} = profile);

Default Values

Saat kita mendestruksikan objek dan kita menetapkan variabel dengan nama yang bukan merupakan properti dari objek, maka nilai dari variabel itu jadi undefined. Misalnya:

1. const profile = {
2. firstName: “John”,
3. lastName: “Doe”,
4. age: 18
5. }

1. const {firstName, age, isMale} = profile;
2. console.log(firstName)

1. console.log(age)

1. console.log(isMale)

/* output:

John

undefined

Alternatifnya, kita dapat secara opsional mengartikan nilai default pada properti tertentu bila tidak didapati. Untuk melakukanya tambahkan tanda assignment (=) sesudah nama variabel dan tentukan nilai defaultnya semacam ini:

1. const profile = {

1. firstName: “John”,

1. lastName: “Doe”,

1. age: 18
2. }

1. const {firstName, age, isMale = false} = profile;
2. console.log(firstName)

1. console.log(age)

1. console.log(isMale)

1. /* output:
2. John

1. 18

1. false

Saat menambahkan default value, bila properti tidak didapati nilai default akan diimplementasikan pada variabel.

Assigning to Different Local Variable Names

Sampai sekarang ini kita tahu bahwa untuk mendekstruksikan objek pada variabel lokal kita harus menyeragamkan penamaan lokal variabel dengan properti objeknya. Tetapi sebetulnya dalam mendestruksikan objek kita dapat memakai penamaan variabel lokal yang berbeda. ES6 menyediakan sintaks tambahan yang membuat kita bisa melakukan hal itu. Penulisannya mirip seperti saat kita membuat properti bersama nilainya pada objek.

Misalnya semacam ini: