DEV Community

Peter Mbanugo
Peter Mbanugo

Posted on

How To Merge Two Array of String Into A Key/Value Pair (Object) In JavaScript

There are different ways to merge two arrays in JavaScript. You can use one of the following:

  1. using the spread operator e.g. [ ...array1, ...array2]

  2. using Array.prototype.concat()

  3. using Array.prototype.push()

None of those will help if you need to merge two arrays to a Map or key/value pair for specific use. Given the example form below, we want to convert the separate array of keys and values, into an object.

Web form to collect environment variable

How do we merge the form data to give us an object like what you see below?

  "DB_URL": "",
  "NODE_ENV": "production"
Enter fullscreen mode Exit fullscreen mode


We're going to create a function that takes in two arguments: one for the array of keys, and the other for the values. That function will use the reduce() method to produce an object of key/value pair.

This is how the function will look like:

function mergeArraysToMap(keys: string[], values: string[]): { [key: string]: string } {
  if (keys.length !== values.length) {
    throw new Error("The number of keys and values must be the same.");

  // Use reduce to create the key/value map
  const mergedMap: { [key: string]: string } = keys.reduce((map, key, index) => {
    map[key] = values[index];
    return map;
  }, {});

  return mergedMap;
Enter fullscreen mode Exit fullscreen mode

The mergeArraysToMap function takes two arrays (keys and values) as arguments. It checks if the number of keys and values is the same and then uses the reduce method to create the key/value map. Then it returns the merged key/value pair.

We can take this further and ensure that we don't accept an empty string for the key or value. For that, we can modify the reduce method as follows:

const mergedMap: { [key: string]: string } = keys.reduce(
    (map, key, index) => {
      if ((key && !values[index]) || (!key && values[index]))
        throw new Error("invalid key/pair");

      if (key && values[index]) map[key] = values[index];
      return map;
    {} as Record<string, string>
Enter fullscreen mode Exit fullscreen mode

With that implementation, we can be sure that we will get a valid key/value pair.

You can play around with the code on the TypeScript playground using this link.

Top comments (2)

blindfish3 profile image
Ben Calder • Edited

Good use of reduce but the conditions you add could be improved:

  • no need to check for truthy value && falsy value. Just check for !key || !value
  • the first guard condition renders the following check for truthy values redundant. It can be removed
  • worth adding a warning that your test for truthy values will fail on zero if someone wants to apply this to numeric properties
pmbanugo profile image
Peter Mbanugo

Thanks for the contribution. Using !key || !value will cause an error when both key and value are empty. In this case, I'd want them to be treated as null/undefined. That is, don't throw an error but don't add them to the Map.

For numeric properties, it can be adapted to cover that specific usecase.