How to store a key=> value array in JavaScript ?

Last Updated : 10 Jan, 2025

In JavaScript, storing a key-value array means creating an object where each key is associated with a specific value. This allows you to store and retrieve data using named keys instead of numeric indices, enabling more intuitive access to the stored information.

Here are some common approaches:

Table of Content

Using Objects
Using Map() Method
Using reduce() Method

Approach 1: Using Objects

Using the Objects approach in JavaScript, key-value pairs are stored in an object where each key is associated with a specific value. Objects are ideal for mapping keys to values and are versatile, handling various data types including numbers, strings, and other objects.

Syntax:

for (let i = 0; i < keys.length; i++) {
    // obj = Object
    // keys = key array
    // values = value array
    obj[keys[i]] = values[i];
}

Example: In this example we creates an object by mapping keys from the keys array to values from the values.

// An array of keys
let keys = [1, 2, 3];

// An array of values
let values = ["GeeksforGeeks", "Computer", "Science"];

// Object created
let obj = {};

// Using loop to insert key-value pairs into the object
for (let i = 0; i < keys.length; i++) {
    obj[keys[i]] = values[i];
}

// Printing object to the console
for (let key of Object.keys(obj)) {
    console.log(key + " => " + obj[key]); 
}

Output

1 => GeeksforGeeks
2 => Computer
3 => Science

Approach 2: Using Map() Method

Using the Map approach in JavaScript, key-value pairs are stored in a Map object, which allows keys of any type (including objects and functions) and maintains the order of insertion. Maps provide efficient methods for adding, retrieving, and iterating over elements.

Syntax:

for (let i = 0; i < keys.length; i++) {
    // mp = Map
    // keys = key array
    // values = value array
    map.set(keys[i], values[i]);
}

Example: In this example we creates a Map by associating keys from the keys array with values from the values array.

// An array of keys
let keys = [5, 2, 3, 6, 10];

// An array of values
let values = ["Geeks", "for", "Geeks", "Course", "Algorithm"];

// Map created
let map = new Map();

// Using loop to insert key-value pairs into the map
for (let i = 0; i < keys.length; i++) {
    map.set(keys[i], values[i]);
}

// Printing map contents to the console
for (let key of map.keys()) {
    console.log(key + " => " + map.get(key)); 
}

Output

5 => Geeks
2 => for
3 => Geeks
6 => Course
10 => Algorithm

Approach 3: Using reduce() Method

The reduce() method in JavaScript iterates over an array to accumulate key-value pairs into an object. It executes a function on each element, building the object as it processes each key-value pair.

Syntax:

array.reduce( function(total, currentValue, currentIndex, arr), initialValue )

Example: In this example we use the reduce() method to combine two arrays, keys and values, into an object. It then prints each key-value pair from the object using a for…in loop.

// An array of keys
let keys = [5, 2, 3, 6, 10];

// An array of values
let values = ["Geeks", "for", "Geeks", "Course", "Algorithm"];

// Using reduce to store key-value pairs in an object
let ans = values.reduce((acc, value, i) => {
    acc[keys[i]] = value; // Assigning value to corresponding key
    return acc;
}, {}); // Initializing accumulator as an empty object

// Printing key-value pairs from the object
for (const key in ans) {
    console.log(`${key} => ${ans[key]}`);
}

Output

2 => for
3 => Geeks
5 => Geeks
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.