Construct a map from keys and values in JavaScript
This post will discuss how to construct a map from arrays containing keys and values in JavaScript.
To construct a map from arrays containing keys and values in JavaScript, we can use one of the following functions:
1. Using Map() constructor
To construct a map from arrays containing keys and values in JavaScript, we can use the Map() constructor that takes an iterable object of key-value pairs as an argument and creates a new map object with the elements of the iterable. For example, if we have an array of keys and an array of values, we can use the zip() function from the Lodash library to combine them into an array of pairs, and then pass that to the Map() constructor. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// import the Lodash library const _ = require("lodash"); const keys = ["a", "b", "c"]; // create an array of keys const values = [1, 2, 3]; // create an array of values // use the zip function to create an array of pairs const pairs = _.zip(keys, values); // [["a", 1], ["b", 2], ["c", 3]] // use the Map constructor to create a map from the pairs const map = new Map(pairs); console.log(map); // Map(3) {"a" => 1, "b" => 2, "c" => 3} |
We can eliminate the need for the zip() function from the Lodash library by using the native Array.map() function for combining two arrays of keys and values. To get an object literal as a map, we can pass the array containing key-value pairs to the Object.fromEntries() function, which returns a new object with those pairs as properties. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const keys = ["a", "b", "c"]; // create an array of keys const values = [1, 2, 3]; // create an array of values // use the map function to create an array of pairs const pairs = keys.map((key, index) => [key, values[index]]); // pairs is [["a", 1], ["b", 2], ["c", 3]] // use the Map constructor to create a map from the pairs const map = new Map(pairs); console.log(map); // Map(3) {"a" => 1, "b" => 2, "c" => 3} // use the Object.fromEntries function to create a new object from the pairs const obj = Object.fromEntries(pairs); console.log(obj); // { a: 1, b: 2, c: 3 } |
2. Using Array.reduce() function
The Array.reduce() function applies a function to each element of an array, accumulating the result in a single value. We can use this function to create a new map object from an array of keys and an array of values, by using the callback function to set each key-value pair in the map. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const keys = ["a", "b", "c"]; // create an array of keys const values = [1, 2, 3]; // create an array of values // Create a new map from the arrays using reduce() const map = keys.reduce((acc, key, index) => { acc.set(key, values[index]); // Assign the key-value pair to accumulator return acc; // Return the accumulator object }, new Map()); // The initial value is an empty map console.log(map); // Map(3) {"a" => 1, "b" => 2, "c" => 3} // Create a new object from the arrays using reduce() const obj = keys.reduce((acc, key, index) => { acc[key] = values[index]; // Assign the key-value pair to accumulator return acc; // Return the accumulator object }, {}); // The initial value is an empty object console.log(obj); // { a: 1, b: 2, c: 3 } |
3. Using Map.set() function
The Map.set() function adds or updates a key-value pair in a map object. We can use this function to create a new map object from an array of keys and an array of values, by using a loop to iterate over the arrays and set each key-value pair in the map. We can use any kind of loop, such as a for loop, a while loop, or a forEach loop. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const keys = ["a", "b", "c"]; // create an array of keys const values = [1, 2, 3]; // create an array of values // Create a new map from the arrays using for loop const map = new Map(); for (let i = 0; i < keys.length; i++) { map.set(keys[i], values[i]); } console.log(map); // Map(3) {"a" => 1, "b" => 2, "c" => 3} // Create a new object from the arrays using for loop const obj = {}; for (let i = 0; i < keys.length; i++) { obj[keys[i]] = values[i]; } console.log(obj); // { a: 1, b: 2, c: 3 } |
That’s all about creating a map from arrays containing keys and values in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)