Struktur Data

 

Pengenalan Struktur Data

Sebelumnya kita sempat mempelajari tentang variabel dan tipe data yang ada di JavaScript. Tipe data yang kita bahas sebelumnya termasuk dalam kategori tipe data primitif yang hanya bisa menyimpan satu nilai.

Pada modul ini kita akan membahas tentang tipe data JavaScript yang dapat menyimpan struktur data yang lebih kompleks. Beberapa jenis struktur data yang akan kita pelajari, antara lain:

• Object
• Array
• Map
• Set

Sudah siap? Mari kita lanjut ke materi selanjutnya!

Object

Kali ini kita akan berkenalan dengan tipe data object. Sebuah tipe data yang sangat berguna dalam pengembangan aplikasi dengan JavaScript. Object mampu menyimpan nilai dari beragam tipe data dan membentuk data yang lebih kompleks.

Untuk menetapkan objek pada sebuah variabel kita gunakan tanda kurung kurawal {}.

const user = {};

Object berisi pasangan key dan value yang juga dikenal dengan property. Key berperan mirip seperti nama variabel yang menyimpan sebuah nilai. Sementara, value berisi nilai dengan tipe data apa pun termasuk objek lain. Key dan value di dalam object dituliskan seperti berikut:

let object = {key1: "value1", key2: "value2", key3: "value3"}

Key harus berupa string dan dituliskan sebelum titik dua (:), lalu diikuti dengan value-nya. Meskipun key merupakan string, kita tidak perlu menuliskan tanda petik kecuali ada karakter khusus seperti spasi.

Tanda koma di akhir properti bersifat opsional. Namun, jika tanda koma tersebut ditulis akan lebih memudahkan ketika kita ingin memindah, mengubah, atau menghapus properti.

Satu object dapat memiliki beberapa pasang key-value yang dipisahkan dengan tanda koma (,).

const user = {firstName: "Luke", lastName: "Skywalker", age: 19, isJedi: true};

Dalam menuliskan objek, baris baru tidaklah penting dan tidak akan berpengaruh apa pun. Sehingga lebih baik setiap kita menetapkan key-value buatlah baris baru untuk memisahkan antar nilainya. Hal ini akan memudahkan kita dalam membaca dan memahami struktur data dari sebuah object.

const user = {
    firstName: "Luke",
    lastName: "Skywalker",
    age: 19,
    isJedi: true,
};

Kemudian untuk mengakses nilai dari properti object, kita dapat memanggil nama object lalu tanda titik dan diikuti nama propertinya. Contoh:

• main.js

1

const user = {

2

    firstName: "Luke",

3

    lastName: "Skywalker",

4

    age: 19,

5

    isJedi: true,

6

};

7

​

8

console.log(`Halo, nama saya ${user.firstName} ${user.lastName}`);

9

console.log(`Umur saya ${user.age} tahun`);

10

​

11

/* output

12

Halo, nama saya Luke Skywalker

13

Umur saya 19 tahun

14

*/

 

Selain dot operator, kita juga bisa mengakses properti dari object menggunakan bracket atau tanda kurung siku.

user[“home world”];

Untuk mengakses key yang memiliki spasi atau karakter khusus lainnya maka kita perlu menggunakan bracket seperti di atas.

• main.js

1

const user = {

2

    firstName: "Luke",

3

    lastName: "Skywalker",

4

    age: 19,

5

    isJedi: true,

6

    "home world": "Tattooine"

7

};

8

console.log(`Halo, nama saya ${user.firstName} ${user.lastName}`);

9

console.log(`Umur saya ${user.age} tahun`);

10

console.log(`Saya berasal dari ${user["home world"]}`);

11

/* output

12

Halo, nama saya Luke Skywalker

13

Umur saya 19 tahun

14

Saya berasal dari Tattooine

15

*/

 

Setelah mempelajari bagaimana membuat object dan menampilkan property di dalamnya, selanjutnya kita akan memodifikasi sebuah object. Untuk mengubah nilai properti di dalam object kita gunakan assignment operator (=).

• main.js

1

const spaceship = {

2

    name: "Millenium Falcon",

3

    manufacturer: "Corellian Engineering Corporation",

4

    maxSpeed: 1200,

5

    color: "Light gray"

6

};

7

​

8

spaceship.color = "Glossy red";

9

spaceship["maxSpeed"] = 1300;

10

console.log(spaceship);

11

​

12

