In many programming languages, associative arrays let us store key-value pairs in our JavaScript app.
In this article, we’ll look at how to create associative arrays or a hash with JavaScript.
Create Associate Arrays with Objects
One way to create associative arrays is with JavaScript objects.
This is because we can remove JavaScript object properties dynamically.
The property name is the key and the value is the value.
For instance, we can write:
const dictionary = {}
dictionary.a = 1
dictionary.b = 2
console.log(dictionary)
to create the dictionary object with properties a and b .
dictionary is {a: 1, b: 2} .
We can also put property names in square brackets as strings.
For instance, we can write:
const dictionary = {}
dictionary['a'] = 1
dictionary['b'] = 2
console.log(dictionary)
This lets us add property names dynamically in our code.
Then to iterate through the object, we can use the Object.keys , Object.values or Object.entries methods.
Object.keys returns an array of keys of an object.
Object.values returns an array of values of an object.
Object.entries returns an array of array of key-value pairs of an object.
For instance, we can write:
const dictionary = {}
dictionary.a = 1
dictionary.b = 2
for (const key of Object.keys(dictionary)) {
console.log(key, dictionary[key])
}
Then we get:
a 1
b 2
from the console log.
key has the key that’s being iterated through with the for-of loop.
We can loop through the values with Object.values :
const dictionary = {}
dictionary.a = 1
dictionary.b = 2
for (const value of Object.values(dictionary)) {
console.log(value)
}
So we get:
1
2
from the console log.
And we can loop through the key-value pairs with Object.entries :
const dictionary = {}
dictionary.a = 1
dictionary.b = 2
for (const [key, value] of Object.entries(dictionary)) {
console.log(key, value)
}
We destructure the key and value from the array being iterated through to get the key and value.
And so we get:
a 1
b 2
Since Object.keys , Object.values or Object.entries methods return arrays, we can get the length with the length property of what they return.
Maps
ES6 comes with the Map constructor to let us create associative arrays or hashes.
For instance, we can use it by writing:
const map = new Map()
map.set('a', 1)
map.set('b', 2)
We call the set method with the key and value respectively to add the entry.
Then we can iterate through it with the for-of loop since it’s an iterable object:
for (const [key, value] of map) {
console.log(key, value)
}
We can use the get method with the key to getting the value for the given key:
const map = new Map()
map.set('a', 1)
map.set('b', 2)
console.log(map.get('a'))
We pass in 'a' to return 1, which is what we have on the map.
To get the size, we use the size property:
const map = new Map()
map.set('a', 1)
map.set('b', 2)
console.log(map.size)
And the console log should show 2.
Conclusion
We can create an associative array or hash with JavaScript objects with maps.
