Bakit ang Hashmap?

Alam naman nating lahat na ang ibang programming language ay may tinatawag na Hashtable. Ito ay isang data structure na nag-iimbak ng key-value pairs na napakahusay dahil sa kanilang O(1) constant time lookup. Ito ay isang kapaki-pakinabang na data structure na magagamit natin para mag-imbak ng data. Sa JavaScript, wala tayong built-in na data structure tulad ng Hashtable. Pero magagamit natin ang isang object para mag-imbak ng key-value pairs. Tinawag itong Map sa JavaScript.

Ano ang Map?

Ang Map ay isang koleksyon ng mga elemento kung saan ang bawat elemento ay naka-imbak bilang isang Key, Value pair. Ang mga key at values ng Map ay maaaring maging anumang value (parehong mga object at primitive values). Ang isang Map object ay nag-iiterate sa mga elemento nito sa insertion order — ang isang for...of loop ay nagbabalik ng array ng [key, value] para sa bawat iteration.

Ang isang Map ay nagtataglay ng key-value pairs kung saan ang mga keys ay maaaring anumang datatype. Ang isang Map ay may isang property na kumakatawan sa laki ng Map. Ang isang Map ay naaalala ang orihinal na insertion order ng mga keys.

Mga Paraan at Property ng Map

Paraan	Paglalarawan
new Map()	Gumagawa ng bagong Map object
set()	Nagtatakda ng value para sa isang key sa isang Map
get()	Nagbabalik ng value para sa isang key
has()	Nagbabalik ng boolean na nagpapahiwatig kung ang isang key ay umiiral sa isang Map
delete()	Nag-aalis ng key mula sa isang Map
clear()	Nag-aalis ng lahat ng key mula sa isang Map
values()	Nagbabalik ng isang iterator object ng mga values sa isang Map
keys()	Nagbabalik ng isang iterator object ng mga keys sa isang Map
entries()	Nagbabalik ng isang iterator object ng mga key-value pairs sa isang Map
forEach()	Gumagawa ng isang ibinigay na function isang beses para sa bawat key-value pair sa isang Map

Property	Paglalarawan
size	Nagbabalik ng bilang ng key/value pairs sa isang Map

Halimbawa ng Map

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

console.log(map.get('name')) // John
console.log(map.get('age')) // 30
console.log(map.get('isMarried')) // true
console.log(map.get('address')) // {city: 'New York', state: 'NY'}
console.log(map.get('hobbies')) // ['reading', 'writing', 'coding']

console.log(map.size) // 5

Pag-iiterate sa Map

const map = new Map()
map.set('name', 'John')
map.set('age', 30)
map.set('isMarried', true)
map.set('address', { city: 'New York', state: 'NY' })
map.set('hobbies', ['reading', 'writing', 'coding'])

// I-iterate ang mga keys
for (const key of map.keys()) {
  console.log(key)
}

// I-iterate ang mga values
for (const value of map.values()) {
  console.log(value)
}

// I-iterate ang mga key-value pairs
for (const [key, value] of map.entries()) {
  console.log(key, value)
}

// I-iterate ang mga key-value pairs
map.forEach((value, key) => {
  console.log(key, value)
})

Map vs. Object

Map	Object
Ang Map ay isang koleksyon ng mga keyed data items, tulad ng isang Object. Pero ang pangunahing pagkakaiba ay ang Map ay nagpapahintulot ng mga keys ng anumang uri.	Ang mga Object keys ay dapat na alinman sa string o simbolo.
Ang Map ay iterable at madaling ma-loop over.	Ang Object ay hindi iterable at hindi madaling ma-loop over.
Ang Map ay may built-in na forEach method, kaya hindi na kailangang i-convert ito sa isang array.	Ang Object ay walang built-in na forEach method.
Ang Map ay may size property, kaya madali nating makuha ang bilang ng mga item.	Ang Object ay walang size property.
Ang Map ay maaaring gumamit ng mga object bilang keys.	Ang Object ay hindi maaaring gumamit ng mga object bilang keys.
Ang Map ay mas mabilis kaysa sa Object sa pangkalahatan.	Ang Object ay karaniwang mas mabagal kaysa sa Map.

Konklusyon

Sa artikulong ito, natutunan natin ang tungkol sa Map sa JavaScript. Natutunan natin ang tungkol sa mga paraan at property ng Map. Alam din natin ang tungkol sa pagkakaiba sa pagitan ng Map at Object. Sana ay nasiyahan ka sa artikulong ito. Kung mayroon kang anumang mga katanungan, mangyaring mag-iwan ng komento sa ibaba. Salamat sa pagbabasa.

Orihinal na nai-post sa: https://blog.imam.dev/blog/javascript-hashmap

Mga Sanggunian

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://www.freecodecamp.org/news/what-is-a-javascript-map-what-are-the-differences-between-map-and-object-in-javascript/

https://www.geeksforgeeks.org/map-vs-object-javascript/