Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to store a key => value array in JavaScript?
In JavaScript, storing data in key-value pairs is essential for organizing information like user details, configuration settings, or any structured data. JavaScript provides several approaches to achieve this functionality.
We can use different data structures, such as objects or maps in JavaScript, to store data in the key-value format.
Using Objects to Store Key-Value Pairs
In JavaScript, objects are the most common way to store data in key-value format. Objects allow dynamic property assignment and easy data retrieval using keys.
Syntax
let object = {};
object[key] = value;
// or
object.key = value;
Example
In this example, we create key-value pairs by mapping numbers to their string representations using arrays and a for loop:
<html>
<body>
<h2>Using Objects to Store Key-Value Pairs</h2>
<div id="output"></div>
<script>
var output = document.getElementById('output');
let keysArray = [1, 2, 3, 4, 5, 6];
let valuesArray = ["one", "two", "three", "four", "five", "six"];
let object = {};
// Store key-value pairs in object
for (let i = 0; i < keysArray.length; i++) {
object[keysArray[i]] = valuesArray[i];
}
// Display all key-value pairs
for (let key in object) {
output.innerHTML += "Key: " + key + ", Value: " + object[key] + "<br>";
}
</script>
</body>
</html>
Using Map to Store Key-Value Pairs
The Map object is specifically designed for storing key-value pairs and offers better performance for frequent additions and deletions. Maps maintain insertion order and allow any data type as keys.
Syntax
let mapData = new Map(); mapData.set(key, value); let value = mapData.get(key);
Example
This example demonstrates using Map to store string keys with numeric values:
<html>
<body>
<h2>Using Map to Store Key-Value Pairs</h2>
<div id="output"></div>
<script>
var output = document.getElementById('output');
let mapKeys = ["one", "two", "three", "four", "five", "six"];
// Create new Map
let mapData = new Map();
// Set key-value pairs
for (let i = 0; i < mapKeys.length; i++) {
mapData.set(mapKeys[i], i + 1);
}
// Display all key-value pairs
for (let mapKey of mapData.keys()) {
output.innerHTML += "Key: " + mapKey + ", Value: " + mapData.get(mapKey) + "<br>";
}
</script>
</body>
</html>
Using Array.reduce() Method
The array.reduce() method can transform an array into an object with key-value pairs. This approach is useful when you need to convert array data into an object structure with custom key generation logic.
Syntax
let object = array.reduce((obj, element, index) => {
obj[customKey] = element;
return obj;
}, {});
Example
Here we convert an array of programming languages into an object where indices serve as keys:
<html>
<body>
<h2>Using Array.reduce() to Store Key-Value Pairs</h2>
<div id="output"></div>
<script>
var output = document.getElementById('output');
let arrayOfValues = ["TypeScript", "JavaScript", "ReactJS", "NextJS", "Python", "C"];
// Convert array to object using reduce
let object = arrayOfValues.reduce((obj, element, index) => {
obj[index * 2] = element; // Use index*2 as key
return obj;
}, {});
// Display all key-value pairs
for (let objKey in object) {
output.innerHTML += "Key: " + objKey + ", Value: " + object[objKey] + "<br>";
}
</script>
</body>
</html>
Comparison
| Method | Key Types | Performance | Best For |
|---|---|---|---|
| Objects | Strings, Symbols | Good | Simple key-value storage |
| Map | Any type | Better | Frequent additions/deletions |
| Array.reduce() | Custom | Good | Array-to-object transformation |
Conclusion
Objects are ideal for simple key-value storage, while Maps offer better performance and flexibility with key types. Use Array.reduce() when transforming existing arrays into key-value structures.
6K+ Views
