Javascript key-value store: understand some cool built-in Objects

In this article, I'll show you how to handle Javascript "key-value" data type with its special "Array".

Can you use "Array" as a "key-value" store?

Technically, No...

An Array is used for storing ordered list of data. This means that the key to each of its value is actually a number(string number).

let arr = [0, 1, 2]

arr[0] // 0
arr[1] // 1
arr['2'] // 2
arr[2] === arr['2'] // true

As we all know, Array is also an Object in Javascript. Even though assigning a new property to an Array made it work. The methods within Array is not going work in the way you expected.

let arr = []

arr.article = 'Javascript key-value store: is this unique among all programming languages?'
arr.url = 'https://pitayan.com/posts/javascript-key-value-array/'

// Now there should be an record in the arr but...
arr[0] // undefined
arr.length // 0

// aritcle is one property other than a record
arr['article'] // Javascript key-value store: is this unique among all programming languages?
arr['url'] // https://pitayan.com/posts/javascript-key-value-array/

"Object" is all you want

There's no key value array in Javascript. Basically what you want with Javascript on storing the "key-value" is a data structure called hashmap. But Javascript doesn't have hashmap itself. It uses a different data type Object which has the almost similar ability of a hashmap.

When you open up a console in Chrome browser and declare an Object, you'll get the following result: A variable defind by a pair of lovely curly brackets.

Of course you could assign some properties (key-value) in it. It's very simple. Just define the key and the value, you'll have your data store in a few seconds.

// Define the key-value directly in Object
let obj = {
  url: 'https://pitayan.com/posts/javascript-key-value-array/'
}

// Additionally assign the value to a new key
obj.article: 'Javascript key-value store: is this unique among all programming languages?'

Object is quite a common and frequently used built-in Object. In order to meet some functionality demands, you may need some other built-in Objects like Map and Set (WeakMap WeakSet). They are used for data recombiniation and storage. Let's take a look.

Other "key-value" store Objects in Javascript

Other than just using Object as a key-value store, you could also utilize the following Javascript standard built-in Objects.

• Map:
  • a key-value pair collection
  • iterable
• WeakMap:
  • a reverted Map that stores key-value pairs but the "key" is the Object
  • All entries are Objects
  • Entries are weak references and retrievable by GC. No memory leak.
  • non-iterable
• Set:
  • Unique, unordered
  • Key equals value. Or there's only value but no key
  • Iterable
• WeakSet:
  • All entries are Objects
  • Entries are weak references and retrievable by GC. Key can be any type.
  • non-iterable

Map

Here are the methods/properties for manipulating the entries of a Map

• set(key, value): add a new element to the collection
• get(key, value): get an element from the collection
• size: the amount of the included elements
• delete(key): remove an element from the collection
• has(key): check if an element exists
• keys(): get all keys
• values(): get all values, same to keys()
• entries(): get all iterators of all key-value pairs
• forEach(): loop through all elements
• clear(): remove all elements from collection

let map = new Map()

map.set(1, 1) // Map { 1 }
map.set(2, 2) // Map { 1, 2 }
map.get(1) // 1
map.get(2) // 2
map.size // 2
map.has(1) // true
map.delete(1) // true
map.keys() // Map Iterator [2]
map.values() // Map Iterator [2]
map.entries() // Map Iterator [[2, 2]]
map.forEach((d, k) => { ... })
map.clear() // undefined

WeakMap

Here are the methods/properties for manipulating the entries of a WeakMap

• set(key): add a new element to the collection
• get(key): get an element
• has(value): check if an element exists
• delete(value): remove an element from the collection

let weakmap = new WeakMap()
let article = 'Javascript key-value store: is this unique among all programming languages?'
let url = 'https://pitayan.com/posts/javascript-key-value-array/'

weakmap.set(article, 'article') // WeakMap {{...} => "article"}
weakmap.set(url, 'url') // WeakMap {{...} => "url"}
weakmap.has(article) // true
weakmap.has(url) // true

weakmap.delete(article) // true

Set

Here are the methods/properties for manipulating the entries of a Set

• size: the amount of the included elements
• add(value): add a new element to the collection
• delete(value): remove an element from the collection
• has(value): check if an element exists
• clear(): remove all elements from collection
• keys(): get all keys
• values(): get all values, same to keys() since Set only has values
• entries(): get all iterators of all key-value pairs
• forEach(): loop through all elements

let set = new Set()

set.add(1) // Set { 1 }
set.add(2) // Set { 1, 2 }
set.size() // 1
set.has(1) // true
set.delete(1) // true
set.keys() // Set Iterator [2]
set.values() // Set Iterator [2]
set.entries() // Set Iterator [[2, 2]]
set.forEach((d, k) => { ... })
set.clear() // undefined

WeakSet

Here are the methods/properties for manipulating the entries of a WeakSet

• add(value): add a new element to the collection
• delete(value): remove an element from the collection
• has(value): check if an element exists

let weakset = new WeakSet()
let article = {
  name: 'Javascript key-value store: is this unique among all programming languages?'
}
let url = {
  address: 'https://pitayan.com/posts/javascript-key-value-array/'
}

weakset.add(article) // WeakSet {{...}}
weakset.add(url) // WeakSet {{...}, {...}}
weakset.has(url) // true
weakset.delete(article) // true
weakset.has(article) // false

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet
• https://juejin.im/post/5d39d14c518825625337f84e
• https://juejin.im/post/5e1d2717e51d4557e97b109b

Originally on pitayan.com
https://pitayan.com/posts/javascript-key-value-array/