There are multiple ways of storing key => value arrays in JavaScript. However, the tricky part is storing the keys and values from two different arrays into a single element. And to add to its trickiness, key and value are to be stored in such a scheme that fetching a key with its respective value is easy. This cuts down the number of methods to achieve the task at hand to only two. The two most promising methods include the use of Objects and Maps. This article will go through both of these methods one by one.

Note: This article will assume that keys and values are stored in different arrays, and the objective is to store them together and have them formatted as “key => value” while fetching.

Method 1: Using Objects to Store Key => Value Arrays

To demonstrate this method, first create a key array and a value array with the following lines:

After that, create an empty JavaScript object with the following line:

After that, simply copy the keys and values from their array and add them in the object using the following lines:

In this above code snippet:

• A for loop is run and its iterations are equal to the number of elements inside the keys array.
• In each iteration, a new attribute of property of the object is created, and it is given the name equal to the element inside the key array and its respective value from the value array by using the same index values.

After that, pass the resultObj to the console log function to print it out on the terminal:

Executing the code will provide the following output:

The keys and values are stored together, but they are still not in the “key => format”
To display them in the correct format, use the following lines of code:

In this code snippet:

• Object.keys() method returns the keys of the object in its argument one by one. The keys are getting stored inside the variable “x”
• String concatenation is used to format the output of the console log as “keys=> values”

Executing the program now produces the following result:

The output shows that the keys are not only stored together but also formatted in the correct way.

Method 2: Using Maps to Store Key => Value Arrays

To demonstrate the usage of maps for storing keys and their respective values, create two arrays with keys and values with the following lines of code:

The next step is to create a map, for this create a variable and set it equal to the new Map() constructor like:

To add values to a Map variable, there is this method mapVar.set(). Use this function to add keys and their respective values:

In the code snippet mentioned above:

• A for loop is used to iterate through the keysArray and the valuesArray using the length of the keysArray.
• In each iteration, resultMap.set() method is used to store the key and value pair in the map.

After this, simply pass the resultMap variable onto the terminal by using the console log function:

This code will produce the following output:

It is sort of in the right format, but it includes a little extra information. To correctly format it, use the following lines:

In this code snippet:

• resultMap.keys() method returns the keys of the map one by one to the key variable.
• resultMap.get() method is used to get the value of a specific key.
• And in the console log function, string concatenation is used to correctly format the output.

Executing the code now produces the following output on the terminal:

The output shows that the keys are not only stored together but also formatted in the correct way.

Conclusion

In JavaScript, Objects and Maps are the two elements that are most suited to store keys and value pairs, even if the task at hand is to take keys and values from individual arrays and place them inside a single entity. Afterward, whenever the user is trying to get keys and their respective values, they can be easily formatted in “key => value” format by using simple string concatenation in JavaScript.