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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
    {
        "id": 14,
        "title": "Belajar Fundamental Aplikasi Android",
        "author": "Google ATP"
    },
    {
        "id": 51,
        "title": "Belajar Membuat Aplikasi Android untuk Pemula",
        "author": "Google ATP"
    },
    {
        "id": 123,
        "title": "Belajar Dasar Pemrograman Web",
        "author": "Dicoding Indonesia"
    },
    {
        "id": 163,
        "title": "Belajar Fundamental Front-End Web Development",
        "author": "Dicoding Indonesia"
    }
]

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

Apa sebenarnya destructuring object dan array itu? Destructuring dalam JavaScript merupakan sintaksis 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
//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
*/


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
//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 object profile dan menyimpannya pada variabel lokal yang memiliki nama sama dengan properti di dalam object profile. Mungkin mengekstraksi nilai dari object dengan langkah ini terlihat mudah, tetapi bayangkan jika object memiliki banyak properti dan harus melakukan hal tersebut secara manual satu persatu. Terlalu banyak kode yang dituliskan berulang, bukan?

Itulah alasan ES6 menambahkan fitur yang memudahkan kita untuk destructuring object 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 object dan array pada ES6? Mari kita simak materi berikutnya.


Destructuring Object

Penulisan sintaksis destructuring object pada ES6 menggunakan object literal ({ }) di sisi kiri dari operator assignment.

 1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
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 object yang akan didestrukturisasi. Di dalamnya terdapat firstName, lastName, dan age yang merupakan variabel untuk menyimpan nilai properti dari object profile. Kita juga perlu perhatikan penamaan variabelnya. Pastikan penamaannya sama seperti properti object-nya. Melalui nama variabel inilah nilai-nilai properti object 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 menentukan salah satu nilai yang ingin kita desktrukturisasikan. Sehingga kita tidak perlu membuat variabel sebanyak properti yang dimiliki objeknya, contohnya:

1
const {lastName} = profile;

Destructuring Assignment

Pada contoh sebelumnya, kita telah melakukan destructuring object pada deklarasi variabel. Namun, pada kasus tertentu mungkin kita perlu melakukannya pada variabel yang sudah dideklarasikan.

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
const profile = {
            firstName: "John",
            lastName: "Doe",
            age: 18
        }
         
        let firstName = "Dimas";
        let age = 20;
         
        // menginisialisasi nilai baru melalui destructuring object
        ({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 menuliskan tanda kurung, tanda kurung kurawal akan membuat JavaScript mengira kita membuat block statement, sementara block statement tidak bisa berada pada sisi kiri assignment.

1
        2
        3
// 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 memberi tahu JavaScript bahwa tanda kurawal di dalamnya bukan sebuah block statement melainkan sebuah expression, sehingga assignment dapat dilakukan.

1
({firstName, age} = profile);

Default Values

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

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
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 default-nya seperti ini:

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
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
        */

Jika nilai properti tidak ditemukan, maka nilai default akan diterapkan pada variabel.


Assigning to Different Local Variable Names

Sampai saat ini kita tahu bahwa untuk melakukan destrukturisasi object pada variabel lokal, kita perlu menyeragamkan penamaan variabel lokal dengan properti object-nya. Namun, sebenarnya dalam proses destrukturisasi object kita bisa menggunakan penamaan variabel lokal yang berbeda. ES6 menyediakan sintaksis tambahan yang membuat kita dapat melakukan hal tersebut. Penulisannya mirip seperti ketika kita membuat properti beserta nilainya pada object.

Contohnya seperti ini:

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
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. Object 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:

 1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
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
    */

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

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

Sebenarnya kita bebas untuk menentukan nama dari variabel lokal. Yang terpenting adalah urutan ketika deklarasi variabelnya saja.

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

1
    2
    3
    4
    5
    6
    7
    8
    9
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 object, kita tidak perlu membungkusnya dengan tanda kurung. Contohnya seperti berikut:

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
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 antara dua variabel. Sebelum ES6, untuk melakukan hal ini kita menggunakan cara manual menggunakan algoritma sorting seperti ini:

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
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 menggunakan variabel 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 tanpa membuat variabel tambahan.

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
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 destructuring array, tetapi terdapat variabel yang posisinya tidak dapat terjangkau oleh array, maka variabel tersebut akan bernilai undefined. Contohnya:

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
const favorites = ["Seafood"];
        const [myFood, herFood] = favorites
         
        console.log(myFood);
        console.log(herFood);
         
        /* output:
        Seafood
        undefined
        */

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

 1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
const favorites = ["Seafood"];
         
        const [myFood, herFood = "Salad"] = favorites
         
        console.log(myFood);
        console.log(herFood);
         
        /* output:
        Seafood
        Salad
        */

Sebelumnya : Spread Operator Selanjutnya : Map