Belajar Destructuring Object & Array Javascript

Potongan kode pada materi ini: 

• Object Destructuring: https://repl.it/@dicodingacademy/163-02-destructuring-object?lite=true
• Array Destructuring: https://repl.it/@dicodingacademy/163-02-destructuring-array?lite=true

Literasi objek dan array adalah dua hal yang paling banyak digunakan dalam mengelola data di JavaScript. JSON (JavaScript Object Notation) merupakan data format paling populer yang digunakan dalam transaksi data saat ini.

[
    {
        "id": 14,
        "title": "Menjadi Android Developer Expert",
        "author": "Google ATP"
    },
    {
        "id": 51,
        "title": "Belajar Membuat Aplikasi Android untuk Pemula",
        "author": "Google ATP"
    },
    {
         "id": 74,
         "title": "Membangun Progressive Web Apps",
         "author": "Codepolitan"
    },
    {
         "id": 123,
         "title": "Belajar Dasar Pemrograman Web",
         "author": "Dicoding Indonesia"
    }
]

Jika kita lihat pada struktur JSON di atas, kita dapat menyimpulkan bahwa struktur tersebut dibangun dari sebuah array dan objek. Karena kedua hal ini banyak digunakan untuk mengelola data pada JavaScript, untuk memudahkan developer, ES6 menambahkan fitur untuk mendestruksikan objek dan array.

Tapi sebelum itu, apa sebenarnya destructuring object dan array itu? Destructuring pada JavaScript merupakan sintaks yang dapat mengeluarkan nilai dari array atau properties dari sebuah object ke dalam satuan yang lebih kecil.

Secara tidak sadar mungkin kita pernah melakukan destructuring, namun sebelum ES6 hal tersebut dilakukan dengan cara seperti ini:

• Array
• 
  

const foods = ['Pie', 'Cake', 'Honey']
 
const myFood = foods[0]
const yourFood = foods[1]
const ourFood = foods[2]
 
console.log(myFood, yourFood, ourFood)
 
 
/* output:
Pie Cake Honey
*/

• Object

const profile = {
    firstName: "John",
    lastName: "Doe",
    age: 18
}
 
const firstName = profile.firstName
const lastName = profile.lastName
const age = profile.age
 
console.log(firstName, lastName, age)
 
 
/* output:
John Doe 18
*/

Perhatikan kode pada destructuring object di atas, Kode tersebut akan mengekstraksi nilai yang berada di dalam objek profile dan menyimpannya pada variabel lokal yang memiliki nama sama dengan properti di dalam objek profile. 

Mungkin mengekstraksi nilai dari objek dengan langkah ini terlihat mudah, namun bayangkan jika objek memiliki banyak properti dan harus melakukan hal tersebut secara manual satu persatu. Terlalu banyak kode yang dituliskan berulang kan?

Itulah alasan ES6 menambahkan fitur yang memudahkan kita untuk destructuring objek maupun array. Ketika kita ingin memecah struktur data menjadi bagian-bagian yang lebih kecil, kita akan dipermudah untuk mendapatkan data yang diinginkan.

Lantas bagaimana cara melakukan destructuring objek dan array pada ES6?

Destructuring Object

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

const profile = {
    firstName: "John",
    lastName: "Doe",
    age: 18
}
 
const {firstName, lastName, age} = profile;
 
console.log(firstName, lastName, age);
 
/* output:
John Doe 18
*/

Pada 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 perlu perhatikan penamaan variabel-variabelnya. Pastikan penamaannya sama seperti yang dimiliki oleh properti objeknya. 

Melalui nama variabel inilah nilai-nilai properti objek akan dimasukkan secara otomatis. Sehingga variabel firstName akan berisikan nilai profile.firstName, lastName akan berisikan nilai profile.lastName, begitu juga dengan variabel age akan berisikan nilai profile.age. 

Dalam destructuring object, kita bisa menspesifikasikan salah satu nilai yang ingin kita desktruksikan. Sehingga kita tidak perlu membuat variabel sebanyak properti yang dimiliki objeknya. contohnya:

const {lastName} = profile;

Destructuring Assignment

Pada contoh sebelumnya kita melakukan destructuring object pada deklarasi variabel, namun pada kasus tertentu mungkin kita perlu melakukannya pada variabel yang sudah dideklarasikan. Atau kita ingin mengubah nilainya dengan nilai properti di objek. 

Dalam kasus tersebut, kita bisa melakukannya dengan seperti ini:

