Mengenal Javascript Map dan Set

Kali ini saya akan membahas sedikit mengenai objek yang sepertinya jarang diketahui dan dipakai oleh orang-orang pada Javascript, namanya Map dan Set.

Map mirip seperti Object biasa, berfungsi untuk menyimpan collection dengan key, bedanya, key pada map ini bisa berupa tipe data yang lebih beragam, seperti primitif (angka, string, boolean), object, atau bahkan NaN.

let map = new Map();

map.set("1", "str1");
map.set(1, "num1");
map.set(true, "bool1");

let obj = {name: "Akhdani"};

map.set(obj, "obj1");
map.set(NaN, "nan1");

console.log( map.get(1)   ); // 'num1'
console.log( map.get('1') ); // 'str1'
console.log( map.get(true)); // 'bool1'
console.log( map.get(obj) ); // 'obj1'
console.log( map.get(NaN) ); // 'nan1'


console.log( map.size ); // 5

console.log( map ); // Map(5) {"1" => "str1", 1 => "num1", true => "bool1", {…} => "obj1", NaN => "nan1"}

Bisa kita lihat, Map bisa menerima apa saja sebagai keynya. Cukup ajaib menurut saya. :D

Fitur tambahannya adalah:

  • Urutan dipertahankan sesuai urutan melakukan entry.
  • Tipe data tidak diubah, sehingga key berupa string “1” dan key integer 1 tetap ada keduanya.

Bagaimana jika ingin iterasi entry Map? Ada tiga cara:

  • map.keys() untuk iterasi key
  • map.values() untuk iterasi value
  • map.entries() untuk iterasi entry, berupa key dan valuenya
for (let k of map.keys()) {
  console.log(k);
}

for (let v of map.values()) {
  console.log(v);
}

for (let entry of map) {
  console.log(entry); 
}

 

Set bisa dibilang mirip array, hanya saja tidak bisa duplikat elemen.

let set = new Set();

let akhdani = { name: "Akhdani" };
let reka = { name: "Reka" };
let solusi = { name: "Solusi" };

set.add(akhdani);
set.add(reka);
set.add(solusi);
set.add(reka);
set.add(solusi);

console.log( set.size ); // 3

for (let user of set) {
  console.log(user.name);
}

Bisa kita lihat di atas meskipun “reka” dan “solusi” di-add dua kali, set tetap hanya berisi 3 elemen. Urutan tentu saja dipertahankan karena lebih mirip seperti array.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>