/* output

13

{

14

  name: 'Millenium Falcon',

15

  manufacturer: 'Corellian Engineering Corporation',

16

  maxSpeed: 1300,

17

  color: 'Glossy red'

18

}

 

Tunggu dulu. Object spaceship dideklarasikan sebagai const, tetapi kenapa kita bisa mengubah nilainya?

Yang perlu diperhatikan adalah mengubah nilai berbeda dengan menginisialisasi ulang nilai. Ketika membuat sebuah object, kita tidak terikat dengan properti di dalamnya sehingga kita masih bisa memodifikasi nilainya. Berbeda jika kita menginisialisasi ulang variabel dari object.

const spaceship = {
    name: "Millenium Falcon",
    manufacturer: "Corellian Engineering Corporation",
    maxSpeed: 1200,
    color: "Light gray"
};
 
spaceship = { name: "New Millenium Falcon" }; // Error

Ketika kita mengubah object menggunakan assignment operator dan property/key-nya sudah ada, maka nilai di dalamnya akan tergantikan dengan nilai yang baru. Sedangkan, jika property dengan nama key yang ditentukan tidak ditemukan, maka property baru akan ditambahkan ke object.

• main.js

1

const spaceship = {

2

    name: "Millenium Falcon",

3

    manufacturer: "Corellian Engineering Corporation",

4

    maxSpeed: 1200,

5

    color: "Light gray"

6

};

7

​

8

spaceship.color = "Glossy red";

9

spaceship["maxSpeed"] = 1300;

10

spaceship.class = "Light freighter";

11

​

12

console.log(spaceship);

13

​

14

/* output

15

{

16

  name: 'Millenium Falcon',

17

  manufacturer: 'Corellian Engineering Corporation',

18

  maxSpeed: 1300,

19

  color: 'Glossy red',

20

  class: 'Light freighter'

21

}

22

*/

 

Kita juga dapat menghapus property pada object menggunakan keyword delete seperti berikut:

• main.js

1

const spaceship = {

2

    name: "Millenium Falcon",

3

    manufacturer: "Corellian Engineering Corporation",

4

    maxSpeed: 1200,

5

    color: "Light gray"

6

};

7

​

8

spaceship.color = "Glossy red";

9

spaceship["maxSpeed"] = 1300;

10

​

11

delete spaceship.manufacturer;

12

​

13

console.log(spaceship);

14

​

15

/* output

16

{ name: 'Millenium Falcon', maxSpeed: 1300, color: 'Glossy red' }

17

 */

Array

Array merupakan tipe data yang dapat mengelompokkan lebih dari satu nilai dan menempatkannya dalam satu variabel. Contoh:

• main.js

1

let myArray = ["Cokelat", 42.5, 22, true, "Programming"];

2

console.log(myArray);

3

​

4

/* output:

5

[ 'Cokelat', 42.5, 22, true, 'Programming' ]

6

*/

 

Perbedaan array dengan object adalah data pada array disusun secara berurutan dan diakses menggunakan index. Untuk mengakses nilai di dalam array, kita gunakan tanda kurung siku [] yang di dalamnya berisi angka yang merupakan posisi nilai yang ingin diakses.

console.log(myArray[1]);

Jika Anda mengira bahwa konsol akan menampilkan teks ‘Cokelat’, maka tebakan Anda kurang tepat. Dalam sebuah array, indeks dimulai dari 0, sehingga ketika kita mengakses data pada myArray yang berada pada indeks ke-1 artinya data tersebut merupakan data pada posisi ke-2. Jadi nilai yang akan ditampilkan pada konsol adalah 42.5.

• main.js

1

let myArray = ["Coklat", 42.5, 22, true, "Programming"];

2

console.log(myArray[1]);

3

​

4

/* output:

5

42.5

6

*/

 

Lalu, apa yang akan terjadi jika kita berusaha mengakses index di luar ukuran array-nya? Jika kita mengakses nilai array lebih dari index-nya, maka hasilnya akan undefined. Index terakhir array selalu jumlah nilai array - 1.

• main.js

1

let myArray = ["Coklat", 42.5, 22, true, "Programming"];

2

console.log(myArray[0]);

3

console.log(myArray[1]);

4

console.log(myArray[2]);

5

console.log(myArray[3]);

6

console.log(myArray[4]);

7

console.log(myArray[5]);

8

console.log("Panjang nilai myArray adalah " + myArray.length + ".");

9

​

10

/* output:

11

Coklat

12

42.5

13

22

14

true

15

Programming

16

undefined

17

Panjang nilai myArray adalah 5.

18

*/

 

Sejauh ini kita baru belajar menginisialisasi dan mengakses elemen dari sebuah array. Pastinya Anda bertanya, “Bagaimana kita memanipulasi data pada array tersebut?” 

Nah, untuk menambahkan data ke dalam array, kita bisa menggunakan metode push(). Fungsi push ini akan menambahkan data di akhir array.

• main.js

1

const myArray = ["Coklat", 42.5, 22, true, "Programming"];

2

​

3

myArray.push('JavaScript');

4

console.log(myArray);

5

​

6

/* output

7

[ 'Coklat', 42.5, 22, true, 'Programming', 'JavaScript' ]

8

 */

 

Sedangkan untuk mengeluarkan data atau elemen terakhir dari array, kita bisa gunakan metode pop().

• main.js

1

const myArray = ["Orange", 42.5, 22, true, "Programming"];

2

​

3

myArray.pop();

4

console.log(myArray);

5

​

6

/* output

7

[ Orange, 42.5, 22, true ]

8

*/

 

Metode lain yang bisa kita gunakan untuk memanipulasi data pada array adalah shift() dan unshift(). Metode shift() digunakan untuk mengeluarkan elemen pertama dari array, sementara unshift() digunakan untuk menambahkan elemen di awal array.

• main.js

1

const myArray = ["Cokelat", 42.5, 22, true, "Programming"];

2

​

3

myArray.shift();

4

myArray.unshift("Apple");

5

​

6

console.log(myArray);

7

​

8

/* output

9

[ 'Apple', 42.5, 22, true, 'Programming' ]

10

*/

 

Lalu bagaimana jika kita ingin menghapus data dari array? Sama seperti object, kita bisa menggunakan keyword delete.

• main.js

1

const myArray = ["Cokelat", 42.5, 22, true, "Programming"];

2

​

3

delete myArray[1];

4

console.log(myArray);

5

​

6

/* output

7

[ 'Apple', <1 empty item>, 22, true, 'Programming' ]

8

*/

 

Namun, perhatikan di sini bahwa keyword delete hanya menghapus data pada index yang ditentukan lalu membiarkan posisi tersebut kosong. Untuk menghapus elemen, gunakan metode splice() seperti ini:

• main.js

1

const myArray = ["Cokelat", 42.5, 22, true, "Programming"];

2

​

3

myArray.splice(2, 1);   // Menhapus dari index 2 sebanyak 1 elemen

4

console.log(myArray);

5

​

6

/* output

7

[ 'Cokelat', 42.5, true, 'Programming' ]

8

*/

Spread Operator

Masih terkait dengan array, ES6 memiliki fitur menarik untuk membantu pengelolaan array menjadi lebih mudah, yaitu spread operator.

Sesuai namanya “spread”, fitur ini digunakan untuk menyebarkan nilai array atau lebih tepatnya iterable object menjadi beberapa elemen. Spread operator dituliskan dengan tiga titik (...). Mari kita lihat contoh kode berikut:

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

Pada kode tersebut hasil yang dicetak adalah sebuah array (ditunjukkan dengan tanda [ ]), karena memang kita mencetak nilai favorites itu sendiri. Nah, dengan menggunakan spread operator kita dapat menyebarkan nilai-nilai dalam array tersebut.

• main.js

1

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

2

​

3

console.log(...favorites);

4

​

5

/* output

6

Seafood Salad Nugget Soup

7

*/

 

Terlihat perbedaannya? Mengapa bisa demikian? Spread operator bekerja seperti meleburkan nilai array menjadi beberapa elemen sesuai panjang nilai array-nya. Sehingga jika kita menuliskan kode seperti ini:

console.log(...favorites);

Sama seperti kita menuliskan kode seperti ini:

console.log(favorites[0], favorites[1], favorites[2], favorites[3]);

Spread operator dapat digunakan untuk menggabungkan dua buah array ke dalam array baru. Jika tidak menggunakan spread operator ini maka hasilnya akan seperti ini:

• main.js

1

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

2

const others = ["Cake", "Pie", "Donut"];

3

​

4

const allFavorites = [favorites, others];

5

​

6

console.log(allFavorites);

7

​

8

/* output

9

[

10

  [ 'Seafood', 'Salad', 'Nugget', 'Soup' ],

11

  [ 'Cake', 'Pie', 'Donut' ]

12

]

13

*/

 

Nilai array tidak akan tergabung. Alih-alih menggabungkan nilainya, variabel allFavorites menjadi array baru yang menampung dua array di dalamnya. Nah, lantas bagaimana jika kita mencoba menggunakan spread operator?

• main.js

1

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

2

const others = ["Cake", "Pie", "Donut"];

3

​

4

const allFavorites = [...favorites, ...others];

5

​

6

console.log(allFavorites);

7

​

8

/* output

9

[ 'Seafood', 'Salad', 'Nugget', 'Soup', 'Cake', 'Pie', 'Donut' ]

10

*/

 

Yup, dengan menggunakan spread operator nilai dua array tersebut berhasil tergabung.

Selain array, spread operator juga bisa digunakan untuk object literals. Hal ini memungkinkan kita dapat menggabungkan beberapa object dengan kode yang lebih ringkas.

• main.js

1

const obj1 = { firstName: 'Obi-Wan', age: 30 };

2

const obj2 = { lastName: 'Kenobi', gender: 'M' };

3

​

4

const newObj = { ...obj1, ...obj2 };

5

​

6

console.log(newObj);

7

​

8

/* output

9

{ firstName: 'Obi-Wan', age: 30, lastName: 'Kenobi', gender: 'M' }

10

*/

Destructuring Object & Array

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.

[
    {
        "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:

• Array
• Object

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
*/

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.

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

const {firstName, lastName, age} = profile;

8

9

console.log(firstName, lastName, age);

10

11

/* output:

12

John Doe 18

13

*/

 

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:

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.

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

let firstName = "Dimas";

8

let age = 20;

9

10

// menginisialisasi nilai baru melalui object destruction

11

({firstName, age} = profile);

12

13

console.log(firstName);

14

console.log(age);

15

16

/* output:

17

John

18

18

19

*/

 

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.

// 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.

({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:

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

8

const {firstName, age, isMale} = profile;

9

10

console.log(firstName)

11

console.log(age)

12

console.log(isMale)

13

14

/* output:

15

John

16

18

17

undefined

18

*/

 

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:

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

8

const {firstName, age, isMale = false} = profile;

9

10

console.log(firstName)

11

console.log(age)

12

console.log(isMale)

13

14

/* output:

15

John

16

18

17

false

18

*/

 

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:

• main.js

1

const profile = {

2

    firstName: "John",

3

    lastName: "Doe",

4

    age: 18

5

}

6

7

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

8

9

console.log(localFirstName);

10

console.log(localLastName);

11

console.log(localAge);

12

13

14

/* output:

15

John

16

Doe

17

18

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:

• main.js

1

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

2

3

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

4

5

console.log(firstFood);

6

console.log(secondFood);

7

console.log(thirdFood);

8

console.log(fourthFood);

9

10

/* output:

11

Seafood

12

Salad

13

Nugget

14

Soup

15

*/

 

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.

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:

• main.js

1

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

2

3

const [, , thirdFood ] = favorites;

4

5

console.log(thirdFood);

6

7

/* output:

8

Nugget

9

*/

 

Destructuring Assignment

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

• main.js

1

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

2

3

let myFood = "Ice Cream";

4

let herFood = "Noodles";

5

6

[myFood, herFood] = favorites;

7

8

console.log(myFood);

9

console.log(herFood);

10

11

/* output:

12

Seafood

13

Salad

14

*/

 

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:

• main.js

1

var a = 1;

2

var b = 2;

3

var temp;

4

5

console.log("Sebelum swap");

6

console.log("Nilai a: " + a);

7

console.log("Nilai b: " + b);

8

9

temp = a;

10

a = b;

11

b = temp;

12

13

console.log("Setelah swap");

14

console.log("Nilai a: " + a);

15

console.log("Nilai b: " + b);

16

17

/* output

18

Sebelum swap

 

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.

• main.js

1

let a = 1;

2

let b= 2;

3

4

console.log("Sebelum swap");

5

console.log("Nilai a: " + a);

6

console.log("Nilai b: " + b);

7

8

[a, b] = [b, a]

9

10

console.log("Setelah swap");

11

console.log("Nilai a: " + a);

12

console.log("Nilai b: " + b);

13

14

/* output

15

Sebelum swap

16

Nilai a: 1

17

Nilai b: 2

18

Setelah swap

 

Default Values

Ketika melakukan destructuring array, tetapi 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
*/

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.

• main.js

1

const favorites = ["Seafood"];

2

3

const [myFood, herFood = "Salad"] = favorites

4

5

console.log(myFood);

6

console.log(herFood);

7

8

/* output:

9

Seafood

10

Salad

11

*/

Map

Map adalah tipe data yang menyimpan koleksi data dengan format key-value layaknya Object. Yang membedakan adalah Map memperbolehkan key dengan tipe data apa pun, dibandingkan Object yang hanya mengizinkan key bertipe String atau Symbol.

Untuk mendefinisikan Map gunakan constructor seperti di bawah ini:

const myMap = new Map();

Apabila ingin menetapkan nilai dari Map secara langsung, gunakan array multi dimensi seperti ini:

• main.js

1

const myMap = new Map([

2

    ['1', 'a String key'],

3

    [1, 'a number key'],

4

    [true, true]

5

]);

6

​

7

console.log(myMap);

8

​

9

/* output

10

Map(3) { '1' => 'a String key', 1 => 'a number key', true => true }

11

*/

 

Array pertama (luar) menyimpan masing-masing elemen atau pasangan key-value dari Map. Kemudian array di dalamnya memiliki dua elemen, di mana elemen pertama adalah key dan array keduanya merupakan value.

Ketika sudah membuat objek Map, kita bisa mendapatkan nilainya berdasarkan key tertentu dengan metode get(). Lalu, untuk menambahkan pasangan key-value baru gunakan metode set().

• main.js

1

const capital = new Map([

2

    ["Jakarta", "Indonesia"],

3

    ["London", "England"],

4

    ["Tokyo", "Japan"]

5

]);

6

​

7

console.log(capital.size);

8

console.log(capital.get("London"));

9

capital.set("New Delhi", "India");

10

console.log(capital.size);

11

console.log(capital.get("New Delhi"));

12

​

13

/* output

14

3

15

England

16

4

17

India

18

 */

 

Note:
Meskipun kita bisa menetapkan dan mendapatkan data pada map seperti ini:

const wrongMap = new Map();
 
wrongMap["My Key"] = "My Value";
console.log(wrongMap["My Key"]);

Namun, kode di atas bukanlah cara yang sesuai untuk mengoperasikan Map. Ketika kita menetapkan nilai map seperti di atas, data akan disimpan sebagai generic object. Ini akan mengakibatkan data tidak tersimpan dalam Map query dan tidak bisa menggunakan fitur dari Map seperti .has atau .delete.

• main.js

1

const wrongMap = new Map();

2

wrongMap["My Key"] = "My Value";

3

​

4

console.log(wrongMap.has("My Key"));

5

console.log(wrongMap.delete("My Key"));

6

​

7

/* output

8

false

9

false

10

 */

 

Jadi, pastikan untuk menggunakan metode .set() dan .get() untuk Map.

Set

Struktur data yang akan kita bahas berikutnya adalah Set. Set sederhananya merupakan kumpulan nilai (set of values). Hal yang membedakan Set dengan struktur data yang lain adalah data pada Set tidak berurutan dan juga tidak diindeks. Selain itu, data di dalam Set juga bersifat unik dan tidak ada duplikasi. Perhatikan contoh deklarasi Set di bawah ini:

• main.js

1

const numberSet = new Set([1, 4, 6, 4, 1]);

2

​

3

console.log(numberSet);

4

​

5

/* output

6

Set(3) { 1, 4, 6 }

7

*/

 

Pada kode di atas terdapat beberapa angka yang duplikat, yaitu angka 1 dan 4. Secara otomatis Set akan membuang angka yang sama, sehingga nilai yang tersimpan adalah {1, 4, 6}.

Untuk menambahkan data ke dalam Set kita bisa memanfaatkan fungsi add().

• main.js

1

const numberSet = new Set([1, 4, 6, 4, 1]);

2

numberSet.add(5);

3

numberSet.add(10);

4

numberSet.add(6);

5

​

6

console.log(numberSet);

7

​

8

/* output

9

Set(5) { 1, 4, 6, 5, 10 }

10

*/

 

Fungsi add() hanya menerima satu argumen. Jika Anda memasukkan array, maka array tersebut akan dianggap sebagai satu elemen sendiri. Nilai yang duplikat akan diabaikan.

• main.js

1

const numberSet = new Set([1, 4, 6, 4, 1]);

2

numberSet.add(5);

3

numberSet.add(10);

4

numberSet.add(6);

5

​

6

numberSet.delete(4);

7

​

8

console.log(numberSet);

9

​

10

/* output

11

Set(4) { 1, 6, 5, 10 }

12

*/

 

Ingat bahwa Set tidak memiliki urutan atau index, sehingga argumen yang dimasukkan ke dalam fungsi delete adalah nilai yang ingin dihapus, bukan index-nya.

WeakMap & WeakSet

WeakMap merupakan varian dari Map yang mendukung garbage collection. Garbage collection adalah proses di mana interpreter JavaScript mengambil kembali memori yang tidak lagi “dapat dijangkau” dan tidak dapat digunakan oleh program [3]. Garbage collection di JavaScript dilakukan secara otomatis dan bukan menjadi urusan dari developer.

Yang dimaksud weak dalam WeakMap adalah referensi terhadap nilai yang disimpan. Apabila suatu nilai yang disimpan di WeakMap sudah tidak terjangkau atau tidak bisa lagi diakses, maka referensi ke memorinya akan dihapus.

Berikut ini adalah beberapa hal yang membedakan antara Map dan WeakMap:

• Key dari WeakMap harus berupa object atau array. Nilai primitif tidak bisa digunakan sebagai key karena tidak mendukung garbage collection.
• WeakMap memiliki methodget(), set(), has(), dan delete(). Namun, WeakMap tidak termasuk kategori iterable sehingga tidak memiliki method keys(), values(), atau forEach().
• WeakMap juga tidak memiliki property size. Ini karena ukuran WeakMap dapat berubah karena proses garbage collection.

Masih bingung? Mari kita lihat contoh kode dan perbedaan antara Map dan WeakMap.

let visitsCountMap = new Map(); // Menyimpan daftar user
 
function countUser(user) {
    let count = visitsCountMap.get(user) || 0;
    visitsCountMap.set(user, count + 1);
}
 
let jonas = { name: "Jonas" };
countUser(jonas);                // Menambahkan user "Jonas"
 
jonas = null;                    // Data object "Jonas" dihapus
 
console.log(visitsCountMap);
 
/* output
Map(1) { { name: 'Jonas' } => 1 }
*/

Ketika reference objek jonas dihapus dengan mengubahnya menjadi null, seharusnya map tidak lagi menyimpan data user (garbage collected). Namun, kenyataannya data jonas masih tersedia di dalam Map. Artinya, data jonas masih tersimpan di dalam memori sampai kita benar-benar menghapusnya.

Berbeda jika kita menggunakan WeakMap seperti inI:

let visitsCountMap = new WeakMap();

Ketika nilai jonas sudah tidak bisa dijangkau, object jonas akan dihapus dari memori termasuk informasi yang disimpan di dalam WeakMap.

• main.js

1

let visitsCountMap = new WeakMap(); // Menyimpan daftar user

2

​

3

function countUser(user) {

4

    let count = visitsCountMap.get(user) || 0;

5

    visitsCountMap.set(user, count + 1);

6

}

7

​

8

let jonas = { name: "Jonas" };

9

countUser(jonas);                // Menambahkan user "Jonas"

10

​

11

jonas = null;                    // Data object "Jonas" dihapus

12

​

13

console.log(visitsCountMap);

14

​

15

/* output

16

WeakMap { <items unknown> }

17

*/

 

Seperti halnya WeakMap, WeakSet adalah versi weak reference dari Set. Perbedaan antara WeakSet dan Set antara lain:

• WeakSet tidak bisa menyimpan nilai primitif.
• WeakSet bukan iterable dan hanya memiliki method add(), has(), dan delete().
• WeakSet tidak memiliki properti size.

Rangkuman Materi

Untuk menyelesaikan masalah yang lebih kompleks secara efisien, kita membutuhkan struktur data yang lebih canggih dibandingkan variabel primitif. JavaScript memiliki tipe data lain yang dapat menyimpan banyak data sekaligus, contohnya seperti Object, Arrays, Map, dan Set.

Beberapa hal yang telah kita bahas pada modul ini, antara lain:

• Object adalah tipe data kompleks untuk menyimpan banyak data dengan format key-value. Key pada object harus berupa string.
• Array digunakan untuk menyimpan banyak data. Data pada array disusun secara berurutan dan diakses menggunakan index.
• Map menyimpan banyak data dengan format key-value seperti object. Namun, key pada Map dapat bertipe apa pun.
• Set digunakan untuk menyimpan banyak data secara unik, tidak ada duplikasi, tidak berurutan, dan tidak diindeks.

Materi Pendukung

Berikut ini adalah beberapa sumber materi tambahan yang bisa Anda pelajari:

• Object
• Array
• Map
• Set
• WeakMap and WeakSet
• Garbage collection

Ref :[1]