Pada video-video sebelumnya kita telah mempelajari mengenai struktur data Array, dan dilanjutkan dengan struktur data Object. Sekarang kita melanjutkan lagi ke struktur data berikutnya, yaitu Map.

Apakah itu Map? Nah, map ini bisa dikatakan mirip dengan Object, karena sama-sama menyimpan data dalam bentuk “Key-Value Pair”. Artinya untuk setiap nilai yang hendak kita simpan di dalam map, harus memiliki kata kunci untuk mengakses nilai tersebut. Sebagai contoh, misalkan kita hendak menggunakan Map untuk menyimpan data seseorang. Kita harus menggunakan kata kunci untuk setiap nilai yang hendak kita simpan. Sebagai contoh, kata kunci nama untuk nilai “Andi”, kata kunci umur untuk nilai 18, kata kunci tinggi badan untuk nilai 165, dan seterusnya.

Benar-benar mirip dengan object ya. Kalau begitu kita masuk ke pertanyaan berikutnya, mengapa harus menggunakan Map? Mengapa tidak menggunakan Object saja karena cara menyimpan datanya sama? Nah, untuk menjawab pertanyaan ini, kita harus mengerti dahulu nih apa saja kelebihan dan kekurangan map, dan apa saja kelebihan dan kekurangan object.

Yang pertama yang perlu kita ingat adalah Map ini hanyalah struktur data, jadi hanya bisa kita gunakan untuk menyimpan data saja. Sedangkan pada object, kita mengenal encapsulation dimana kita bisa mengelompokkan data dengan sekumpulan method untuk mengolah data tersebut menjadi satu object.

Kalau dilihat dari sisi pengelolaan datanya, ternyata Map lebih optimal dalam menggunakan memory. Dengan jumlah memory yang sama, Map bisa menyimpan kurang lebih 50% lebih banyak data dibandingkan dengan Object. Kemudian Map juga lebih cepat dalam proses menambah dan mengurangi data. Namun kalau dilihat dari proses pengambilan data, ternyata Object lebih cepat.

Dari kelebihan dan kekurangan ini, kita bisa menentukan ya, kapan kita harus menggunakan Map dan kapan kita harus menggunakan Object. Apabila kita hendak mengolah data dalam jumlah banyak, dan memerlukan banyak operasi untuk menambah dan mengurangi data, maka lebih baik menggunakan Map. Namun apabila jumlah datanya hanya sedikit, jarang berubah, dan kita ingin sekalian menambahkan methods untuk mengelola data tersebut, maka kita bisa menggunakan Object.

Dan ini adalah method dan property yang dimiliki oleh Map. Kalau kita bandingkan dengan Array, jumlah tidak banyak ya. Dan gampang untuk dipelajari. Kita bisa meng-cover seluruh materi Map hanya dalam satu video ini.

Untuk menambah dan mengubah data, kita bisa menggunakan method set(). Lalu untuk mengecek apakah Map sudah menyimpan data dengan kata kunci tertentu, kita bisa menggunakan method has(). Untuk mengambil data yang disimpan, kita menggunakan method get. Sedangkan untuk menghapus data, terdapat 2 buah method yaitu delete() untuk menghapus data dengan kata kunci tertentu, dan clear() untuk menghapus seluruh data. Map juga memiliki method forEach() yang fungsinya sama seperti Array. Dan yang terakhir, Map memiliki property size untuk menunjukkan jumlah data yang tersimpan di dalam Map. Kalau dibandingkan dengan Array, property ini sama dengan length.

Kita langsung praktek coding di console. Pertama kita buat dahulu object Map untuk menyimpan data seseorang, yaitu data nama, umur, berat badan dan tinggi badannya. Kita buat dahulu variable person dengan perintah

let person = new Map();

Kalau kita lihat kembali variable person isinya adalah object Map yang masih belum memiliki data sama sekali ya. Disini bisa kita lihat size-nya bernilai 0. Kalau kita ingin mengakses nilai dari property size, kita bisa mengetikkan perintah

person.size;

Berhubung kita belum menyimpan data apa pun di dalam person, maka kita bisa cek dahulu ya, apakah person sudah memiliki data dengan kunci “name”, kita gunakan method has

person.has(“name”);

Jawabannya adalah false. Belum ada data name. Dan kalau kita mencoba untuk mengambil data name dari variable person, kita bisa gunakan method “get”.

person.get(“name”);

Nah, perhatikan ya. Kalau person belum memiliki nilai dengan kunci “name”, script tidak menghasilkan error, melainkan mengembalikan nilai undefined.

Sekarang kita tambahkan nilai “Andi” dengan kunci “name” ke dalam person. Kita bisa gunakan method set.

person.set("name", "Andi");

Perhatikan bahwa argument pertama adalah kuncinya, sedangkan argument kedua adalah nilai yang hendak disimpan. Sekarang person sudah menyimpan satu buah nilai. Kita periksa lagi size dari person.

