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

Cover image

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. object

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