const profile = {
    firstName: "John",
    lastName: "Doe",
    age: 18
}
 
let firstName = "Dimas";
let age = 20;
 
// menginisialisasi nilai baru melalui object destruction
({firstName, age} = profile);
 
console.log(firstName);
console.log(age);
 
/* output:
John
18
*/

Saat melakukan destructuring assignment kita perlu menuliskan destructuring object di dalam tanda kurung. Jika tidak dituliskan di dalamnya, tanda buka kurung kurawal akan membuat JavaScript mengira kita membuat block statement, dan block statement tentu tidak bisa berada pada sisi kiri assignment. 

// tidak bisa karena JavaScript mengira kita membuat block statement
// block statement tidak bisa berada pada sisi kiri assignment
{firstName, age} = profile;

Nah inilah fungsinya tanda kurung. Ia akan memberitahu JavaScript bahwa tanda kurawal yang di dalamnya bukan sebuah block statement, melainkan sebuah expression. Sehingga assignment dapat dilakukan.

({firstName, age} = profile);

Default Values

Ketika kita mendestruksikan objek dan kita menetapkan variabel dengan nama yang bukan merupakan properti dari objek, maka nilai dari variabel tersebut menjadi undefined. Contohnya:

const profile = {
    firstName: "John",
    lastName: "Doe",
    age: 18
}
 
 
const {firstName, age, isMale} = profile;
 
console.log(firstName)
console.log(age)
console.log(isMale)
 
/* output:
John
18
undefined
*/

Alternatifnya, kita bisa secara opsional mendefinisikan nilai default pada properti tertentu jika tidak ditemukan. Untuk melakukanya tambahkan tanda assignment (=) setelah nama variabel dan tentukan nilai defaultnya seperti ini:

const profile = {
    firstName: "John",
    lastName: "Doe",
    age: 18
}
 
 
const {firstName, age, isMale = false} = profile;
 
console.log(firstName)
console.log(age)
console.log(isMale)
 
/* output:
John
18
false
*/

Ketika menambahkan default value, jika properti tidak ditemukan nilai default akan diterapkan pada variabel.

Assigning to Different Local Variable Names

Sampai saat ini kita tahu bahwa untuk mendekstruksikan objek pada variabel lokal kita perlu menyeragamkan penamaan lokal variabel dengan properti objeknya. Namun sebenarnya dalam mendestruksikan objek kita bisa menggunakan penamaan variabel lokal yang berbeda. ES6 menyediakan sintaks tambahan yang membuat kita dapat melakukan hal tersebut. Penulisannya mirip seperti ketika kita membuat properti beserta nilainya pada objek. 

Contohnya seperti ini:

const profile = {
    firstName: "John",
    lastName: "Doe",
    age: 18
}
 
const {firstName: localFirstName, lastName: localLastName, age: localAge} = profile;
 
console.log(localFirstName);
console.log(localLastName);
console.log(localAge);
 
 
/* output:
John
Doe
18
*/

Destructuring Array

Destructuring Array serupa dengan destructuring object. Jika objek menggunakan tanda kurung kurawal { } sedangkan array menggunakan tanda kurung siku [ ]. Perbedaan lainnya adalah destructuring array bekerja berdasarkan posisi daripada penamaan propertinya. Berikut contoh dari destructuring array pada ES6:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
const [firstFood, secondFood, thirdFood, fourthFood] = favorites;
 
console.log(firstFood);
console.log(secondFood);
console.log(thirdFood);
console.log(fourthFood);
 
/* output:
Seafood
Salad
Nugget
Soup
*/

Contoh di atas merupakan proses destructuring array. Di dalam array tersebut (favorites) terdapat 4 (empat) nilai string yang masing-masing nilainya dimasukkan ke variabel lokal firstFood, secondFood, thirdFood, dan fourthFood. Nilai pada array yang dimasukkan ke variabel lokal dipilih berdasarkan posisi di mana ia dideklarasikan pada array notasi. 

const [firstFood, secondFood, thirdFood, fourthFood] = favorites;

Sebenarnya nama dari variabel lokal bisa apa saja. Yang terpenting adalah urutan ketika deklarasi variabelnya saja.