person.size;

Nilainya adalah satu. Sekarang kita coba apakah person sudah menyimpan data dengan kunci “name”?

person.has(“name”);

Jawabannya adalah benar. Kemudian kita coba ambil nilai yang disimpan dengan kunci “name”.

person.get("name");

Dan kita mendapatkan nilainya, yaitu “Andi”.

Perhatikan bahwa untuk mengambil nilai, kita harus menggunakan method get. Kita tidak bisa menggunakan sintaks object seperti person.name atau person[“name”].

Bagaimana kalau kita ingin mengubah nilai “Andi” menjadi “Budi”? Kita bisa memanggil ulang method set seperti barusan, namun mengganti nilai “Andi” menjadi “Budi”

person.set("name", "Budi");

Variable person tetap hanya menyimpan satu data saja, karena kita menggunakan kunci “name” yang sudah pernah disimpan. Map tidak menambahkan data baru, melainkan mengganti nilai yang disimpan menjadi “Budi”. Kalau kita lihat size dari person, nilainya tetap 1.

person.size;

Perhatikan method set mengembalikan object map itu sendiri, sehingga hasilnya bisa kita gunakan lagi untuk memanggil method set. Jadi kita bisa menambahkan nilai umur, tinggi badan dan berat badan langsung dalam satu baris perintah seperti ini:

person.set("age", 18).set("height", 165).set("weight", 60);

Variable person langsung menambahkan tiga data baru, sehingga sekarang ukurannya menjadi 4.

person.size;

Kalau kita ingin menghapus salah satu data dalam person, maka kita bisa menggunakan method delete diikuti oleh kuncinya. Misalkan kita hapus data berat badan:

person.delete("weight");

Method mengembalikan nilai true apabila berhasil menghapus dan mengembalikan nilai false bila gagal menghapus. Nilai yang kita dapatkan adalah true, artinya berhasil dihapus. Kalau kita periksa kembali variable person, sekarang hanya menyimpan 3 data. Dan kalau kita ingin menghapus seluruh data, maka kita bisa memanggil method clear.

person.clear();

Sekarang person menjadi object map kosong, tidak mengandung data dan ukurannya 0.

Kita buka text editor untuk coding Javascript. Pertama kita buat ulangi dahulu proses pembuatan variable person seperti tadi ya.

let person = new Map();

Untuk menambahkan data ke dalam Map, tadi kita sudah belajar dengan cara menggunakan method set. Sekarang kita belajar cara lain, yaitu dengan menggunakan argument pada constructor Map. Disini kita bisa mengisikannya dengan array dua dimensi. Sebagai contoh, pertama kita tambahkan dahulu tanda kurung siku sebagai array dimensi pertama. Kemudian di dalamnya kita tambahkan array yang isinya key value pair. Array pertama adalah “name” koma “Andi”. Kita pisahkan dengan tanda koma, lalu kita buat lagi array kedua “age” koma 18. Lalu kita tambahkan lagi “height” koma 165 dan “weigth” koma 60.

let person = new Map([
  ["name", "Andi"],
  ["age", 18],
  ["height", 165],
  ["weight", 60]
]);

Kita simpan dan jalankan di browser. Kalau kita periksa lagi nilai variable person, sekarang kita langsung mendapatkan Map yang sudah diisi dengan 4 buah data.

Selanjutnya kita coba method pada slide yang masih belum pernah dibahas ya. Kalau teman-teman masih ingat, ada method forEach yang fungsinya sama dengan method forEach pada Array. Di dalamnya kita bisa membuat arrow function, namun perlu diingat ya bahwa parameter pertama adalah value-nya, sedangkan key berada pada parameter kedua. Isi dari arrow function, pertama kita coba dahulu console.log untuk mencetak value.

person.forEach((value, key) =>
  console.log(value)
);

Kita simpan dan lihat hasilnya di layar. Console menampilkan keempat nilai yang disimpan di dalam map person. Kita kembali ke source code dan kita ganti isi arrow function menjadi mencetak key. Sekarang console mencetak keempat kunci.

Sekarang kita ubah lagi ya, menjadi key ditambah dengan tanda titik dua, lalu ditambah lagi dengan value. Dan sekarang console mencetak kunci diikuti dengan nilainya.

person.forEach((value, key) =>
  console.log(key + " : " + value)
);

Selain method yang telah kita pelajari, Map juga memiliki 3 buah method yang mengembalikan Iterator. Yang pertama adalah method keys, yang mengembalikan iterator yang mengandung kunci. Yang kedua adalah values yang mengembalikan iterator yang mengandung nilai. Sedangkan yang terakhir adalah entries, yang mengembalikan iterator yang mengandung kunci dan nilai dalam bentuk Array.

Kita coba dahulu di console ya. Misalkan kita buat variable iterator, yang nilainya diambil dari method person.keys.

let iterator = person.keys();

