How to store a key=> value array in JavaScript ?
We have given two arrays containing keys and values and the task is to store it as a single entity in the form key => value in JavaScript. In JavaScript, the array is a single variable that is used to store different elements. It is usually used once we need to store a list of parts and access them by one variable. We can store key => value array in JavaScript Object using methods discussed below:
Method 1: In this method we will use Object to store key => value in JavaScript. Objects, in JavaScript, is the most important data-type and forms the building blocks for modern JavaScript. These objects are quite different from JavaScript’s primitive data-types(Number, String, Boolean, null, undefined and symbol). Objects are more complex and each object may contain any combination of these primitive data-types as well as reference data-types.
Approach: We will traverse through the whole array and one by one add the keys from the keys (array) and the corresponding values from values (array) in the Object.
Syntax:
for(var i = 0; i < keys.length; i++){
// obj = Object
// keys = key array
// values = value array
obj[keys[i]] = values[i];
}
Example:
<script>
// An array of keys
var keys = [1, 2, 3];
// An array of values
var values = ["w3wiki", "Computer", "Science"];
// Object created
var obj = {};
// Using loop to insert key
// value in Object
for(var i = 0; i < keys.length; i++){
obj[keys[i]] = values[i];
}
// Printing object
for (var key of Object.keys(obj)) {
document.write(key + " => " + obj[key] + "</br>")
}
</script>
Output:
1 => w3wiki
2 => Computer
3 => Science
Method 2: In this method we will use Map to store key => value in JavaScript. The map is a collection of elements where each element is stored as a key, value pair. Map objects can hold both objects and primitive values as either key or value. When we iterate over the map object it returns the key, value pair in the same order as inserted.
Approach: We will traverse through the whole array and one by one add the keys from the keys (array) and the corresponding values from values (array) in the map.
Syntax:
for(var i = 0; i < keys.length; i++){
// mp = Map
// keys = key array
// values = value array
map.set(keys[i], values[i];
}
Example:
<script>
// An array of keys
var keys = [5, 2, 3, 6, 10];
// An array of values
var values = ["Beginner", "for", "Beginner", "Course", "Algorithm"];
// Map created
var map = new Map();
// Using loop to insert key
// value in map
for(var i = 0; i < keys.length; i++){
map.set(keys[i], values[i]);
}
// Printing
for (var key of map.keys()) {
document.write(key + " => " + map.get(key) + "</br>")
}
</script>
Output:
5 => Beginner
2 => for
3 => Beginner
6 => Course
10 => Algorithm
Method 3: In this method we will use reduce to store key => value in JavaScript. The reduce is method which is use iterate over the list of elements. This method is used to reduce the array to a single value and executes a provided function for each value of the array (from left-to-right) and the return value of the function is stored in an accumulator.
Syntax:
array.reduce( function(total, currentValue, currentIndex, arr), initialValue )
Example:
<script>
// An array of keys
var keys = [5, 2, 3, 6, 10];
// An array of values
var values = ["Beginner", "for", "Beginner", "Course", "Algorithm"];
// Using reduce to make
// stroe key value array in object
var ans = values.reduce(( acc, value, i ) => {
acc[keys[i]] = value;
return acc}, {})
// Printing
for (const key in ans) {
console.log(`${key} => ${ans[key]} ` )
}
</script>
Output:
2 => for
3 => Beginner
5 => Beginner
6 => Course
10 => Algorithm
Method 4: In this method we will use the forEach() method to store key => value in JavaScript. This method iterates over elements of an array and executes a callback function for each element. We can use this method to iterate over the keys array and simultaneously access corresponding values from the values array to create key-value pairs and store them in an object.
Syntax:
const obj = {};
keys.forEach((key, index) => {
obj[key] = values[index];
});
Example:
// An array of keys
const keys = [5, 2, 3, 6, 10];
// An array of values
const values = ["Beginner", "for", "Beginner", "Course", "Algorithm"];
// Initialize an empty object
const obj = {};
// Using forEach to create key-value pairs
keys.forEach((key, index) => {
obj[key] = values[index];
});
// Printing the object
for (const key in obj) {
console.log(`${key} => ${obj[key]}`);
}
Output
2 => for 3 => Beginner 5 => Beginner 6 => Course 10 => Algorithm
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Contact Us