Kita juga bisa memilih nilai pada index tertentu untuk didestruksikan pada array. Contohnya jika kita ingin mengambil nilai ketiga dari array, kita tidak perlu menyiapkan lokal variabel untuk menampung nilai array pertama, kedua, atau pun keempat. Kita bisa melakukannya dengan membiarkan index array yang kita tidak inginkan tetap kosong (tanpa menulis variabel lokal). Lebih lanjut, tanda koma tetap (,) tetap diperlukan untuk menunjukkan posisi index-nya seperti ini:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
const [, , thirdFood ] = favorites;
 
console.log(thirdFood);
 
/* output:
Nugget
*/

Destructuring Assignment

Kita juga bisa melakukan destructuring assignment pada array. Namun tidak seperti objek, kita tidak perlu membungkusnya pada tanda kurung. Contohnya seperti berikut:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
let myFood = "Ice Cream";
let herFood = "Noodles";
 
[myFood, herFood] = favorites;
 
console.log(myFood);
console.log(herFood);
 
/* output:
Seafood
Salad
*/

Array destructuring assignment sangat berguna ketika kita hendak menukar nilai antar dua variabel, sebelum ES6 untuk melakukan hal ini kita menggunakan cara manual menggunakan algoritma sorting seperti ini:

var a = 1;
var b = 2;
var temp;
 
console.log("Sebelum swap");
console.log("Nilai a: " + a);
console.log("Nilai b: " + b);
 
temp = a;
a = b;
b = temp;
 
console.log("Setelah swap");
console.log("Nilai a: " + a);
console.log("Nilai b: " + b);
 
/* output
Sebelum swap
Nilai a: 1
Nilai b: 2
Setelah swap
Nilai a: 2
Nilai b: 1
*/

Untuk melakukan pertukaran nilai, kita membutuhkan variabel penengah. Pada contoh kode di atas variabel tersebut adalah temp. Variabel penengah dibutuhkan untuk menyimpan data sementara pada variabel yang akan ditukar. Hal ini menjadi kurang efektif karena kita harus membuat variabel baru yang sebenarnya hanya bersifat sementara.

Dengan array destructuring assignment kita bisa menukar nilai variabel dengan mudah dan tentu tanpa membuat variabel extra.  

let a = 1;
let b= 2;
 
console.log("Sebelum swap");
console.log("Nilai a: " + a);
console.log("Nilai b: " + b);
 
[a, b] = [b, a]
 
console.log("Setelah swap");
console.log("Nilai a: " + a);
console.log("Nilai b: " + b);
 
/* output
Sebelum swap
Nilai a: 1
Nilai b: 2
Setelah swap
Nilai a: 2
Nilai b: 1
*/

Default Values

Ketika melakukan array destructuring namun terdapat variabel yang posisinya tidak dapat terjangkau oleh array, maka variabel tersebut akan bernilai undefined. Contohnya:

const favorites = ["Seafood"];
 
const [myFood, herFood] = favorites
 
console.log(myFood);
console.log(herFood);
 
/* output:
Seafood
undefined
*/

Seperti objek, pada array destructuring kita juga dapat memberikan nilai default pada variabel yang tidak dapat terjangkau oleh array, sehingga nilai pada variabel tidak akan menjadi undefined.

const favorites = ["Seafood"];
 
const [myFood, herFood = "Salad"] = favorites
 
console.log(myFood);
console.log(herFood);
 
/* output:
Seafood
Salad
*/

Solution : Destructuring Object

Apakah Anda berhasil menerapkan destructuring object menggunakan pendekatan ES6? Jika belum, mari kita lakukan hal tersebut bersama-sama.

Tugas ini cukup mudah untuk dilakukan. Kita dapat mengubah kode berikut: 

const name = club.name;
const fanArt = club.fanArt;
const description = club.description;

Dengan menerapkan destructuring object seperti ini:

const {name, fanArt, description} = club;

Kita bisa lihat perubahannya. Ketika menggunakan destructuring object, kita dapat membuat kode yang tadinya memakan tiga baris, menjadi dituliskan dalam satu baris saja.

Untuk memastikan perubahan yang kita lakukan sudah benar, silakan Anda coba buka berkas index.html pada browser. Jika aplikasi berjalan dengan lancar, maka fitur destructuring objek berhasil diterapkan dengan baik.

Namun jika aplikasi tidak berjalan lancar, dan menghasilkan eror pada console browser, jangan malu untuk bertanya pada forum diskusi ya!

Langkah dari solution ini bisa Anda temukan juga pada repository berikut: https://github.com/dicodingacademy/a163-bfwd-labs/tree/104-club-finder-destructuring-object-solution