Kalau kita lihat lagi variable iterator, isinya adalah MapIterator yang berisi 4 buah kunci. Namun untuk mengakses kunci ini, kita tidak bisa menggunakan sintaks array seperti iterator[0]. Kita hanya bisa mengakses nilainya dengan menggunakan method next. Sebagai contoh, kita ketik

iterator.next();

Maka kita mendapatkan object yang berisi 2 buah property. Property pertama adalah value yang berisi kunci. Sedangkan property kedua adalah done yang berisi apakah iterator sudah kehabisan data atau belum. Saat ini nilainya masih false.

Kita panggil lagi method next dan iterator mengembalikan kunci berikutnya. Kita bisa teruskan sampai akhirnya iterator mengembalikan property value yang isinya undefined dan property done yang isinya true. Artinya kita telah melakukan iterasi ke semua nilai yang dikandung oleh iterator.

Sebagai latihan pada video ini, cobalah gunakan iterator untuk menghasilkan output seperti kode yang kita tulis menggunakan method forEach ini. Console menampilkan 4 baris data, yang isinya adalah kunci : nilai. Pause terlebih dahulu video ini dan coba untuk kerjakan di komputer masing-masing.

Kita coba kerjakan soal latihan kita. Pertama kita komentari terlebih dahulu method forEach. Kita akan membuat tampilan data yang sama, namun menggunakan iterator. Pertama kita buat dahulu variable row. Kemudian kita buat lagi variable iterator yang isinya diambil dari person.keys().

let row;
let iterator = person.keys();

Kita buat loop, namun disini kita menggunakan sintaks do while ya. Mengapa? Karena kita perlu menjalankan method iterator.next dahulu barulah kita bisa mengetahui apakah loop sudah selesai atau belum. Di dalam loop, kita gunakan variable row untuk menyimpan hasil iterator.next. Kemudian kita cetak nilai row pada console. Dan sebagai kondisi loop, kita periksa apakah nilai dari row.done == false.

Kita simpan dan jalankan di browser. Kita mendapatkan 5 baris data. Sedangkan isi map kita hanya 4. Perhatikan data kelima adalah undefined. Kita tidak ingin mencetak nilai undefined ini. Maka sebelum kita memanggil console.log, kita harus menggunakan pengkondisian terlebih dahulu untuk memeriksa apakah nilai row.done == false.

Oke ya. Sekarang di console hanya tampil 4 data. Namun masih dalam bentuk object. Kalau kita hanya ingin mengambil nilainya saja, maka yang kita cetak di dalam console.log adalah row.value.

Perhatikan bahwa sekarang kita memanggil iterator dari method keys, maka kita mendapatkan hasil kunci. Kalau kita ganti menjadi method values, maka kita mendapatkan hasil nilai datanya. Sedangkan kalau kita ganti lagi menjadi entries, maka kita mendapatkan kunci dan nilai dalam bentuk array.

Nah, berhubung kunci dan nilai ini dalam bentuk array, artinya kita bisa memanggil array method. Yang berguna dalam latihan ini adalah method join. Kita coba panggil ya. Sekarang datanya ditampilkan dalam format kunci, nilai. Kalau kita ingin mengganti tanda koma menjadi titik dua, maka kita bisa menambahkan argument “ : “ di dalam method join.

Sudah berjalan benar ya. Namun kalau kita lihat lagi, ternyata kode kita jauh lebih rumit dibandingkan dengan menggunakan cara forEach.

Ada cara lain yang lebih gampang untuk menggunakan iterator, yaitu dengan menggunakan sintaks for of. Sebelum melanjutkan, kita komentari dahulu kode latihan kita.

Kita ketik kodenya ya. for. lalu di dalam kurung, kita buat variable row. Diikuti dengan kata kunci of. Lalu method person.keys(). Artinya browser akan melakukan iterasi dari hasil person.keys. Dan setiap datanya disimpan dalam variable row. Di dalam loop, kita panggil console.log untuk mencetak row.

Kita simpan dan jalankan di browser. Perhatikan bahwa row disini bukan object ya. Melainkan langsung kunci yang disimpan dalam map. Kalau misalkan kita ganti method person.keys menjadi person.values. Maka yang tampil adalah nilainya. Sedangkan kalau kita ganti menjadi person.entries, maka yang tampila adalah kunci dan nilai dalam bentuk array.

Dan berhubung row pada saat ini adalah array, maka kita bisa memanggil lagi method join seperti solusi latihan sebelumnya. Sekarang kita sudah berhasil mengerjakan soal latihan dengan menggunakan sintaks baru, yaitu for of.

Kita lihat lagi source code kita ya. Jadi disini kita memiliki 3 bagian kode yang melakukan hal yang sama. Yang pertama menggunakan method forEach. Yang kedua dengan menggunakan do while. Dan yang terakhir dengan menggunakan for of. Hasil dari ketiganya adalah sama. Jadi teman-teman bebas boleh memiliki gaya coding mana yang paling sesuai.

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.