Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to store a key => value array in JavaScript?
Sometimes, we require to map keys to particular values using some data structure in JavaScript. For example, storing the user details in the key value pairs in JavaScript is useful.
We can use different data structures, such as objects or maps in JavaScript, to store data in the key-value format.
Use the objects to store a key => value in JavaScript
In JavaScript, objects allow us to store data in the key-value format. We can use the key with the object to get the data from the object.
Syntax
Users can follow the syntax below to use the object to store key-value pairs in JavaScript
let object = {};
object[key] = value;
In the above syntax, we have created the empty object. Also, we store the value for a particular key in the object
Example 1
In the example below, we created the keysArray, which contains the numbers. The valuesArray contains the different strings representing the number.
After that, we used the for loop to iterate through the keysArray. We are taking the key from the ith index of the keysArray, and the value from the ith index of the valuesArray. For every key, we store the value in the object.
At last, we printed all the keys and values of the object.
<html>
<body>
<h2>Using the <i> objects </i> to store a key => value pairs in JavaScript.</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 = {};
for (let i = 0; i < keysArray.length; i++) {
object[keysArray[i]] = valuesArray[i];
}
for (let key in object) {
output.innerHTML += "Key - " + key + " , value - " + object[key] + "<br>";
}
</script>
</body>
</html>
Use the map to store key => value in JavaScript
We can also use the map to store the data in the key-value format. The map class contains the set() method to set the data and takes the key and value as a parameter. Also, the map class contains the get() method, which takes the key as a parameter and returns the mapped value.
Syntax
Users can follow the syntax below to use the map to store key-value pairs in JavaScript.
let mapData = new Map(); mapData.set(key, value)
We used the Map() constructor in the above syntax to create a new map object. Also, we have used the set() method to set keys and values.
Example 2
In the example below, the mapKeys array contains the number strings. We iterate through the array and set key-value pairs to the map. Inside the for loop, we used the set() method to set key values in the map. Also, we have passed the key from the mapKeys array as the first parameter and the index as a second parameter.
<html>
<body>
<h2>Using the <i> mapData </i> to store a Key => value pairs in JavaScript.</h2>
<div id = "output"> </div>
<script>
var output = document.getElementById('output');
let mapKeys = ["one", "two", "three", "four", "five", "six"];
// Creating the new map
let mapData = new Map();
for (let i = 0; i < mapKeys.length; i++) {
mapData.set(mapKeys[i], i)
}
for (let mapKey of mapData.keys()) {
output.innerHTML += "mapKey - " + mapKey + " , value - " + mapData.get(mapKey) + "<br>";
}
</script>
</body>
</html>
Use the array.reduce() method to store key => value in JavaScript
The array.reduce() method converts the array into a single element by reducing the array. We can use the reduce() method to convert the whole array into a single object by storing array data inside the object in the key-value pair format.
Syntax
Users can follow the syntax below to use the array.reduce() method to store array data in the object.
let object = arrayOfValues.reduce((obj, element, index) => {
obj[index * 2] = element;
return obj;
}, {})
We have initialized the obje with {} (empty object) in the above syntax. We store every element of the array in the obj object and return it from the array.reduce() method.
Example 3
In the example below, we have an arrayOfValues variable containing the different programming languages in the string format. We have converted the array into the object format, which stores the array data in the key-value format.
In the array.reduce() method and the obj object contains the updated key values from the last iteration. In the current iteration, we use the index *2 as a key and the array element as the value of the object element. After that, we return the obj.
<html>
<body>
<h2>Using the <i> Array.reduce() method </i> to store a key => value pairs in JavaScript.</h2>
<div id = "output"> </div>
<script>
var output = document.getElementById('output');
let arrayOfValues = ["TypeScript", "JavaScript", "ReactJS", "NextJS", "Python", "C"];
let object = arrayOfValues.reduce((obj, element, index) => {
// store element to object
obj[index * 2] = element;
// return updated object
return obj;
}, {})
for (let objKey in object) {
output.innerHTML += "Key - " + objKey + " , value - " + object[objKey] + "<br>";
}
</script>
</body>
</html>
We have used the map, object, and array.reduce() method to store the data in the key– value format in JavaScript. The map is the best way to store the data in the key-value format.
5K+ Views
