Contoh Destructuring Object dalam Javascript

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
  1. */
 
Dalam contoh di atas tanda kurung kurawal { } merepresentasikan objek yang akan didestruksikan. Di dalamnya terdapat firstNamelastName, 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.firstNamelastName 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:
  1. 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
  1. */
 
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
  1. {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.
  1. ({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

18

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
  1. */
 
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:
    1. const profile = {
    2. firstName: “John”,
    1. lastName: “Doe”,
    1. age: 18
    2. }

const {firstName: localFirstName, lastName: localLastName, age: localAge} = profile; 

    1. console.log(localFirstName);
    2. console.log(localLastName);
    1. console.log(localAge);
    1. /* output:
    2. John
    1. Doe
    1. 18
  1. */
 


Butuh jasa pembuatan website di Makassar? kontak kami. Jasa Pembuatan Aplikasi Android, Jasa SEO dan SEM, SMM, Internet Marketing Agency, Social Media Strategist Makassar, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik bisa kami lakukan

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat