Belajar Javascript Object

Set

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Sekarang kita masuk ke struktur data terakhir yang dibahas di dalam playlist ini, yaitu Set. Dengan menggunakan Set, kita bisa menyimpan banyak nilai unik dari semua tipe data, baik tipe data primitif maupun object.

Kalau kita lihat ke daftar method dan property yang dimiliki oleh Set, lebih mirip ke struktur data Map yang kita pelajari pada video sebelumnya ya. Untuk menambahkan nilai ke dalam Set, kita menggunakan method add(). Kemudian untuk memeriksa apakah Set sudah menyimpan suatu nilai, kita menggunakan method has(). Ada 2 buah method untuk menghapus nilai, yang pertama adalah delete() untuk menghapus nilai tertentu, dan yang kedua adalah clear() untuk menghapus semua nilai. Kemudian ada method forEach untuk menjalankan function untuk setiap data yang tersimpan di dalam Set. Dan Set juga memiliki property size untuk menunjukkan jumlah data yang tersimpan di dalam Set.

Kita langsung coba praktek ya. Kita coba dahulu di console Chome. Misalkan kita membuat variable baru dengan nama students untuk menyimpan nama-nama pelajar. Kita bisa ketik perintahnya

let students = new Set();

Artinya kita telah membuat Set baru, yang masih kosong. Kalau kita lihat kembali isi dari variable students.

students

Maka browser menunjukkan bahwa variable students menggunakan struktur data Set. Saat ini isinya masih 0. Sebenarnya disini kita bisa melihat bahwa size-nya adalah 0. Namun kalau kita ingin mengakses nilai 0 tersebut dengan menggunakan property, maka kita bisa menuliskan kodenya

students.size;

Kita periksa dahulu, apakah students sudah menyimpan nama “Andi”? Kita bisa memanggil method has.

students.has("Andi");

Jawabannya adalah false, karena kita belum menyimpan nama Andi. Untuk menyimpan nama “Andi” ke dalam Set, maka kita bisa menggunakan method add().

students.add("Andi");

Kalau kita lihat isi dari variable students, maka kita bisa melihat bahwa sekarang Set sudah menyimpan 1 buah nilai, yaitu “Andi”. Dan kalau kita periksa kembali apakah variable students telah menyimpan nilai “Andi”, maka kita mendapatkan jawaban true.

Selanjutnya kita tambahkan nilai baru “Budi”.

students.add("Budi");

Kita bisa melihat bahwa students sekarang sudah menyimpan 2 data, yaitu “Andi” dan “Budi”. Property size bernilai 2.

Sebelumnya kita sudah belajar bahwa Set hanya bisa menyimpan nilai unik. Apakah yang terjadi apabila kita menambahkan kembali nilai “Andi” ke dalam Set? Kita coba ya.

students.add("Andi");

Tidak terjadi error, namun variable students tetap hanya mengandung 2 buah nilai, yaitu “Andi” dan “Budi”. Jadi kalau kita mencoba untuk menambahkan nilai yang sudah disimpan di dalam Set, maka nilai tersebut tidak ditambahkan ke dalam Set.

Selanjutnya kita coba untuk menghapus nilai “Andi” dari Set. Kita bisa menggunakan method delete().

students.delete("Andi");

Sekarang Set hanya mengandung 1 data yaitu “Budi”. Kita juga bisa menghapus seluruh data di dalam Set, dengan menggunakan method clear().

students.clear();

Variable students kembali menjadi Set kosong.

Sekarang kita praktek coding menggunakan Text Editor. Disini ada script Javascript yang masih kosong. Kita mulai ketikkan baris pertama coding kita untuk membuat sebuah Set.

let students = new Set();

Kalau kita simpan dan jalankan di browser. Maka kita memiliki variable students yang isinya adalah Set kosong.

Kita bisa menambahkan data pada Set dengan menggunakan method add seperti yang kita pelajari barusan. Namun ada cara yang lebih mudah, yaitu dengan menambahkan argument yang berupa Array di dalam constructor Set. Sebagai contoh, kita ingin langsung menambahkan 4 data ke dalam Set yaitu “Andi”, “Budi”, “Charles” dan “Dewi”. Maka kode kita menjadi:

let students = new Set(["Andi", "Budi", "Charles", "Dewi"]);

Kita simpan dan refresh browser. Sekarang variable students sudah menyimpan 4 buah data ya.

Selanjutnya kita coba method yang masih belum pernah kita coba ya, yaitu forEach. Kita coba panggil methodnya students.forEach. Nah, kalau pada Map kita memerlukan function dengan 2 parameter value dan key. Namun berhubung Set tidak memiliki key, maka disini kita cukup menggunakan satu parameter saja yaitu value. Agar source code kita menjadi ringkas, kita gunakan arrow function saja ya. Untuk isi function-nya kita cukup panggil console.log untuk menampilkan value. Maka kode kita menjadi:

students.forEach(value => console.log(value));

Kita simpan dan jalankan di browser. Sekarang setiap nilai yang tersimpan di dalam variable students langsung ditampilkan di console.

Sama seperti Map, Set juga memiliki 3 buah method yang mengembalikan Iterator, yaitu values(), keys() dan entries(). Namun berhubung Set hanya menyimpan nilai, maka semua yang dikembalikan oleh Iterator ini hanya mengandung nilai saja. Jadi method keys disini tetap mengembalikan nilai, sehingga bisa kita bilang method keys hanyalah alias dari method values. Sedangkan method entries mengembalikan [nilai, nilai] dalam bentuk array.

Kita langsung coba coding ya. Pertama kita komentari dahulu kode forEach. Kita akan menulis ulang kode ini dengan menggunakan Iterator. Nah, kita udah belajar dari video sebelumnya ya, untuk menggunakan Iterator, cara paling mudahnya adalah dengan memakai looping for of. Kita ketik kodenya. Di dalam loop, kita panggil console.log untuk menampilkan data row.

for(let row of students.values())
{
  console.log(row);
}

Kita simpan dan jalankan di browser. Hasilnya sama persis dengan sebelumnya ya. Karena yang disimpan di dalam variable row ini adalah nilai yang disimpan di dalam Set. Kita coba ganti method values menjadi keys dan hasilnya juga tetap sama persis. Kita coba ganti lagi menjadi entries. Nah, barulah hasilnya sedikit berubah ya. Karena sekarang row menyimpan 2 buah nilai dalam bentuk array.

Sekarang kita masuk ke dalam latihan untuk video ini. Pertama kita komentari dahulu semua source code yang sudah kita buat. Kita tambahkan komentar baru ya, yaitu LATIHAN. Baris pertamanya, kita buat variable array1 yang isinya adalah array 1, 1, 2, 2, 3, 3.

let array1 = [1, 1, 2, 2, 3, 3];

Kemudian kita buat lagi komentar, hasilnya yang diharapkan adalah

array2 = [1, 2, 3];

Jadi kita akan membuat array kedua, yang isinya hanyalah nomor-nomor yang unik saja dari array pertama. Teman-teman bisa mengetikkan sendiri source code sederhana ini sebagai latihan. Perhatikan bahwa ada 2 buah syarat untuk mengerjakan latihan. Yang pertama kita tidak boleh mengubah source code array pertama. Dan syarat kedua, kita tidak boleh mengetikkan langsung isi dari array kedua seperti ini. Jadi anggapannya kita tidak tau angka berapa saja yang dikandung oleh array pertama, dan source code yang akan kita tulis adalah algoritma yang bisa berjalan dengan benar walaupun nantinya isi dari array pertama kita ubah. Silahkan pause terlebih dahulu video ini dan kerjakan latihan pada komputer masing-masing.

Kita akan membahas solusi dari soal latihan. Kita bisa mengerjakannya dengan banyak cara ya. Kita bisa menggunakan looping. Atau kita bisa juga menggunakan callback method seperti forEach atau filter. Namun source code yang paling singkat untuk menyelesaikan masalah ini adalah dengan menggunakan Set.

Kita langsung coba dahulu di console ya. Sekarang kita memiliki array1 yang isinya banyak data double. Jadi kita ingin mengambil data yang unik saja. Caranya bagaimana? Cara gampangnya adalah kita melakukan konversi dari struktur data Array menjadi Set. Jadi kita membuat variable baru yang berupa Set. Dan teman-teman tentunya masih ingat ya, tadi kita sudah belajar bahwa constructor Set bisa menerima Array sebagai argument. Kode kita menjadi:

let set = new Set(array1);

Kalau kita cek lagi isi dari variable set, maka kita akan mendapatkan nomor-nomor yang uniknya saja. Namun masalahnya, structur data yang sedang kita gunakan sekarang adalah set. Kita harus mengembalikannya menjadi array. Caranya bagaimana? Kita bisa membuat variable baru array2 yang berbentuk array. Dan kemudian nilainya kita ambil dari set. Disini kita bisa menggunakan operator spread atau tiga buah titik. Kode kita menjadi:

let array2 = [...set];

Kalau kita periksa kembali, array2 hanya berisikan nilai-nilai unik, dan struktur data yang digunakan adalah array. Jadi kita sudah berhasil memecahkan masalah ini.

Kita kembali ke source code. Kita gabungkan dua baris kode yang kita tuliskan di console menjadi satu ya. Pertama kita buat variable array2 yang berbentuk array. Yang isinya adalah spread dari set. Bagaimana cara membuat set-nya? Kita memanggil constructor Set dengan menggunakan array1 sebagai argument. Maka kode kita menjadi:

let array2 = [... new Set(array1)];

Kita simpan dan lihat hasilnya di browser. Kita periksa variable array2 ya. Isinya hanya nomor-nomor unik. Dan struktur data yang digunakan adalah Array. Jadi kita sudah berhasil mengerjakan soal latihan kita.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.